/* =========================================================================
   vfdspindle.com — warm white + teal
   -------------------------------------------------------------------------
   Deliberately NOT the blue-grey palette used elsewhere in the family: this
   site is a wiring/tutorial site, not a dimension table, and it should not
   read as a second copy of anything.

   The separation from the family palette is on two axes at once, which is
   why it holds up even though both sites are light:
     temperature — this site is WARM (off-white ground, warm grey panels,
                   warm grey body text). The family site is COOL (pure white
                   ground, blue-grey panels).
     hue         — brand accent here is teal, there it is blue.

   Palette contract (keep these relationships and the theme holds):
     --bg      page ground        warm off-white
     --soft    panels, table heads, code, footer   one step down
     --line    every border
     --accent  teal. The BRAND channel: links, active nav, buttons, key
               figures, tool results.
     --warn    amber. The CAUTION channel: warning boxes only.
     --ok      green. The "this is fine" channel.

   Teal / amber / green must never be swapped between channels. Amber is the
   universal caution colour; if the brand also owns it, warning boxes lose
   their ability to warn — which matters on a site about not letting the
   smoke out of a drive.

   Measured 2026-10-12 against WCAG 2.1 — every pair below passes:
     body text 16.3 · muted 6.1 · link 5.9 · link on panel 5.5
     button (white on teal) 6.2 · warning text 6.0 · ok text 5.9 · footer 5.7
   ========================================================================= */
:root{
  --fg:#191d1f; --muted:#605f59; --line:#e0dbd2; --bg:#fbfaf7; --soft:#f3f1ec;
  --accent:#0f6e56; --accent-soft:#e6f2ee; --warn:#a04000; --warn-bg:#fff4e2;
  --ok:#2b6a30; --ok-bg:#eaf5ec; --radius:10px;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font:16px/1.68 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--fg); background:var(--bg);
}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

