/* VRAMwise — bright lab look. Single light theme.
   BEM blocks: topdeck / brandmark / stage / hero / toolgrid / speclist /
   faqfold / wisebar / basefoot / liftbox / verdict. Prefix: --vw-  */

:root {
  --vw-ink: #17182b;
  --vw-ink-soft: #4d5170;
  --vw-paper: #ffffff;
  --vw-mist: #f5f6fd;
  --vw-line: #e3e5f4;
  --vw-violet: #7c3aed;
  --vw-blue: #2563eb;
  --vw-grad: linear-gradient(120deg, #7c3aed, #2563eb);
  --vw-pass: #0e9f6e;
  --vw-fail: #e02424;
  --vw-radius: 16px;
  --vw-font: "Avenir Next", "Segoe UI", "Trebuchet MS", system-ui, -apple-system, sans-serif;
  --vw-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--vw-font);
  color: var(--vw-ink);
  background: var(--vw-paper);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
img, svg { max-width: 100%; }
a { color: var(--vw-blue); }
a:hover { color: var(--vw-violet); }
code { font-family: var(--vw-mono); background: var(--vw-mist); padding: .1em .35em; border-radius: 6px; font-size: .92em; }
pre { background: var(--vw-mist); border: 1px solid var(--vw-line); border-radius: var(--vw-radius); padding: 1rem; overflow-x: auto; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -0.015em; }
h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 3.5vw, 1.6rem); margin-top: 2.2rem; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--vw-line); padding: .5rem .7rem; text-align: left; }
th { background: var(--vw-mist); }
.tablewrap { overflow-x: auto; }

.wrapline { max-width: 62rem; margin: 0 auto; padding: 0 1.1rem; }

.hopmain {
  position: absolute; left: -999px; top: 0;
  background: var(--vw-ink); color: #fff; padding: .5rem 1rem; border-radius: 0 0 8px 0;
}
.hopmain:focus { left: 0; z-index: 50; }

