/*
Theme Name: TPCN Scorecard
Theme URI: https://tpcn.net
Description: The Practical Choice theme. Scorecard design (red header, condensed headlines, score tables). Requires the TPCN Core mu-plugin.
Version: 1.0.0
Requires PHP: 8.1
Text Domain: tpcn
*/
:root{
  --red:#D7141A; --red-deep:#B30F14; --on-red:#FFFFFF;
  --bg:#FFFFFF; --ink:#111214; --ink-2:#5F6368; --hair:#E3E5E8; --head:#F3F5F8; --tint:#F7F8FA;
  --buy:#15803D; --buy-hover:#166534; --buy-press:#0F5A2C;
  --c1:#7C3AED; --c2:#15803D; --c3:#EA580C; --c4:#1A73E8; --c5:#0E7490;
  --link:#1558B0; --skip:#B42318; --demo:#FFF4D6; --on-demo:#5C4300;
  --f-disp:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-ui:"Barlow","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-ui); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
.wrap{max-width:1140px; margin-inline:auto; padding-inline:20px}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0; text-wrap:balance}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px)}

/* header */
.top{background:var(--red); color:var(--on-red)}
.bar1{display:flex; align-items:center; gap:28px; padding-block:12px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.logo .box{width:34px; height:34px; border:3px solid #fff; border-radius:5px; display:grid; place-items:center; font-weight:800; font-size:20px; line-height:1}
.logo b{display:block; font-family:var(--f-disp); font-weight:800; font-size:30px; line-height:.95}
.logo small{display:block; font-size:14px; font-weight:600; opacity:.92}
.nav1{display:flex; gap:26px; list-style:none; margin:0 0 0 auto; padding:0; font-weight:600; font-size:17px; white-space:nowrap}
.nav1 a{text-decoration:none}
.nav1 a:hover,.nav1 a[aria-current]{border-bottom:2px solid #fff; padding-bottom:3px}
.tools{display:flex; align-items:center; gap:14px; flex:none}
.tools a{display:flex; text-decoration:none}
.tools .pick{border:2px solid #fff; border-radius:4px; padding:7px 12px; font-weight:700; font-size:14px; white-space:nowrap}
.bar2{border-top:1px solid rgba(255,255,255,.28); overflow-x:auto}
.bar2 ul{display:flex; gap:26px; list-style:none; margin:0 auto; padding:9px 20px; font-size:15px; white-space:nowrap}
.bar2 .lbl{font-family:var(--f-disp); font-weight:800; font-size:16px; letter-spacing:.02em}
.bar2 a{text-decoration:none}
.bar2 a:hover{text-decoration:underline}
.bar2 .soon{opacity:.7}
.strip{border-bottom:1px solid var(--hair); box-shadow:0 2px 6px rgba(0,0,0,.05)}
.strip .wrap{padding-block:9px}
.strip b{font-family:var(--f-disp); font-weight:800; font-size:21px; color:var(--red); text-transform:uppercase}
.strip p{margin:0; font-size:14px; color:var(--ink-2)}
.strip p a{color:var(--red); font-weight:700; text-decoration:none}

/* shared bits */
.crumb{font-size:14.5px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.crumb a{color:var(--link); text-decoration:none}
.crumb span[aria-hidden]{color:#9AA0A6}
.demo-note{background:var(--demo); color:var(--on-demo); font-size:14px; padding:8px 14px; border-radius:6px; margin-top:14px}
.label{display:inline-block; border:1.5px solid var(--ink-2); border-radius:3px; padding:2px 8px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2)}
.label.hands{border-color:var(--buy); color:var(--buy)}
.sec-h{font-family:var(--f-disp); font-weight:800; font-size:clamp(30px,4vw,44px); line-height:1; letter-spacing:-.01em}
.sec-h a{text-decoration:none}
.sec-h a:hover{color:var(--red)}
.redrule{border-top:3px solid var(--red); padding-top:12px}
.empty{background:var(--tint); border:1px dashed var(--hair); border-radius:8px; padding:18px 20px; color:var(--ink-2)}

/* article list cards */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; margin-top:18px}
.card-a{border:1px solid var(--hair); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; background:#fff}
.card-a:hover{border-color:var(--ink-2)}
.card-a .ph{aspect-ratio:16/10; background:var(--tint); display:grid; place-items:center; overflow:hidden}
.card-a .ph img{width:100%; height:100%; object-fit:contain}
.card-a .tx{padding:14px 16px 16px; display:grid; gap:6px}
.card-a .fmt{font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--red)}
.card-a h3{font-family:var(--f-disp); font-weight:700; font-size:24px; line-height:1.05}
.card-a time{font-size:13.5px; color:var(--ink-2)}
.chips-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chip-l{border:1px solid var(--hair); border-radius:999px; padding:5px 12px; font-size:14.5px; font-weight:600; text-decoration:none; background:#fff}
a.chip-l:hover{border-color:var(--red); color:var(--red)}
.chip-l.soon{color:var(--ink-2); font-weight:500; border-style:dashed}

/* home */
.hero{padding-block:44px 30px; border-bottom:1px solid var(--hair)}
.hero h1{font-family:var(--f-disp); font-weight:800; font-size:clamp(44px,7vw,84px); line-height:.92; letter-spacing:-.015em; max-width:14ch}
.hero p{font-size:20px; max-width:60ch; color:#2A2D31; margin:16px 0 0}
.searchbar{display:flex; gap:8px; margin-top:22px; max-width:620px}
.searchbar input{flex:1; min-width:0; font:inherit; font-size:17px; padding:12px 14px; border:2px solid var(--ink); border-radius:6px}
.searchbar button{font:inherit; font-weight:700; padding:0 18px; border:0; border-radius:6px; background:var(--ink); color:#fff; cursor:pointer}
.hubrow{margin-top:52px}
.hubrow .hh{display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; border-top:3px solid var(--ink); padding-top:12px}
.hubrow .hh span{font-size:14px; color:var(--ink-2); font-weight:600; text-transform:uppercase; letter-spacing:.06em}
.howband{margin-top:64px; background:var(--tint); border-radius:8px; padding:30px clamp(20px,4vw,40px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:30px}
.howband h2{font-family:var(--f-disp); font-weight:800; font-size:40px; line-height:1; color:var(--red)}
.howband ul{margin:0; padding-left:20px; display:grid; gap:10px; font-size:17px}
.howband a{color:var(--link); font-weight:700; text-decoration:none}

/* category pages */
.catpage{padding-top:18px}
.catpage h1{font-family:var(--f-disp); font-weight:800; font-size:clamp(44px,7vw,80px); line-height:.92; letter-spacing:-.015em; margin-top:18px}
.catpage .intro{font-size:19px; max-width:65ch; color:#2A2D31; margin-top:12px}
.hubgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; margin-top:26px}
.hubcard{border:1px solid var(--hair); border-radius:8px; padding:20px}
.hubcard h2{font-family:var(--f-disp); font-weight:800; font-size:32px; line-height:1}
.hubcard h2 a{text-decoration:none}
.hubcard h2 a:hover{color:var(--red)}
.list{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:0}
.list li{border-bottom:1px solid var(--hair); padding-block:12px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:baseline}
.list .fmt{font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--red); min-width:70px}
.list a{font-weight:600; text-decoration:none; font-size:18px}
.list a:hover{color:var(--red)}
.list time{font-size:13.5px; color:var(--ink-2)}

/* article */
.post{max-width:1000px; margin-inline:auto; padding-inline:20px; padding-top:18px}
h1.title{font-family:var(--f-disp); font-weight:800; font-size:clamp(44px,7.4vw,86px); line-height:.92; letter-spacing:-.018em; margin-top:22px}
.byline{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; align-items:center; margin-top:14px; font-size:15.5px; color:var(--ink-2)}
.byline b{color:var(--ink); font-weight:600}
.byline .label{margin-left:10px}
.redbar{background:var(--red); color:#fff; font-family:var(--f-disp); font-weight:700; font-size:clamp(22px,2.6vw,30px); padding:8px 22px; margin-top:22px}
.tbl-wrap{overflow-x:auto; border:1px solid var(--hair); border-top:0}
table.score{width:100%; min-width:760px; border-collapse:collapse}
.score th{background:var(--head); text-align:left; font-weight:700; font-size:16px; padding:14px 18px; border-bottom:1px solid var(--hair); vertical-align:bottom}
.score th small{display:block; font-weight:500; color:var(--ink-2); font-size:14px}
.score th + th,.score td + td{border-left:1px solid var(--hair)}
.score td{padding:14px 18px; border-bottom:1px solid var(--hair); vertical-align:middle}
.score tr:last-child td{border-bottom:0}
.prod{display:flex; align-items:center; gap:14px; font-family:var(--f-disp); font-weight:700; font-size:24px; line-height:1.05}
.prod a{text-decoration:none}
.prod .th{width:64px; height:64px; flex:none; display:grid; place-items:center}
.prod .th img{width:100%; height:100%; object-fit:contain}
.prod .th.icon{background:var(--tint); border-radius:6px; color:var(--ink-2)}
.prod small{display:block; font-family:var(--f-ui); font-weight:600; font-size:13px; color:var(--ink-2); margin-top:4px}
.badge{display:inline-block; font-family:var(--f-disp); font-weight:800; font-size:34px; line-height:1; color:#fff; padding:6px 12px 5px; border-radius:8px}
.meter{height:10px; background:#E8EAED; border-radius:5px; overflow:hidden; margin-top:10px}
.meter i{display:block; height:100%; border-radius:5px}
.sub{font-weight:700; font-size:20px}
.sub span{font-weight:500; font-size:13px; color:var(--ink-2); margin-left:3px}
.sub .meter{height:7px; margin-top:8px}
.cost{font-weight:700; font-size:19px}
.cost small{display:block; font-weight:500; font-size:13px; color:var(--ink-2)}
.k1 .badge,.k1 .meter i{background:var(--c1)} .k2 .badge,.k2 .meter i{background:var(--c2)} .k3 .badge,.k3 .meter i{background:var(--c3)} .k4 .badge,.k4 .meter i{background:var(--c4)} .k5 .badge,.k5 .meter i{background:var(--c5)}
.tbl-note{font-size:13.5px; color:var(--ink-2); margin:10px 0 0}
.prose{max-width:760px; margin-top:34px; font-size:18px; line-height:1.65; color:#2A2D31}
.prose p{margin:0 0 18px}
.prose a{color:var(--link); text-decoration:none}
.prose a:hover{text-decoration:underline}
.prose h2{font-family:var(--f-disp); font-weight:800; font-size:38px; line-height:1; color:var(--red); border-top:3px solid var(--red); padding-top:12px; margin:40px 0 14px}
.prose h3{font-family:var(--f-disp); font-weight:700; font-size:27px; line-height:1.1; margin:26px 0 10px; color:var(--ink)}
.prose ul,.prose ol{padding-left:22px; margin:0 0 18px}
.prose li{margin-bottom:6px}
.pickh{font-family:var(--f-disp); font-weight:800; font-size:clamp(38px,5vw,58px); line-height:.95; margin-top:60px; border-bottom:1px solid var(--hair); padding-bottom:12px}
.pickh em{font-style:normal; color:var(--red)}
.pcard{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:36px; margin-top:24px; align-items:start}
.pcard .shot{border-right:1px solid var(--hair); padding-right:30px}
.pcard .shot img{width:100%; aspect-ratio:1; object-fit:contain}
.pcard .shot .icon{aspect-ratio:1; background:var(--tint); border-radius:8px; display:grid; place-items:center; color:var(--ink-2)}
.pcard h3{font-family:var(--f-disp); font-weight:800; font-size:44px; line-height:.95}
.pcard .desc{font-size:17px; color:#2A2D31; margin-top:6px}
.overall{display:flex; align-items:center; gap:14px; margin-top:16px}
.overall .badge{font-size:46px; padding:8px 16px 6px; border-radius:10px; color:#fff}
.overall b{display:block; font-size:18px}
.overall div span{font-size:14.5px; color:var(--ink-2)}
.bars{display:grid; gap:14px; margin-top:20px}
.bars .row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; font-size:16.5px}
.bars .row span.w{color:var(--ink-2); font-weight:500}
.bars .row .v{font-weight:700; font-size:18px}
.bars .row .v small{font-weight:500; font-size:13px; color:var(--ink-2)}
.bars .meter{grid-column:1 / -1; margin-top:0; height:9px}
.chips{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--hair); margin-top:22px; padding-top:16px}
.chip{padding-inline:10px; border-left:1px solid var(--hair); font-size:14px; line-height:1.3}
.chip:first-child{border-left:0; padding-left:0}
.chip small{display:block; color:var(--ink-2); font-size:12.5px}
.chip b{font-weight:600}
.buy{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:22px; background:var(--buy); color:#fff; text-decoration:none; border-radius:8px; padding:16px 20px; font-family:var(--f-disp); font-weight:700; font-size:27px; line-height:1; box-shadow:0 3px 0 var(--buy-press),0 10px 22px rgba(21,128,61,.25); transition:background .15s}
.buy:hover{background:var(--buy-hover)}
.buy-plain{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:22px; border:2px solid var(--ink); color:var(--ink); text-decoration:none; border-radius:8px; padding:14px 20px; font-family:var(--f-disp); font-weight:700; font-size:25px; line-height:1}
.fine{font-size:13.5px; color:var(--ink-2); margin-top:8px; text-align:center}
.pc{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px}
.pc h4,.skip h4,.math h4{margin:0 0 8px; font-family:var(--f-disp); font-weight:800; font-size:20px; letter-spacing:.02em; text-transform:uppercase}
.pc ul{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:16px; line-height:1.4}
.pc li{display:grid; grid-template-columns:18px 1fr}
.pc .p{color:var(--buy); font-weight:800}
.pc .m{color:var(--skip); font-weight:800}
.skip{margin-top:18px; background:#FDF1F0; border-radius:6px; padding:12px 16px}
.skip h4{color:var(--skip)}
.skip p{margin:0; font-size:16px}
.math{margin-top:18px; border:1px solid var(--hair); border-radius:6px; padding:12px 16px}
.math table{width:100%; border-collapse:collapse; margin-top:6px; font-size:15.5px}
.math td{padding:6px 0; border-bottom:1px dashed var(--hair)}
.math td:last-child{text-align:right; font-weight:700}
.math tr:last-child td{border-bottom:0; border-top:2px solid var(--ink); font-weight:800; font-size:17px}
.mobile-buy{display:none}

/* static pages, search, 404 */
.static{max-width:800px; margin-inline:auto; padding-inline:20px; padding-top:18px}
.static h1{font-family:var(--f-disp); font-weight:800; font-size:clamp(40px,6vw,64px); line-height:.95; margin-top:18px}

footer.site{margin-top:90px; background:var(--ink); color:#D9DCE0; padding-block:36px; font-size:14.5px}
footer.site .wrap{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:24px 40px}
footer.site b.brand{font-family:var(--f-disp); font-weight:800; font-size:26px; color:#fff; display:block}
footer.site h4{margin:0 0 10px; color:#fff; font-size:13px; letter-spacing:.08em; text-transform:uppercase}
footer.site ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
footer.site a{text-decoration:none}
footer.site a:hover{color:#fff; text-decoration:underline}
footer.site .legal{grid-column:1 / -1; border-top:1px solid #2A2D31; padding-top:16px; font-size:13px; color:#A9AEB4}

@media (max-width:980px){ .nav1{display:none} .tools{margin-left:auto} .howband{grid-template-columns:1fr} }
@media (max-width:760px){
  .pcard{grid-template-columns:1fr; gap:14px}
  .pcard .shot{border-right:0; padding-right:0; max-width:320px; margin-inline:auto}
  .chips{grid-template-columns:1fr 1fr; gap:14px 0}
  .chip:nth-child(3){border-left:0; padding-left:0}
  .pc{grid-template-columns:1fr}
  .buy{font-size:23px}
  .tools .pick{display:none}
  .list li{grid-template-columns:1fr; gap:4px}
  footer.site .wrap{grid-template-columns:1fr}
  .mobile-buy{display:flex; position:sticky; bottom:0; z-index:5; align-items:center; gap:12px; background:#fff; border-top:1px solid var(--hair); padding:10px 16px; box-shadow:0 -4px 14px rgba(0,0,0,.06)}
  .mobile-buy div{flex:1; min-width:0; font-size:14px; line-height:1.25}
  .mobile-buy b{display:block; font-size:15px}
  .mobile-buy small{color:var(--ink-2)}
  .mobile-buy a{background:var(--buy); color:#fff; text-decoration:none; font-weight:700; font-size:16px; padding:11px 16px; border-radius:6px; white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){ .buy{transition:none} }