/* ==========================================================================
   tutorial.css — shared styles for Onion's first-party DIY guide pages.
   Loaded by /diy/onion-madder/* tutorials (after diy.css). Previously these
   rules were duplicated in a <style> block on every guide; consolidated here.
   ========================================================================== */

/* ----- Article shell ----- */
.tut{ min-width:0; }
.tut .subtitle{ margin-top:2px; }

/* Obvious draft banner - delete the .draft-banner element from a page's HTML
   before publishing it. */
.draft-banner{
  margin:0 0 22px; padding:12px 16px;
  border:1px dashed var(--pink); border-left:3px solid var(--pink);
  background:rgba(255,91,200,0.06);
  font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); line-height:1.6;
}

/* ----- Safety callout (box + tag; the collapse toggle is the shared
   .disclosure mechanic in style.css) ----- */
details.safety-note{
  margin:22px 0; padding:16px 18px;
  border:1px solid rgba(255,91,200,0.35); border-left:2px solid var(--pink);
  background:rgba(255,91,200,0.05);
}
.safety-note .safety-tag{
  display:inline-block;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--pink); border:1px solid rgba(255,91,200,0.35); background:rgba(255,91,200,0.06);
  padding:.2rem .5rem;
}
.safety-note p{ margin:0 0 10px; color:var(--ink-dim); font-size:.9rem; line-height:1.65; }
.safety-note p:last-child{ margin-bottom:0; }

/* ----- Numbered build steps ----- */
.step{ margin-top:36px; }
.step > h2{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.step-num{
  font-family:var(--font-mono); color:var(--accent); font-size:.8rem; letter-spacing:1px;
  border:1px solid rgba(0,255,204,0.35); background:rgba(0,255,204,0.06);
  padding:1px 8px; flex:none;
}
/* Bracketed placeholder prose - visually flagged so it's easy to find/replace. */
.todo{ color:var(--pink); font-style:italic; }

/* ----- Monospace pinout / ASCII blocks (readable at any zoom, no image) ----- */
.asciibox{
  margin:16px 0; padding:16px 18px; overflow-x:auto;
  border:1px solid var(--border); border-left:2px solid var(--border-glow);
  background:var(--bg-alt);
  font-family:var(--font-mono); font-size:.82rem; line-height:1.5; color:var(--ink-dim);
  white-space:pre;
}

/* ----- Pin-by-pin netlist / recipe tables ----- */
.netlist{ width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:.82rem; margin:14px 0; }
.netlist caption{
  text-align:left; font-weight:700; color:var(--accent);
  text-transform:uppercase; letter-spacing:1px; font-size:.72rem; padding:0 0 8px;
}
.netlist th, .netlist td{
  text-align:left; padding:8px 10px; border-bottom:1px solid var(--hairline); vertical-align:top;
}
.netlist thead th{ color:var(--ink-soft); text-transform:uppercase; letter-spacing:1px; font-size:.68rem; }
.netlist td{ color:var(--ink-dim); }
.netlist td:first-child{ color:var(--text); white-space:nowrap; }

.pinref{ font-family:var(--font-mono); color:var(--accent); }

/* ----- Quick-reference bench card ----- */
.quickref{
  margin:26px 0; padding:18px 20px 20px;
  border:1px solid var(--border); border-left:2px solid var(--border-glow);
  background:var(--bg-alt);
}
.quickref > h2{ margin:0 0 4px; }
.quickref .qr-lead{ font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft); margin:0 0 8px; }
.quickref .asciibox{ margin:10px 0 4px; }
.qr-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 26px; margin-top:14px; }
.qr-grid h3{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--accent); margin:0 0 6px;
}
.qr-grid ul{ list-style:none; margin:0; padding:0; font-family:var(--font-mono); font-size:.8rem; color:var(--ink-dim); }
.qr-grid li{ padding:4px 0; border-bottom:1px solid var(--hairline); line-height:1.45; }
.qr-grid li:last-child{ border-bottom:none; }
.qr-grid .warn{ color:var(--pink); }
@media (max-width:720px){ .qr-grid{ grid-template-columns:1fr; } }

/* ----- Downloadable-resource callout (e.g. the drilling template) ----- */
.panel-note{
  margin:26px 0; padding:16px 18px;
  border:1px solid var(--border); border-left:2px solid var(--border-glow);
  background:var(--bg-alt); color:var(--ink-dim); font-size:.95rem; line-height:1.6;
}
.panel-note a{ font-family:var(--font-mono); }
.panel-note .dl{
  display:inline-block; margin-top:4px; font-family:var(--font-mono);
  font-size:.8rem; letter-spacing:.5px; color:var(--accent);
}