/* header */
.topdeck { border-bottom: 1px solid var(--vw-line); background: rgba(255,255,255,.92); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); }
.topdeck__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.6rem; }
.brandmark { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.15rem; color: var(--vw-ink); text-decoration: none; }
.brandmark span { background: var(--vw-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topdeck__nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.topdeck__nav a { color: var(--vw-ink-soft); text-decoration: none; font-weight: 500; font-size: .95rem; }
.topdeck__nav a:hover { color: var(--vw-violet); }

/* main */
.stage { padding: 2rem 1.1rem 3.5rem; }

/* hero */
.hero { padding: 2.2rem 0 1rem; }
.hero--thin { padding: 3rem 0; text-align: center; }
.hero__kicker {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vw-violet);
  background: var(--vw-mist); border: 1px solid var(--vw-line);
  padding: .25rem .7rem; border-radius: 999px; margin: 0 0 .8rem;
}
.hero h1 { margin: 0 0 .6rem; }
.hero__lede { font-size: 1.1rem; color: var(--vw-ink-soft); max-width: 44rem; }

/* verdict badges (PASS/FAIL core UI) */
.verdict { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .06em; border-radius: 12px; padding: .35rem .9rem; font-size: .95rem; }
.verdict--pass { color: #fff; background: var(--vw-pass); }
.verdict--fail { color: #fff; background: var(--vw-fail); }
.verdict--tight { color: var(--vw-ink); background: #fbd38d; }

/* card grid */
.toolgrid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.4rem 0; padding: 0; list-style: none; }
.toolgrid__card {
  border: 1px solid var(--vw-line); border-radius: var(--vw-radius);
  padding: 1.2rem 1.3rem; background: var(--vw-paper);
  position: relative; overflow: hidden;
}
.toolgrid__card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--vw-grad);
}
.toolgrid__card h3 { margin: .2rem 0 .4rem; font-size: 1.05rem; }
.toolgrid__card p { margin: 0; color: var(--vw-ink-soft); font-size: .95rem; }
.toolgrid__soon { display: inline-block; margin-top: .7rem; font-size: .78rem; font-weight: 700; color: var(--vw-violet); text-transform: uppercase; letter-spacing: .1em; }

/* definition-style lists */
.speclist { border: 1px solid var(--vw-line); border-radius: var(--vw-radius); padding: 1.1rem 1.3rem; background: var(--vw-mist); }
.speclist dt { font-weight: 700; margin-top: .7rem; }
.speclist dd { margin: .15rem 0 0; color: var(--vw-ink-soft); }

/* FAQ accordion */
.faqfold { margin-top: 2.5rem; }
.faqfold__item { border: 1px solid var(--vw-line); border-radius: 12px; margin: .55rem 0; background: var(--vw-paper); }
.faqfold__item summary { cursor: pointer; font-weight: 600; padding: .8rem 1rem; list-style: none; position: relative; }
.faqfold__item summary::after { content: "+"; position: absolute; right: 1rem; color: var(--vw-violet); font-weight: 800; }
.faqfold__item[open] summary::after { content: "–"; }
.faqfold__item summary::-webkit-details-marker { display: none; }
.faqfold__ans { padding: 0 1rem .9rem; color: var(--vw-ink-soft); }

/* embed snippet box (copy button uses [data-lift]) */
.liftbox { border: 1px dashed var(--vw-violet); border-radius: var(--vw-radius); padding: 1rem 1.1rem; margin: 1.5rem 0; background: var(--vw-mist); }
.liftbox pre { margin: .6rem 0; }
.liftbox__go {
  font: inherit; font-weight: 700; color: #fff; background: var(--vw-grad);
  border: 0; border-radius: 10px; padding: .5rem 1.1rem; cursor: pointer;
}
.liftbox__go:active { transform: translateY(1px); }

/* embed attribution bar — visible only in ?slim=1 view */
.wisebar { display: none; }
html.slim-view .wisebar {
  display: flex; justify-content: center; align-items: center;
  padding: .55rem .9rem; border-top: 1px solid var(--vw-line); background: var(--vw-mist);
  font-size: .85rem;
}
html.slim-view .wisebar a { color: var(--vw-ink); text-decoration: none; font-weight: 600; }
html.slim-view .wisebar a:hover { color: var(--vw-violet); }
html.slim-view .topdeck,
html.slim-view .basefoot,
html.slim-view .hero__kicker,
html.slim-view .liftbox { display: none; }
html.slim-view .stage { padding: 1rem .9rem 1.2rem; }

/* footer */
.basefoot { border-top: 1px solid var(--vw-line); background: var(--vw-mist); }
.basefoot__row { padding: 1.8rem 1.1rem 2.2rem; }
.basefoot__pitch { font-weight: 600; margin: 0 0 .6rem; }
.basefoot__links { display: flex; flex-wrap: wrap; gap: .9rem 1.3rem; margin-bottom: .8rem; }
.basefoot__links a { color: var(--vw-ink-soft); text-decoration: none; font-size: .92rem; }
.basefoot__links a:hover { color: var(--vw-violet); }
.basefoot__fine { color: var(--vw-ink-soft); font-size: .82rem; margin: 0; max-width: 46rem; }

@media (min-width: 640px) {
  .toolgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .toolgrid { grid-template-columns: repeat(3, 1fr); }
}


/* ---- calc form ---- */
.calcbox { border: 1px solid var(--vw-line, #ddd5f0); border-radius: 12px; padding: 1.1rem; margin: 1.2rem 0; background: #faf8ff; }
.calcbox__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .85rem 1rem; }
.calcbox label { display:block; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--vw-violet, #5b3cc4); margin-bottom:.3rem; }
.calcbox input, .calcbox select { width:100%; font:inherit; padding:.5rem .6rem; border:1px solid #d5ccec; border-radius:8px; }
.calcbox__out { margin-top:1rem; padding:.9rem 1rem; border-radius:10px; background:#fff; border:1px solid #ddd5f0; }
.calcbox__out table { width:100%; border-collapse:collapse; }
.calcbox__out th, .calcbox__out td { text-align:left; padding:.35rem .4rem; border-bottom:1px solid #eee; }


/* ---- farm calc/guide helpers ---- */
.farm-calc{border:1px solid #ccc;border-radius:10px;padding:1rem 1.1rem;margin:1.2rem 0;background:#fafafa}
.farm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.85rem 1rem}
.farm-calc label{display:block;font-size:.78rem;font-weight:700;margin-bottom:.3rem}
.farm-calc input,.farm-calc select{width:100%;font:inherit;padding:.45rem .55rem;border:1px solid #bbb;border-radius:6px}
.farm-out{margin-top:.9rem;padding:.85rem 1rem;background:#fff;border:1px solid #ddd;border-radius:8px}
.farm-out table{width:100%;border-collapse:collapse}
.farm-out th,.farm-out td{text-align:left;padding:.3rem .35rem;border-bottom:1px solid #eee}
.farm-note{font-size:.9rem;color:#555;margin-top:.5rem}
.farm-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin:1.2rem 0}
.farm-card{border:1px solid #ddd;border-radius:10px;padding:1rem;background:#fff}
.farm-card h3{margin:.2rem 0 .4rem;font-size:1.05rem}
.farm-card p{margin:0;font-size:.92rem;color:#444}
.guide-body p{margin:0 0 .85rem;line-height:1.65}
.guide-body h2{margin:1.6rem 0 .7rem}
.guide-body ul{margin:0 0 1rem;padding-left:1.2rem;line-height:1.55}

/* ---- VRAMwise matrix exits (site-unique related graph) ---- */
.vw-matrix {
  margin: 2.4rem 0 1.2rem;
  padding: 1.25rem 1.2rem 1.35rem;
  border: 1px solid var(--vw-line);
  border-radius: var(--vw-radius);
  background:
    linear-gradient(180deg, rgba(124, 58, 237, 0.05), transparent 42%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 11px,
      rgba(37, 99, 235, 0.04) 11px,
      rgba(37, 99, 235, 0.04) 12px
    ),
    var(--vw-mist);
}
.vw-matrix__title {
  margin: 0 0 1rem;
  font-family: var(--vw-mono);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vw-violet);
}
.vw-matrix__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .vw-matrix__grid { grid-template-columns: 1fr 1fr; }
}
.vw-cell {
  border: 1px solid var(--vw-line);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  background: var(--vw-paper);
  min-height: 4.2rem;
}
.vw-cell__label {
  display: block;
  font-family: var(--vw-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vw-ink-soft);
  margin-bottom: 0.35rem;
}
.vw-cell__links {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--vw-ink);
}
.vw-cell__links a { text-decoration: none; font-weight: 600; }
.vw-cell__links a:hover { text-decoration: underline; }

/* Home boot path + catalog strip */
.vw-boot {
  margin: 1.6rem 0 1rem;
  padding: 1.1rem 1.2rem;
  border-left: 4px solid var(--vw-violet);
  background: var(--vw-mist);
  border-radius: 0 var(--vw-radius) var(--vw-radius) 0;
}
.vw-boot h2 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
}
.vw-boot ol {
  margin: 0;
  padding-left: 1.2rem;
}
.vw-catalog {
  font-size: 0.95rem;
  color: var(--vw-ink-soft);
  margin: 0.8rem 0 1.2rem;
}
.vw-catalog a { font-weight: 600; text-decoration: none; }
.vw-catalog a:hover { text-decoration: underline; }

/* entity see-also — plain, matches guide-body */
.see-also{margin:2rem 0 1rem;padding:1rem 0 0;border-top:1px solid rgba(127,127,127,.25)}
.see-also h2{font-size:1.15rem;margin:0 0 .75rem}
.see-also p{margin:0 0 .55rem;line-height:1.55}