/* WattFit — dark technical spec-sheet theme. Single dark theme by design. */
:root {
  --wf-bg: #0a0b09;
  --wf-panel: #10120e;
  --wf-panel-2: #14170f;
  --wf-line: #242821;
  --wf-line-hot: #3a4030;
  --wf-ink: #e8ece1;
  --wf-dim: #9aa392;
  --wf-volt: #c6f231;
  --wf-volt-dim: #8fb51e;
  --wf-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --wf-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wf-gap: 1rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wf-bg);
  color: var(--wf-ink);
  font-family: var(--wf-sans);
  font-size: 1rem;
  line-height: 1.65;
}

.chassis { max-width: 62rem; margin: 0 auto; padding: 0 var(--wf-gap); }

a { color: var(--wf-volt); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); margin: 0 0 0.6rem; }
h2 { font-size: 1.3rem; margin: 2.2rem 0 0.7rem; }
h3 { font-size: 1.05rem; margin: 1.6rem 0 0.5rem; }
p { margin: 0.6rem 0; }
code, .readout { font-family: var(--wf-mono); }
code {
  background: var(--wf-panel-2);
  border: 1px solid var(--wf-line);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  font-size: 0.92em;
}

.skipline {
  position: absolute; left: -999px; top: 0;
  background: var(--wf-volt); color: #0a0b09; padding: 0.4rem 0.8rem; z-index: 20;
}
.skipline:focus { left: 0.5rem; top: 0.5rem; }

/* ── header ─────────────────────────────────────────────── */
.rack-top {
  border-bottom: 1px solid var(--wf-line);
  background: linear-gradient(180deg, #0e100c, var(--wf-bg));
  position: sticky; top: 0; z-index: 10;
}
.rack-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wf-gap); min-height: 3.25rem; flex-wrap: wrap; padding-top: 0.4rem; padding-bottom: 0.4rem;
}
.ident {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--wf-ink); font-weight: 700; font-family: var(--wf-mono);
  font-size: 1.05rem; letter-spacing: 0.02em;
}
.ident:hover { text-decoration: none; color: var(--wf-volt); }
.busline { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.busline a {
  color: var(--wf-dim); font-size: 0.9rem; text-transform: uppercase;
  letter-spacing: 0.08em; font-family: var(--wf-mono);
}
.busline a:hover { color: var(--wf-volt); text-decoration: none; }

/* ── main ───────────────────────────────────────────────── */
main.chassis { padding-top: 2rem; padding-bottom: 3.5rem; }

.specline {
  font-family: var(--wf-mono); font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--wf-volt-dim);
  margin: 2.4rem 0 0.8rem;
}
.specline::before { content: "// "; color: var(--wf-line-hot); }

.faceplate { padding: 1.5rem 0 0.5rem; border-bottom: 1px solid var(--wf-line); margin-bottom: 1.5rem; }
.faceplate .lede { color: var(--wf-dim); font-size: 1.08rem; max-width: 44rem; }

.answerline {
  border-left: 3px solid var(--wf-volt);
  background: var(--wf-panel);
  padding: 0.8rem 1rem;
  margin: 1.2rem 0;
}

.bay-grid {
  display: grid; gap: var(--wf-gap);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin: 1rem 0;
}
.bay {
  background: var(--wf-panel);
  border: 1px solid var(--wf-line);
  border-radius: 4px;
  padding: 1rem 1.1rem;
}
.bay h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.bay p { margin: 0; color: var(--wf-dim); font-size: 0.92rem; }
.bay .tagchip {
  display: inline-block; margin-bottom: 0.55rem;
  font-family: var(--wf-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--wf-volt-dim);
  border: 1px solid var(--wf-line-hot); border-radius: 2px; padding: 0.1rem 0.4rem;
}

.jack {
  display: inline-block; font-family: var(--wf-mono); font-size: 0.92rem;
  color: #0a0b09; background: var(--wf-volt); border: 1px solid var(--wf-volt);
  border-radius: 3px; padding: 0.5rem 1rem; font-weight: 700; cursor: pointer;
}
.jack:hover { background: var(--wf-volt-dim); border-color: var(--wf-volt-dim); text-decoration: none; }

/* ── tables (spec-sheet density) ────────────────────────── */
.sheet-scroll { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--wf-line); border-radius: 4px; }
table.sheet { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
table.sheet th, table.sheet td { padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--wf-line); text-align: left; white-space: nowrap; }
table.sheet th {
  font-family: var(--wf-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--wf-volt-dim); background: var(--wf-panel-2);
}
table.sheet td.readout { text-align: right; }
table.sheet tr:last-child td { border-bottom: none; }

