/* ============================================================
   AI Tools Pick — picks decision-guide theme (award-tier)
   Single shared stylesheet for /picks/<slug>.html
   ============================================================ */
:root{
  --bg:#0a0b10;
  --bg2:#0c0e15;
  --surface:#11131c;
  --surface2:#171a25;
  --ink:#eef1f8;
  --mut:#9aa3b6;
  --faint:#646b7d;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  --acc:#7c8bff;
  --acc2:#39d0ff;
  --grad:linear-gradient(135deg,#7c5cff 0%,#5b8cff 45%,#39d0ff 100%);
  --ok:#3ddc97;
  --no:#ff6b6b;
  --un:#ffce6b;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 22px 55px -24px rgba(0,0,0,.65);
  --maxw:1040px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --display:"Space Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(1100px 560px at 78% -12%, rgba(124,92,255,.14), transparent 60%),
    radial-gradient(900px 520px at 4% -4%, rgba(57,208,255,.09), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font);
  font-size:16px; line-height:1.72;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:rgba(124,139,255,.32); color:#fff; }
a:focus-visible,.tag:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; border-radius:6px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:clamp(24px,4vw,40px) clamp(16px,4vw,28px) 96px; }

/* ---------- hero ---------- */
header{ position:relative; padding-top:6px; }
header::before{
  content:"AI TOOLS PICK · DECISION GUIDE";
  display:inline-block;
  font:600 12px/1 var(--font);
  letter-spacing:.2em; text-transform:uppercase;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:16px;
}
header h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.1rem,5vw,3.3rem); line-height:1.08; letter-spacing:-.022em;
  margin:0 0 12px; color:var(--ink); text-wrap:balance;
}
header p.sub{
  color:var(--mut); font-size:clamp(1rem,2.2vw,1.16rem);
  margin:0 0 22px; max-width:64ch;
}
header p.sub b{ color:var(--ink); font-weight:600; }
header::after{
  content:""; display:block; width:min(120px,32%); height:3px; border-radius:3px;
  background:var(--grad); margin-top:4px;
}

/* ---------- honesty banner ---------- */
.banner{
  position:relative;
  background:linear-gradient(180deg, rgba(255,206,107,.11), rgba(255,206,107,.05));
  border:1px solid rgba(255,206,107,.30);
  color:#f3dca0; padding:14px 16px 14px 18px; border-radius:var(--radius-sm);
  font-size:14px; margin:30px 0 34px;
}
.banner::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px;
  background:linear-gradient(180deg,#ffce6b,#ff9d5b);
}
.banner b{ color:#ffd866; }

/* ---------- task card ---------- */
.task{
  background:linear-gradient(180deg,var(--surface),var(--bg2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px 24px; box-shadow:var(--shadow);
}
.task .big{
  font-family:var(--display); font-size:clamp(1.05rem,2.4vw,1.32rem);
  font-weight:600; line-height:1.42; color:var(--ink);
}
.tag{
  display:inline-block; background:rgba(124,139,255,.10); color:#aab6ff;
  border:1px solid rgba(124,139,255,.26); border-radius:999px;
  padding:3px 11px; font-size:12px; margin:3px 6px 3px 0; transition:.2s ease;
}
.tag:hover{ background:rgba(124,139,255,.2); color:#cdd4ff; }

.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:14px; margin-top:18px; }
.req{
  background:var(--surface2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 16px 16px 18px; position:relative; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.req::before{
  content:""; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:3px;
  background:var(--grad); opacity:0; transition:opacity .25s ease;
}
.req:hover{ transform:translateY(-3px); border-color:var(--line2); box-shadow:0 16px 32px -20px rgba(0,0,0,.75); }
.req:hover::before{ opacity:1; }
.req b{ display:block; color:#cdd4ff; font-size:13.5px; font-weight:600; margin-bottom:5px; letter-spacing:.01em; }
.req span{ color:var(--mut); font-size:13px; }

/* ---------- section headings ---------- */
h2{
  font-family:var(--display);   font-size:clamp(1.35rem,3vw,1.85rem); font-weight:600;
  letter-spacing:-.012em; margin:clamp(44px,7vw,68px) 0 14px; color:var(--ink); text-wrap:balance;
}
h2::before{
  content:""; display:inline-block; width:10px; height:10px; border-radius:3px;
  background:var(--grad); margin-right:13px; transform:translateY(-2px);
}

/* ---------- decision matrix table ---------- */
.matrix{
  overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow);
}
table{ width:100%; border-collapse:collapse; margin:0; font-size:14px; min-width:680px; }
th,td{ border-bottom:1px solid var(--line); padding:13px 14px; text-align:left; vertical-align:top; }
th{
  background:rgba(255,255,255,.035); color:#c7cde0; font-weight:600;
  font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  position:sticky; top:0; backdrop-filter:blur(6px);
}
tbody tr{ transition:background .15s ease; }
tbody tr:hover{ background:rgba(124,139,255,.07); }
td.yes{ color:var(--ok); font-weight:600; }
td.no{ color:var(--no); }
td.un{ color:var(--un); }

/* ---------- verdict callout ---------- */
.verdict{
  background:linear-gradient(135deg, rgba(124,139,255,.11), rgba(57,208,255,.05));
  border:1px solid rgba(124,139,255,.30);
  border-left:3px solid transparent; border-image:var(--grad) 1;
  border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow);
}
.verdict li{ margin:9px 0; color:var(--ink); }
.verdict code{
  background:rgba(0,0,0,.35); padding:2px 7px; border-radius:6px; color:#9ad7ff;
  font-size:.9em; border:1px solid var(--line);
}

/* ---------- evidence / notes ---------- */
.ev{ color:var(--mut); font-size:14px; }
.ev li, .note li{ margin:7px 0; }
.note{
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 18px; color:var(--mut); font-size:13.5px;
}
.note b, .ev b{ color:var(--ink); }

/* ---------- machine-readable links ---------- */
.links a{
  color:var(--acc2); text-decoration:none; margin-right:18px; font-size:14px; font-weight:500;
  position:relative; transition:color .2s ease;
}
.links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.links a:hover{ color:#fff; }
.links a:hover::after{ transform:scaleX(1); }

/* ---------- footer ---------- */
footer{ margin-top:56px; color:var(--faint); font-size:13px; border-top:1px solid var(--line); padding-top:22px; }
footer b{ color:var(--mut); }

/* ---------- scroll progress (injected by picks.js) ---------- */
.scrollbar{
  position:fixed; top:0; left:0; right:0; height:3px; background:var(--grad);
  transform:scaleX(0); transform-origin:left; z-index:60; pointer-events:none;
}

/* ---------- entrance motion (progressive enhancement) ---------- */
html.js .reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
html.js .reveal.in{ opacity:1; transform:none; }

@media (max-width:640px){
  .wrap{ padding:22px 16px 76px; }
  .grid{ grid-template-columns:1fr; }
  .task{ padding:18px; }
  .matrix{ margin-left:-4px; margin-right:-4px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.js .reveal{ opacity:1!important; transform:none!important; transition:none!important; }
  *{ scroll-behavior:auto!important; }
}