header.site{border-bottom:1px solid var(--line);background:var(--bg)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.brand{font-weight:600;font-size:17px;letter-spacing:-.2px;color:var(--fg)}
.brand span{color:var(--accent)}
nav.top{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
nav.top a{color:var(--muted)}
nav.top a.is-active{color:var(--accent);font-weight:600}

main{padding:32px 0 64px}
h1{font-size:29px;line-height:1.25;margin:0 0 12px;letter-spacing:-.5px}
h2{font-size:21px;margin:38px 0 12px;letter-spacing:-.2px}
h3{font-size:17px;margin:26px 0 8px}
p{margin:12px 0}
.lede{font-size:18px;color:var(--muted);margin:0 0 22px}
ul,ol{margin:12px 0;padding-left:22px}
li{margin:6px 0}
small,.small{font-size:13px;color:var(--muted)}
code{font-family:var(--mono);font-size:.9em;background:var(--soft);padding:1px 5px;border-radius:4px}

.tablewrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
th,td{border-bottom:1px solid var(--line);padding:9px 12px;text-align:left;white-space:nowrap}
th{background:var(--soft);font-weight:600;font-size:13px;position:sticky;top:0}
tbody tr:nth-child(even) td{background:#f6f4ef}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover td{background:var(--accent-soft)}
tr.hl td{background:var(--accent-soft)!important;font-weight:600}

.card{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:18px 0}
.note{border-left:4px solid var(--warn);background:var(--warn-bg);padding:12px 16px;margin:18px 0;border-radius:0 8px 8px 0;font-size:15px}
.good{border-left:4px solid var(--ok);background:var(--ok-bg);padding:12px 16px;margin:18px 0;border-radius:0 8px 8px 0;font-size:15px}
.note strong,.good strong{color:var(--fg)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:20px 0}
.tile{border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.tile h3{margin:0 0 6px;font-size:16px}
.tile p{margin:0;font-size:14px;color:var(--muted)}

.btn{display:inline-block;padding:9px 16px;border-radius:8px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;line-height:1.4}
.btn:hover{background:#0b5745;text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.soon{background:var(--soft);color:var(--muted);border:1px dashed var(--line);cursor:not-allowed}
.buylist{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.buylist .item{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;min-width:230px;flex:1 1 230px}
.buylist .item .t{font-size:14px;font-weight:600;margin-bottom:2px}
.buylist .item .m{font-size:12.5px;color:var(--muted);margin-bottom:9px}

footer.site{border-top:1px solid var(--line);padding:26px 0 50px;font-size:13px;color:var(--muted)}
footer.site nav{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
@media(max-width:600px){
  h1{font-size:24px}.lede{font-size:16px}
  header.site .wrap{align-items:flex-start;flex-direction:column;gap:10px}
}

/* ---- v2: header / footer / breadcrumb / structured blocks ---- */
header.site{background:var(--bg);border-bottom:0;border-top:3px solid var(--accent)}
header.site .wrap{padding-top:18px;padding-bottom:0}
.brandbar{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brand{font-size:22px;font-weight:600;letter-spacing:-.5px;color:var(--fg);text-decoration:none}
.brand b{color:var(--accent);font-weight:600}
.tagline{font-size:13px;color:var(--muted);margin:0}
nav.top{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-bottom:0}
nav.top a{color:var(--muted);font-size:13.5px;padding:9px 12px;border-radius:8px 8px 0 0;text-decoration:none}
nav.top a:hover{background:var(--soft);color:var(--fg);text-decoration:none}
nav.top a.is-active{background:var(--soft);color:var(--fg);box-shadow:inset 0 -3px 0 var(--accent)}
.navlabel{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b6259;margin:0 8px 0 4px}
@media(max-width:600px){nav.top{gap:2px}nav.top a{padding:8px 9px;font-size:13px}.navlabel{display:none}}

main{padding-top:26px}
.bcrumb{font-size:13px;color:var(--muted);margin:0 0 14px}
.bcrumb a{color:var(--muted)}
.bcrumb span[aria-current]{color:var(--fg)}

footer.site{background:var(--soft);border-top:0;color:var(--muted);margin-top:20px;padding-top:34px}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px;padding-bottom:26px}
.fcol h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6b6259;margin:0 0 10px;font-weight:600}
.fcol a{display:block;color:var(--fg);font-size:14px;padding:3px 0;text-decoration:none}
.fcol a:hover{color:var(--accent);text-decoration:underline}
.fcol p{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0}
.footbottom{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:#6b6259;border-top:1px solid var(--line);padding:16px 0 34px}
.footbottom a{color:#6b6259}

table caption{caption-side:top;text-align:left;font-size:13px;color:var(--muted);padding:0 0 8px}
.lead{font-size:18px;color:var(--muted);margin:0 0 20px}
.faq h3{margin:22px 0 4px;font-size:16px}
.pill{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:20px;background:var(--accent-soft);color:var(--accent);margin-left:6px;vertical-align:middle}

/* ---- v7: table of contents (tutorial pages) ----------------------------
   A wiring site is read in order; a dimension table is scanned. This block
   is the reason the two kinds of page should not look alike.
------------------------------------------------------------------------ */
.toc{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;background:var(--soft);padding:14px 18px;margin:0 0 26px}
.toc h2,.toc .toctitle{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-weight:600}
.toc ol{margin:0;padding-left:20px;font-size:14.5px}
.toc li{margin:4px 0}
.toc a{color:var(--fg)}
.toc a:hover{color:var(--accent)}

/* ---- v8: start-here tool cards (home page) -----------------------------
   The tools are the reason people arrive; they get the first screen.
------------------------------------------------------------------------ */
.tile.tool-tile{border-top:3px solid var(--accent)}
.tile.tool-tile .go{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:600;color:var(--accent)}

/* ---- v3: screenshot / print branding ----------------------------------
   Three things, all free at runtime (inline SVG, no network request):
     1. a faint tiled watermark over data tables  (what people screenshot)
     2. a fainter tiled watermark on the page body
     3. print rules that add the page URL to the printout
   To switch any of it off, delete the matching block below.
   Nothing here affects LCP or CLS: no requests, no layout, pointer-events none.
------------------------------------------------------------------------ */

.tablewrap{position:relative}
.tablewrap::after{
  content:"";
  position:absolute;top:0;left:0;right:0;bottom:0;
  border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='110'%3E%3Ctext%20x='8'%20y='62'%20font-family='Helvetica,Arial,sans-serif'%20font-size='15'%20fill='%23191d1f'%20fill-opacity='0.07'%3Evfdspindle.com%3C/text%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:300px 110px;
  pointer-events:none;
}

body{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='560'%20height='300'%3E%3Ctext%20x='20'%20y='150'%20font-family='Helvetica,Arial,sans-serif'%20font-size='20'%20fill='%23191d1f'%20fill-opacity='0.035'%3Evfdspindle.com%3C/text%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:560px 300px;
}

.printsrc{display:none}

@media print{
  nav.top{display:none!important}
  .printsrc{display:block;margin:0 0 14px;font-size:11px;color:#555;border-bottom:1px solid #ccc;padding-bottom:6px}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#666}
  .tablewrap::after{background-size:220px 80px}
}

.tile h4{margin:0 0 6px;font-size:16px}

/* ---- v4: interactive tools ---------------------------------------------
   Pure front-end calculators. No network, no dependency, no layout shift:
   the result box is reserved, so nothing jumps when a number appears.
------------------------------------------------------------------------ */

.tool{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:20px 0;background:var(--soft)}
.tool h3{margin:0 0 4px;font-size:17px}
.tool .thint{font-size:13px;color:var(--muted);margin:0 0 14px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tfield{display:flex;flex-direction:column;gap:5px}
.tfield label{font-size:12.5px;color:var(--muted);font-weight:500}
.tfield input,.tfield select{padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-size:15px;background:#fff;color:var(--fg);font-family:inherit}
.tfield input:focus,.tfield select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.tout{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.tout table{min-width:0;font-size:14px;border:0}
.tout td{border-bottom:1px solid var(--line);padding:7px 0;white-space:normal}
.tout td.k{color:var(--muted);padding-right:14px}
.tout td.v{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.tout td.v b{color:var(--accent);font-size:16px}
.tmsg{margin-top:12px;font-size:13.5px;color:var(--muted)}
.tmsg.warn{color:var(--warn)}
@media print{.tool{border-color:#999}.tfield input,.tfield select{border-color:#999;background:#fff;color:#000}}

/* ---- v5: ad slots, footer contact, consent bar --------------------------
   A slot that is switched off has its placeholder removed by ads.js, so
   nothing is left behind on the page.
------------------------------------------------------------------------ */
.adslot{margin:20px 0 6px;text-align:center}
.adlabel{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6b6259;margin:0 0 4px}
.adslot img{max-width:100%;height:auto;max-height:180px;border:1px solid var(--line);border-radius:8px;display:inline-block}
.footcontact{padding:14px 0 2px;border-top:1px solid var(--line)}
.footcontact img{display:inline-block}
.cookiebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;background:#fff;border:1px solid var(--line);color:var(--fg);font-size:14px;padding:12px 16px;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.14)}
.cookiebar button{padding:8px 18px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer}

/* ---- v6: layout stability for the ad slots ------------------------------
   Reserve height so the page does not jump when an ad loads (CLS).
   Delete these three rules only if AdSense is never switched on.
------------------------------------------------------------------------ */
[data-adsense]{margin:20px 0;text-align:center;min-height:100px}
@media (max-width:600px){[data-adsense]{min-height:90px}}
[data-ad]{margin:0}

/* ---- v9: print ---------------------------------------------------------
   The ground is already ink-on-paper, so there is nothing to invert. What
   print still needs: no watermark, no ads, no nav, and link URLs spelled
   out — a printed wiring page is worthless without them.
------------------------------------------------------------------------ */
@media print{
  body{background-image:none}
  .tablewrap::after{display:none}
  .footcontact,.adslot,[data-ad],[data-adsense],.cookiebar{display:none}
  .toc{border-left-color:#888}
  tbody tr:nth-child(even) td{background:#fafbfc}
  tbody tr:hover td{background:transparent}
  .note,.good{border-left-width:3px}
}