/* ============================================================
   Verityline — shared polish layer  ·  Direction A "Vast Quiet"
   Editorial minimalism on Brand Sheet v1 (ink + amber).
   Prefix: .vl-*  ·  safe to load alongside a tool's own styles.
   Online surfaces link the web fonts; offline PWAs fall back to
   the system/serif stack automatically (no web-font dependency).
   ============================================================ */

:root{
  /* light-mode brand tokens — Brand Sheet v1 */
  --vl-ink:#10222f; --vl-amber:#b45309; --vl-amber-bright:#d97706;
  --vl-amber-soft:#fdf3e3; --vl-paper:#faf8f4; --vl-paper-deep:#f1ede5;
  --vl-line:#e3ddd1; --vl-line-strong:#c9c1b0; --vl-mut:#6b7981;
  --vl-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --vl-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --vl-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

.vl *,.vl *::before,.vl *::after{box-sizing:border-box}
.vl{background:var(--vl-paper);color:var(--vl-ink);
  font-family:var(--vl-sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
.vl-wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.vl a{color:inherit}

/* editorial micro-label */
.vl-meta{font-family:var(--vl-mono);font-size:.7rem;letter-spacing:.04em;
  color:var(--vl-mut);text-transform:uppercase}
.vl-amber{color:var(--vl-amber)}

/* ---------- masthead ---------- */
.vl-mast{border-bottom:2px solid var(--vl-ink)}
.vl-mast .vl-wrap{display:flex;align-items:flex-end;justify-content:space-between;
  padding:18px 40px 12px;gap:20px;flex-wrap:wrap}
.vl-wm{font-family:var(--vl-serif);font-weight:700;font-size:1.5rem;
  letter-spacing:-.01em;text-decoration:none;color:var(--vl-ink)}
.vl-wm .line{color:var(--vl-amber)}
.vl-mast .rt{text-align:right;line-height:1.7}
.vl-rulerow{border-bottom:1px solid var(--vl-line);background:var(--vl-paper)}
.vl-rulerow .vl-wrap{display:flex;justify-content:space-between;padding:7px 40px;gap:16px}

/* ---------- hero (Direction A) ---------- */
.vl-hero{padding:76px 0 64px;border-bottom:1px solid var(--vl-line)}
.vl-kick{font-family:var(--vl-mono);font-size:.74rem;letter-spacing:.14em;
  color:var(--vl-amber);text-transform:uppercase;margin:0 0 30px;
  padding-bottom:14px;border-bottom:1px solid var(--vl-line);display:inline-block}
.vl-h1{font-family:var(--vl-serif);font-weight:700;
  font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.03;letter-spacing:-.02em;
  margin:0 0 24px;max-width:17ch}
.vl-h1 em{font-style:italic;font-weight:400;color:var(--vl-amber)}
.vl-dek{font-size:1.12rem;color:#3b4d57;max-width:54ch;margin:0 0 34px;line-height:1.5}
.vl-act{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.vl .vl-btn{background:var(--vl-ink);color:#fff;font-weight:500;font-size:.95rem;
  padding:14px 30px;text-decoration:none;border-radius:2px;border:1px solid var(--vl-ink);
  display:inline-block;cursor:pointer;font-family:inherit}
.vl .vl-btn.ghost{background:transparent;color:var(--vl-ink);border-color:var(--vl-line-strong)}
.vl .vl-btn:hover{background:#0a1720;color:#fff}
.vl-lnk{font-weight:500;text-decoration:none;border-bottom:1px solid var(--vl-amber);
  padding-bottom:2px;color:var(--vl-ink)}
.vl-stats{display:flex;flex-wrap:wrap;gap:0;margin-top:52px;
  border-top:1px solid var(--vl-line);max-width:680px}
.vl-stats div{padding:20px 34px 0 0;border-right:1px solid var(--vl-line)}
.vl-stats div:last-child{border-right:0}
.vl-stats b{font-family:var(--vl-serif);font-size:1.7rem;font-weight:700;
  display:block;line-height:1}
.vl-stats span{font-size:.82rem;color:var(--vl-mut);display:block;margin-top:6px}

/* ---------- section rule head ---------- */
.vl-srhead{display:flex;align-items:baseline;gap:16px;
  border-bottom:1px solid var(--vl-ink);padding-bottom:8px;margin:60px 0 26px}
.vl-srhead .no{font-family:var(--vl-mono);font-size:.78rem;color:var(--vl-amber);
  letter-spacing:.05em}
.vl-srhead h2{font-family:var(--vl-serif);font-size:1.35rem;font-weight:700;margin:0}
.vl-srhead .tail{margin-left:auto}

/* ---------- tool register (editorial cards) ---------- */
.vl-register{border:1px solid var(--vl-line);border-bottom:0}
.vl-item{display:grid;grid-template-columns:1.6fr 2.4fr auto;gap:24px;
  align-items:baseline;padding:18px 22px;border-bottom:1px solid var(--vl-line);
  text-decoration:none;color:inherit;transition:background .12s}
.vl-item:hover{background:#fff}
.vl-item .nm{font-family:var(--vl-serif);font-weight:700;font-size:1.14rem;
  line-height:1.2}
.vl-item .nm .line{color:var(--vl-amber)}
.vl-item .d{color:#4a5a60;font-size:.92rem;line-height:1.45}
.vl-item .st{justify-self:end;white-space:nowrap}
.vl-stat{font-family:var(--vl-mono);font-size:.66rem;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border:1px solid var(--vl-line);
  border-radius:2px;color:var(--vl-mut);white-space:nowrap}
.vl-stat.live{border-color:#1f7a37;color:#1f7a37}
.vl-stat.draft{border-color:var(--vl-amber);color:var(--vl-amber)}

/* ---------- footer ---------- */
.vl-foot{border-top:1px solid var(--vl-line);margin-top:24px;padding:24px 0 64px}
.vl-foot .vl-wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.vl-foot span{font-family:var(--vl-mono);font-size:.68rem;color:var(--vl-mut);
  letter-spacing:.05em;text-transform:uppercase}

@media(max-width:820px){
  .vl-wrap,.vl-mast .vl-wrap,.vl-rulerow .vl-wrap{padding-left:22px;padding-right:22px}
  .vl-item{grid-template-columns:1fr;gap:8px}
  .vl-item .st{justify-self:start}
  .vl-stats div{padding:16px 22px 0 0}
}

/* ============================================================
   Access grammar
   (1) Status key — whole-tool access tier: Free / Paywall / Offline-mirror
   (2) Spend button — per-action: ink .vl-btn = free; amber .vl-btn.spend = costs money per click
   ============================================================ */
.vl-key{display:inline-flex;align-items:center;gap:6px;font-family:var(--vl-mono);
  font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;
  border:1px solid var(--vl-line);border-radius:2px;color:var(--vl-mut);white-space:nowrap;line-height:1}
.vl-key::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.vl-key.free{color:#1f7a37;border-color:#bfe0c8}
.vl-key.paywall{color:var(--vl-amber);border-color:#e8cfa3}
.vl-key.paywall::before{content:"\1F512";width:auto;height:auto;border-radius:0;background:none;font-size:.95em}
.vl-key.offline{color:#5a7688;border-color:#cdd8de}
.vl-key.offline::before{border-radius:1px}
.vl-legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:14px 0 0}

/* spend button — amber signals "this click spends money" (paid AI call) */
.vl .vl-btn.spend{background:var(--vl-amber);border-color:var(--vl-amber);color:#fff}
.vl .vl-btn.spend:hover{background:var(--vl-amber-bright)}
.vl .vl-btn.spend::before{content:"$";display:inline-flex;align-items:center;justify-content:center;
  width:1.15em;height:1.15em;margin-right:9px;border:1px solid rgba(255,255,255,.65);border-radius:50%;
  font-size:.8em;font-weight:700;vertical-align:-.16em}
.vl .vl-btn.spend .cost{opacity:.85;font-weight:400;margin-left:7px;font-size:.85em}