/* ── FAQ ────────────────────────────────────────────────── */
.qa-block { margin-top: 2.5rem; }
.qa-cell { border: 1px solid var(--wf-line); border-radius: 4px; background: var(--wf-panel); margin: 0.5rem 0; }
.qa-cell summary {
  cursor: pointer; padding: 0.7rem 1rem; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
}
.qa-cell summary::-webkit-details-marker { display: none; }
.qa-cell summary::after { content: "+"; font-family: var(--wf-mono); color: var(--wf-volt); flex: none; }
.qa-cell[open] summary::after { content: "\2212"; }
.qa-cell .qa-body { padding: 0 1rem 0.8rem; color: var(--wf-dim); }

/* ── embed snippet box ──────────────────────────────────── */
.takebox {
  background: var(--wf-panel-2); border: 1px dashed var(--wf-line-hot);
  border-radius: 4px; padding: 0.9rem 1rem; margin: 1.2rem 0;
}
.takebox pre {
  margin: 0 0 0.7rem; overflow-x: auto; font-family: var(--wf-mono);
  font-size: 0.82rem; line-height: 1.5; color: var(--wf-ink); white-space: pre-wrap; word-break: break-all;
}
[data-take] { font-size: 0.82rem; padding: 0.35rem 0.8rem; }

/* ── footer ─────────────────────────────────────────────── */
.rack-base { border-top: 1px solid var(--wf-line); background: #0c0e0a; margin-top: 2rem; }
.base-grid {
  display: grid; gap: 1.5rem; grid-template-columns: 2fr 1fr 1fr;
  padding-top: 2rem; padding-bottom: 1.2rem;
}
.base-cell p { color: var(--wf-dim); font-size: 0.88rem; margin: 0.3rem 0; }
.base-cell a { display: block; color: var(--wf-dim); font-size: 0.88rem; margin: 0.3rem 0; }
.base-cell a:hover { color: var(--wf-volt); }
.base-cell .specline { margin: 0 0 0.5rem; }
.ident-small { font-family: var(--wf-mono); font-weight: 700; color: var(--wf-ink) !important; }
.base-line { border-top: 1px solid var(--wf-line); padding-top: 0.8rem; padding-bottom: 1.4rem; }
.base-line p { color: var(--wf-dim); font-size: 0.78rem; font-family: var(--wf-mono); margin: 0; }

@media (max-width: 40rem) {
  .base-grid { grid-template-columns: 1fr; gap: 1rem; }
  .rack-row { justify-content: center; }
}

/* ── embed (inset) view: ?inset=1 ───────────────────────── */
html.inset-view .rack-top,
html.inset-view .rack-base,
html.inset-view .qa-block,
html.inset-view .takebox,
html.inset-view .skipline { display: none; }
html.inset-view main.chassis { padding-top: 0.75rem; padding-bottom: 3rem; }
.wattbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: #0c0e0a; border-top: 1px solid var(--wf-line-hot);
  padding: 0.45rem 0.9rem; text-align: right;
}
.wattbar a { font-family: var(--wf-mono); font-size: 0.8rem; color: var(--wf-volt); }


/* ---- 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}


/* ---- WattFit unique lab-notes nav (hardware chips) ---- */
.wf-labnotes {
  margin: 1.8rem 0 1rem;
  padding: 1rem 1.05rem 1.15rem;
  background: var(--wf-panel);
  border: 1px solid var(--wf-line-hot);
  border-radius: 2px;
}
.wf-labnotes h2 {
  margin: 0 0 0.7rem;
  font-family: var(--wf-mono);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wf-volt);
}
.wf-more {
  margin: 1.4rem 0 0.4rem;
  padding: 0.85rem 0.2rem 0.2rem;
  border-top: 1px solid var(--wf-line-hot);
}
.wf-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.5rem;
}
.wf-chip {
  display: inline-block;
  padding: 0.32rem 0.65rem;
  font-family: var(--wf-mono);
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--wf-ink) !important;
  background: var(--wf-panel-2);
  border: 1px solid var(--wf-line);
  border-radius: 999px;
  text-decoration: none !important;
}
.wf-chip:hover, .wf-chip:focus-visible {
  border-color: var(--wf-volt-dim);
  color: var(--wf-volt) !important;
  text-decoration: none !important;
}
.wf-pipeline {
  margin: 1.4rem 0 1rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, #12150f 0%, #0e120c 100%);
  border: 1px solid var(--wf-line-hot);
  border-left: 3px solid var(--wf-volt);
}
.wf-pipeline h2 {
  margin: 0 0 0.55rem;
  font-family: var(--wf-mono);
  font-size: 1.05rem;
  color: var(--wf-volt);
  text-transform: none;
  letter-spacing: 0;
}
.wf-pipeline ol { margin: 0; padding-left: 1.2rem; color: var(--wf-dim); }
.wf-pipeline a { color: var(--wf-volt); }
.wf-indexline {
  margin: 1rem 0;
  padding: 0.5rem 0;
  font-family: var(--wf-mono);
  font-size: 0.82rem;
  color: var(--wf-dim);
  border-bottom: 1px solid var(--wf-line);
}
.wf-indexline a { color: var(--wf-volt); }

/* 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}