/* ----- Small text helpers (were inline style="" attributes) -----
   Scoped under .tut so they outrank style.css's `.container p { font-size:16px }`
   (0,1,1) — inline styles used to win on specificity; these need (0,2,0) to match. */
.tut .note-mono{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); }
.tut .note-sm{ font-size:.8rem; color:var(--ink-soft); }
.tut .mono{ font-family:var(--font-mono); }
.tut .log-intro{ font-family:var(--font-mono); font-size:.82rem; color:var(--ink-soft); margin-top:26px; }
.tut .note-gap{ margin-top:12px; }
.tut .credit{
  margin-top:28px; padding-top:16px; border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft);
}

/* ==========================================================================
   Series & Parallel explainer — page-specific (only that guide uses these).
   Kept here so the guide carries no inline CSS; class names are unique so
   the rules are inert on the other tutorial pages.
   ========================================================================== */
.rule-box{
  margin:24px 0; padding:18px 20px;
  border:1px solid var(--border); border-left:2px solid var(--border-glow);
  background:var(--bg-alt);
}
.rule-box p{ margin:0 0 8px; color:var(--ink-dim); }
.rule-box p:last-child{ margin-bottom:0; }
.rule-box strong{ color:var(--accent); font-family:var(--font-mono); }

/* Diagrams (inline SVG, original artwork) */
.diagram{
  margin:22px 0; padding:18px 16px 14px;
  border:1px solid var(--border); border-left:2px solid var(--border-glow);
  background:var(--bg-alt);
}
.diagram svg{ display:block; width:100%; height:auto; overflow:visible; }
.diagram figcaption{
  margin-top:12px; padding-top:10px; border-top:1px solid var(--hairline);
  font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); line-height:1.6;
}
.diagram figcaption strong{ color:var(--accent); }

/* SVG element classes - all theme-aware via CSS vars */
.d-body{ fill:var(--bg); stroke:var(--ink-dim); stroke-width:2.5; }
.d-nub{ fill:var(--ink-dim); }
.d-wire{ fill:none; stroke:var(--accent); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.d-wire-alt{ fill:none; stroke:var(--pink); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.d-node{ fill:var(--accent); }
.d-node-alt{ fill:var(--pink); }
.d-cell-lbl{ fill:var(--text); font-family:var(--font-mono); font-size:19px; font-weight:700; text-anchor:middle; }
.d-lbl-sm{ font-size:15px; }
.d-term{ fill:var(--ink-dim); font-family:var(--font-mono); font-size:22px; font-weight:700; text-anchor:middle; }
.d-out{ fill:var(--accent); font-family:var(--font-mono); font-size:18px; font-weight:700; }
.d-out-alt{ fill:var(--pink); font-family:var(--font-mono); font-size:18px; font-weight:700; }
.d-note{ fill:var(--ink-soft); font-family:var(--font-mono); font-size:15px; }
.d-schem{ fill:none; stroke:var(--ink-dim); stroke-width:2.5; stroke-linecap:round; }

/* Multimeter reading table */
.mm-table{ width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:.82rem; margin:14px 0; }
.mm-table caption{
  text-align:left; font-weight:700; color:var(--accent);
  text-transform:uppercase; letter-spacing:1px; font-size:.72rem; padding:0 0 8px;
}
.mm-table th, .mm-table td{
  text-align:left; padding:8px 10px; border-bottom:1px solid var(--hairline); vertical-align:top;
}
.mm-table thead th{ color:var(--ink-soft); text-transform:uppercase; letter-spacing:1px; font-size:.68rem; }
.mm-table td{ color:var(--ink-dim); }
.mm-table td:first-child{ color:var(--text); white-space:nowrap; }

.credit-note{
  margin-top:28px; padding-top:16px; border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); line-height:1.7;
}

/* ----- BOM "spot it" thumbnails -----
   Small identification photo tucked beside its parts-list line, so you can match
   the thing in your hand to the line in the list without leaving the list. */
.tut .bom li{ overflow:hidden; }
.tut .bom .bom-thumb{
  float:right;
  width:92px; height:92px; object-fit:cover;
  margin:2px 0 8px 14px;
  border:1px solid var(--border); border-left:2px solid var(--border-glow);
  background:#000;
}
@media (max-width:520px){
  .tut .bom .bom-thumb{ width:68px; height:68px; margin-left:10px; }
}