/* =====================================================================
   Electrical cheat sheet - full-width dashboard layout.
   Uses the site's design tokens so light/dark themes both work.
   ===================================================================== */

#cheatsheetPane{ width:100%; }

.cs-wrap{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  padding:26px 28px 70px;
  max-width:none;
}
.cs-span-all, .cs-hero, .cs-note{ grid-column:1 / -1; }

/* ---------- Header ---------- */
.cs-hero{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:26px 28px; border-radius:var(--radius-xl);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(var(--accent-rgb),.16), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(var(--accent2-rgb),.12), transparent 60%),
    var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.cs-eyebrow{
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:6px;
}
.cs-title{
  font-family:var(--font-display); font-weight:800; font-size:30px;
  letter-spacing:-.02em; line-height:1.1; margin:0 0 8px; color:var(--ink);
}
.cs-lede{ font-size:15.5px; color:var(--ink-dim); max-width:560px; line-height:1.5; margin:0; }
.cs-jump{ display:flex; flex-wrap:wrap; gap:8px; }
.cs-jump-btn{
  font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  transition:background .15s, border-color .15s, color .15s;
}
.cs-jump-btn:hover, .cs-jump-btn:focus-visible{
  border-color:var(--accent); color:var(--accent); outline:none;
  background:rgba(var(--accent-rgb),.08);
}

.cs-note{
  font-size:14px; line-height:1.5; color:var(--ink);
  padding:11px 16px; border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--warn) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.cs-note b{ color:var(--warn); }

/* ---------- Generic card ---------- */
.cs-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:20px 20px 18px; min-width:0;
  scroll-margin-top:84px;
  display:flex; flex-direction:column;
}
.cs-card-head{ margin-bottom:14px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 16px; }
.cs-card-head > .cs-card-title, .cs-card-head > .cs-card-sub{ flex-basis:100%; }
.cs-card-title{
  font-family:var(--font-display); font-weight:800; font-size:18px;
  margin:0; color:var(--ink); display:flex; align-items:center; gap:9px;
}
.cs-card-title::before{
  content:""; width:8px; height:8px; border-radius:2px; transform:rotate(45deg);
  background:var(--accent); flex-shrink:0;
}
.cs-card-sub{ font-size:13.5px; color:var(--ink-dim); line-height:1.45; margin:0; }
.cs-foot{ font-size:13px; color:var(--ink-dim); line-height:1.45; margin:14px 0 0; }
.cs-mini-h{
  font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:8px;
}
.cs-mono{ font-family:var(--font-mono); }

/* ---------- Tones ---------- */
.cs-tone-accent { --tone:var(--accent); }
.cs-tone-accent2{ --tone:var(--accent-2); }
.cs-tone-warn   { --tone:var(--warn); }
.cs-tone-crit   { --tone:var(--crit); }
.cs-tone-good   { --tone:var(--good); }

/* ---------- Networks ---------- */
.cs-bus-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px;
}
.cs-bus{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius-md);
  padding:16px 16px 14px; background:var(--surface-2);
}
.cs-bus::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--tone);
}
.cs-bus-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:10px; }
.cs-bus-name{ font-weight:800; font-size:15px; color:var(--ink); }
.cs-bus-tag{
  font-size:11px; font-weight:700; letter-spacing:.03em; white-space:nowrap;
  padding:2px 8px; border-radius:var(--radius-pill);
  color:var(--tone); background:color-mix(in srgb, var(--tone) 14%, transparent);
}
.cs-bus-speed{ display:flex; align-items:baseline; gap:6px; }
.cs-bus-num{
  font-family:var(--font-mono); font-weight:700; font-size:32px; line-height:1;
  color:var(--tone); letter-spacing:-.02em;
}
.cs-bus-unit{ font-size:13px; font-weight:700; color:var(--ink-dim); }
.cs-bus-std{ font-size:12.5px; color:var(--ink-dim); margin:6px 0 10px; }
.cs-bus-facts{ list-style:none; margin:0; padding:10px 0 0; border-top:1px dashed var(--line); display:grid; gap:6px; }
.cs-bus-facts li{ font-size:13.5px; line-height:1.4; color:var(--ink); padding-left:14px; position:relative; }
.cs-bus-facts li::before{
  content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:var(--tone);
}

