/* Lab updates pages (/lab, /lab/{slug}): the landing page's own look (tokens and components
   mirrored from landing_easy.html). Page chrome is scoped to body.lab-page. */
:root{
  --bg:#ffffff; --ink:#0f172a; --ink-soft:#475569; --ink-dim:#94a3b8;
  --line:#e6e8ee; --line-2:#eef1f5;
  --brand:#4338ca; --brand-2:#4f46e5; --brand-soft:#eef2ff; --brand-bd:#dbe1fb;
  --ink-btn:#0f172a; --ok:#16a34a;
  --card:#ffffff; --shadow:0 1px 2px rgba(15,23,42,.04), 0 14px 40px rgba(15,23,42,.07);
  --radius:16px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tint-a:#fdf6ef; --tint-b:#fbf1ea; --tint-bd:#f2e9e0; --quote-bd:#ddd6cc; --quote-bg:#f7f5f1;
}

/* ── News list (/lab) ─────────────────────────────────────────────────── */
.lab-list{ max-width:820px; border-top:1px solid var(--line); }
.lab-item{ display:block; padding:26px 0 24px; border-bottom:1px solid var(--line); color:var(--ink); }
.lab-item h3{ font-size:clamp(20px,2.3vw,25px); line-height:1.25; margin:8px 0 8px; transition:color .15s; }
.lab-item p{ font-size:16px; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lab-item:hover h3{ color:var(--brand); }
.lab-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--ink-dim); }
.lab-kind{ font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--brand); }
.lab-tag{ font-size:12.5px; color:var(--ink-soft); background:#f8fafc; border:1px solid var(--line); padding:2px 10px; border-radius:999px; }

/* ── Before/after chart inside a post (series colours validated for CVD on white) ── */
.lab-chart{ margin:26px 0 30px; padding:24px 26px 20px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.lab-chart figcaption{ font-size:17px; font-weight:600; color:var(--ink); margin-bottom:12px; }
.lab-chart-legend{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:16px; font-size:13.5px; color:var(--ink-soft); }
.lab-chart-legend .k{ display:inline-flex; align-items:center; gap:7px; }
.lab-chart-legend i{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.lab-chart .s0{ --c:#818cf8; } .lab-chart .s1{ --c:#4338ca; }
.lab-chart-legend .k i{ background:var(--c); }
.lab-chart-row{ display:grid; grid-template-columns:minmax(120px,34%) 1fr; column-gap:16px; row-gap:3px; align-items:center; padding:7px 0; }
.lab-chart-label{ grid-row:span 2; font-size:14.5px; color:var(--ink); line-height:1.3; }
.lab-chart-line{ display:flex; align-items:center; gap:8px; min-height:14px; }
.lab-chart-bar{ display:block; height:12px; border-radius:0 4px 4px 0; background:var(--c); }
.lab-chart-val{ font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lab-chart-note{ margin-top:12px; font-size:13px; color:var(--ink-dim); }

/* ── Standalone pages (same chrome as the landing) ───────────────────── */
body.lab-page{ margin:0; color:var(--ink); background:var(--bg); font-family:var(--font); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body.lab-page *{ box-sizing:border-box; }
.lab-page a{ color:inherit; text-decoration:none; }
.lab-page .wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
.lab-page h1, .lab-page h2, .lab-page h3{ margin:0; letter-spacing:-.025em; line-height:1.08; font-weight:600; }
.lab-page p{ margin:0; }
.lab-page .eyebrow{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); margin:0 0 18px; }
.lab-page header.nav{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-2); }
.lab-page .nav-inner{ display:flex; align-items:center; gap:16px; height:68px; }
.lab-page .brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em; flex-shrink:0; }
.lab-page .brand .mark{ width:30px; height:30px; border-radius:8px; background:var(--brand-2); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:11px; }
.lab-page .brand small{ display:block; font-size:11px; font-weight:500; color:var(--ink-dim); }
.lab-page .nav-links{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.lab-page .nav-links a{ color:var(--ink-soft); font-size:14.5px; padding:8px 12px; border-radius:9px; white-space:nowrap; transition:color .15s, background .15s; }
.lab-page .nav-links a:hover{ color:var(--ink); background:#f4f6fa; }
.lab-page .nav-links a.switch{ color:var(--brand); font-weight:600; }
.lab-page .psa-select{ appearance:none; height:38px; padding:0 28px 0 11px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2394a3b8' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center; }
.lab-page .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 22px; border-radius:999px; font-size:15px; font-weight:600; white-space:nowrap; cursor:pointer; border:1px solid transparent; }
.lab-page .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.lab-page .btn-ghost:hover{ border-color:#cbd3e1; background:#f8fafc; }
.lab-page .btn .arw{ width:22px; height:22px; border-radius:50%; background:#eef1f5; display:inline-flex; align-items:center; justify-content:center; }
.lab-page .hero{ position:relative; padding:96px 0 72px; overflow:hidden;
  background:radial-gradient(1100px 520px at 50% -8%, #fff1e2 0%, rgba(255,244,234,0) 62%), linear-gradient(180deg,#fffaf4 0%, #ffffff 74%); }
.lab-page .hero h1{ font-size:clamp(36px,5.2vw,64px); letter-spacing:-.03em; max-width:18ch; }
.lab-page .hero .lead{ font-size:clamp(18px,2.1vw,21px); color:var(--ink-soft); max-width:680px; margin-top:22px; }
.lab-page .sec{ padding:72px 0 96px; }
.lab-page .sec.tint{ background:linear-gradient(180deg,var(--tint-a) 0%, var(--tint-b) 100%); border-top:1px solid var(--tint-bd); border-bottom:1px solid var(--tint-bd); }
.lab-page .ft{ border-top:1px solid var(--line-2); padding:44px 0 36px; }
.lab-page .ft-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.lab-page .ft-links{ display:flex; gap:20px; flex-wrap:wrap; font-size:14.5px; color:var(--ink-soft); }
.lab-page .ft-links a:hover{ color:var(--ink); }
.lab-page .ft-note{ margin-top:22px; font-size:13.5px; color:var(--ink-dim); }

.lab-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-top:34px; }
.lab-chip{ font:inherit; font-size:14.5px; height:40px; padding:0 18px; border-radius:999px; cursor:pointer; color:var(--ink-soft); background:var(--card); border:1px solid var(--line); transition:border-color .15s, color .15s; }
.lab-chip:hover{ color:var(--ink); border-color:#cbd3e1; }
.lab-chip.on{ color:#fff; background:var(--ink-btn); border-color:var(--ink-btn); }
.lab-empty{ color:var(--ink-soft); padding:24px 0; }
.lab-pager{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding-top:40px; max-width:820px; font-size:14px; color:var(--ink-soft); }
.lab-pager .row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.lab-pager button{ font:inherit; font-size:14px; min-width:38px; height:38px; padding:0 12px; border-radius:10px; cursor:pointer; color:var(--ink); background:var(--card); border:1px solid var(--line); }
.lab-pager button.on{ background:var(--ink-btn); color:#fff; border-color:var(--ink-btn); }
.lab-pager button:disabled{ opacity:.4; cursor:default; }
.lab-pager input{ width:58px; height:38px; font:inherit; font-size:14px; text-align:center; border:1px solid var(--line); border-radius:10px; }

/* Detail */
.lab-back{ display:inline-flex; align-items:center; gap:8px; color:var(--brand); font-weight:600; font-size:15px; margin-bottom:30px; }
.lab-page .hero .lab-meta{ margin-bottom:18px; }
.lab-page .hero #lu-title{ font-size:clamp(30px,3.8vw,48px); line-height:1.12; max-width:26ch; }
.lab-article-in{ display:grid; grid-template-columns:210px minmax(0,1fr); gap:56px; }
.lab-article-in.no-toc{ grid-template-columns:minmax(0,760px); justify-content:center; }
.lab-toc{ position:sticky; top:100px; align-self:start; font-size:14px; }
.lab-toc b{ display:block; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); margin-bottom:12px; }
.lab-toc a{ display:block; padding:6px 0 6px 14px; border-left:2px solid var(--line); color:var(--ink-soft); line-height:1.4; }
.lab-toc a:hover{ color:var(--ink); }
.lab-toc a.on{ color:var(--brand); border-left-color:var(--brand); font-weight:600; }
.lab-body{ max-width:760px; font-size:17.5px; }
.lab-body h2{ font-size:clamp(24px,2.6vw,30px); margin:46px 0 14px; scroll-margin-top:90px; }
.lab-body > h2:first-child{ margin-top:0; }
.lab-body h3{ font-size:21px; margin:30px 0 10px; scroll-margin-top:90px; }
.lab-body p{ margin:0 0 16px; }
.lab-body p, .lab-body li{ color:#1e293b; }
.lab-body ul, .lab-body ol{ padding-left:22px; margin:0 0 16px; }
.lab-body li{ margin-bottom:6px; }
.lab-body a{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.lab-body code{ font-family:var(--mono); font-size:.86em; background:#f8fafc; border:1px solid var(--line); padding:1px 6px; border-radius:6px; }
.lab-body pre{ background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:16px 18px; overflow-x:auto; font-size:14px; }
.lab-body pre code{ background:none; border:0; padding:0; }
.lab-body table{ border-collapse:collapse; width:100%; margin:22px 0 26px; font-size:15.5px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.lab-body th, .lab-body td{ padding:11px 16px; text-align:left; border-bottom:1px solid var(--line-2); }
.lab-body th{ font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--brand); background:#fafbff; }
.lab-body tr:last-child td{ border-bottom:0; }
.lab-body blockquote{ margin:20px 0; padding:11px 16px; border-left:3px solid var(--quote-bd); border-radius:0 8px 8px 0; background:var(--quote-bg); color:var(--ink-soft); font-style:italic; }
.lab-body blockquote p{ margin:0; }
.lab-body img{ max-width:100%; border-radius:12px; }
.lab-more-sec h2{ font-size:clamp(26px,3vw,36px); margin-bottom:30px; }
.lab-notfound{ padding:40px 0; color:var(--ink-soft); font-size:19px; }
.lab-readbar{ position:fixed; top:0; left:0; height:3px; width:0; z-index:70; background:var(--brand-2); }

@media (max-width:900px){
  .lab-page .nav-links .hide-md{ display:none; }
  .lab-article-in{ grid-template-columns:minmax(0,1fr); gap:0; }
  .lab-toc{ display:none; }
}
@media (max-width:560px){
  .lab-page .brand small{ display:none; }
  .lab-chart{ padding:18px 16px 16px; }
  .lab-chart-row{ grid-template-columns:1fr; }
  .lab-chart-label{ grid-row:auto; }
  .lab-body table{ display:block; overflow-x:auto; }
}