/* ---------- Resistance ---------- */
.cs-bignum{
  display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:12px;
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--good) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--good) 35%, transparent);
}
.cs-bignum-val{
  font-family:var(--font-mono); font-weight:700; font-size:38px; line-height:1; color:var(--good);
}
.cs-bignum-lbl{ font-size:13px; color:var(--ink-dim); line-height:1.35; }
.cs-readings{ display:grid; gap:8px; }
.cs-reading{ display:grid; grid-template-columns:118px 1fr; gap:10px; align-items:center; }
.cs-reading-txt{ font-size:13.5px; line-height:1.4; color:var(--ink); }
.cs-pill{
  font-variant-numeric:tabular-nums; font-weight:800; font-size:13px; text-align:center;
  padding:5px 8px; border-radius:var(--radius-sm);
}
.cs-pill-good{ color:var(--good); background:color-mix(in srgb, var(--good) 16%, transparent); }
.cs-pill-warn{ color:var(--warn); background:color-mix(in srgb, var(--warn) 18%, transparent); }
.cs-pill-crit{ color:var(--crit); background:color-mix(in srgb, var(--crit) 16%, transparent); }

/* ---------- Voltage ---------- */
.cs-table-wrap{ overflow-x:auto; }
.cs-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.cs-table th{
  text-align:left; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-dim); padding:6px 6px 8px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.cs-table td{ padding:8px 6px; border-bottom:1px solid var(--line); color:var(--ink); white-space:nowrap; }
.cs-table tr:last-child td{ border-bottom:none; }
.cs-table .cs-val{ font-weight:700; }
.cs-table tr.cs-group-row td{
  font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); padding:12px 6px 6px; border-bottom:1px solid var(--line);
}
.cs-table tr.cs-group-row:first-child td{ padding-top:6px; }
.cs-table .cs-val{ font-variant-numeric:tabular-nums; }
.cs-faults{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); }
.cs-fault{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:13.5px; }
.cs-fault-sym{ color:var(--ink); }
.cs-fault-cause{ color:var(--crit); font-weight:700; text-align:right; }

/* ---------- OBD-II connector ---------- */
.cs-conn{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 12px 18px; margin-bottom:14px;
  background:color-mix(in srgb, var(--ink) 9%, var(--surface));
  clip-path:polygon(0 0, 100% 0, 93% 100%, 7% 100%);
  border-radius:var(--radius-md);
}
.cs-conn-row{ display:grid; grid-template-columns:repeat(8, 1fr); gap:6px; width:100%; max-width:400px; }
.cs-conn-row + .cs-conn-row{ max-width:360px; }
.cs-pin{
  aspect-ratio:1 / 1.15; border-radius:6px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px;
  background:var(--surface); border:1px solid var(--line); cursor:default;
}
.cs-pin-n{ font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--ink-dim); }
.cs-pin-s{ font-size:8.5px; font-weight:800; letter-spacing:.02em; color:var(--ink-dim); opacity:.75; }
.cs-pin-can{ background:color-mix(in srgb, var(--accent) 18%, var(--surface)); border-color:var(--accent); }
.cs-pin-can .cs-pin-n, .cs-pin-can .cs-pin-s{ color:var(--accent); opacity:1; }
.cs-pin-pwr{ background:color-mix(in srgb, var(--crit) 16%, var(--surface)); border-color:var(--crit); }
.cs-pin-pwr .cs-pin-n, .cs-pin-pwr .cs-pin-s{ color:var(--crit); opacity:1; }
.cs-pin-gnd{ background:color-mix(in srgb, var(--ink-dim) 16%, var(--surface)); border-color:var(--ink-dim); }
.cs-pin-gnd .cs-pin-n, .cs-pin-gnd .cs-pin-s{ color:var(--ink); opacity:1; }
.cs-pin-legacy{ background:color-mix(in srgb, var(--warn) 14%, var(--surface)); border-color:color-mix(in srgb, var(--warn) 60%, transparent); }
.cs-pin-legacy .cs-pin-n, .cs-pin-legacy .cs-pin-s{ color:var(--warn); opacity:1; }

.cs-pin-legend{ display:grid; gap:6px; }
.cs-legend-row{ display:flex; align-items:center; gap:10px; font-size:13.5px; }
.cs-legend-pin{
  font-family:var(--font-mono); font-weight:700; font-size:12.5px;
  min-width:30px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:5px; border:1px solid var(--line);
}
.cs-legend-pin.cs-pin-can{ color:var(--accent); }
.cs-legend-pin.cs-pin-pwr{ color:var(--crit); }
.cs-legend-pin.cs-pin-gnd{ color:var(--ink); }
.cs-legend-pin.cs-pin-legacy{ color:var(--warn); }
.cs-legend-txt{ color:var(--ink); line-height:1.35; }

/* ---------- Field checks ---------- */
.cs-check-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.cs-check{
  border:1px solid var(--line); border-radius:var(--radius-md); padding:14px 16px;
  background:var(--surface-2);
}
.cs-check-h{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px; margin-bottom:10px; color:var(--ink); }
.cs-check-icon{
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:14px;
  color:var(--accent-ink); background:var(--accent);
}
.cs-check-list{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.cs-check-list li{ font-size:13.5px; line-height:1.4; color:var(--ink); padding-left:16px; position:relative; }
.cs-check-list li::before{ content:"\203A"; position:absolute; left:2px; top:-1px; color:var(--accent); font-weight:800; }

/* ---------- Systems glossary ---------- */
.cs-filter{
  flex:0 1 380px; margin-top:6px;
  padding:9px 13px; border-radius:var(--radius-md); border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); font-size:14px; font-family:inherit;
}
.cs-filter:focus{ outline:2px solid var(--accent-2); outline-offset:1px; border-color:var(--accent); }
.cs-sys-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.cs-sys{
  border:1px solid var(--line); border-radius:var(--radius-md); padding:13px 14px;
  background:var(--surface-2); transition:border-color .15s, transform .15s;
}
.cs-sys:hover{ border-color:var(--accent); transform:translateY(-1px); }
.cs-sys-code{
  display:inline-block; font-family:var(--font-mono); font-weight:700; font-size:13px;
  color:var(--accent); background:rgba(var(--accent-rgb),.1);
  padding:2px 8px; border-radius:var(--radius-sm); margin-bottom:6px;
}
.cs-sys-name{ font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:4px; line-height:1.3; }
.cs-sys-blurb{ font-size:13px; color:var(--ink-dim); line-height:1.45; }

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .cs-wrap{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  #cs-obd{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:24px; align-items:start; }
  #cs-obd > .cs-card-head, #cs-obd > .cs-foot{ grid-column:1 / -1; }
}
@media (max-width:1240px){ .cs-check-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:820px){
  .cs-check-grid{ grid-template-columns:minmax(0,1fr); }
  .cs-conn{ padding:12px 6px 14px; }
  .cs-conn-row{ gap:3px; }
  .cs-pin-s{ display:none; }
  .cs-pin-n{ font-size:12px; }
  .cs-wrap{ grid-template-columns:minmax(0,1fr); padding:16px 16px 60px; gap:14px; }
  #cs-obd{ display:flex; }
  .cs-hero{ padding:20px; }
  .cs-title{ font-size:24px; }
  .cs-filter{ flex-basis:100%; }
  .cs-reading{ grid-template-columns:104px 1fr; }
}