/* ============================================================
   Electronics Study — shared site stylesheet (site.css)
   Design tokens, theming, and shared chrome (header / nav /
   footer / theme toggle / mobile nav). Page-specific styles
   stay inline on each page. Edit here to update all pages.
   ============================================================ */

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ---- design tokens (light) ---- */
:root{
  --bg:#F7F6F2;--surface:#fff;--surface2:#F0EEE9;
  --ink:#1A1916;--ink2:#6B6860;--ink3:#727069;
  --accent:#2B5CE6;--accent2:#1A3D99;--accent-bg:#EEF2FD;
  --green:#0F6E56;--green-bg:#E1F5EE;
  --red:#A32D2D;--red-bg:#FCEBEB;
  --amber:#854F0B;--amber-bg:#FAEEDA;
  --border:rgba(26,25,22,.10);--border2:rgba(26,25,22,.18);
  --wire:#6B6860;
  --tr-block:#EDEAE3;--tr-blockln:#6B6860;--tr-flowgood:#1C9A7E;--tr-flowdead:#C0392B;--tr-flowunknown:#9E9C96;
  --r:10px;--rl:16px;
  --font:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono','Fira Mono',monospace;
  /* ---- spacing scale (4px base grid) ---- */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;
  /* ---- modular type scale + base leading ---- */
  --fs-sm:12px;--fs-base:14px;--fs-md:16px;--fs-lg:20px;--fs-xl:26px;
  --leading:1.55;
  /* ---- motion-duration tokens (theme-independent; used by all shared transitions) ---- */
  --dur-fast:120ms;--dur-base:150ms;--dur-slow:240ms;
}
/* ---- design tokens (dark, explicit) ---- */
:root[data-theme="dark"]{
  --bg:#141412;--surface:#1E1D1A;--surface2:#252420;
  --ink:#F0EEE9;--ink2:#9E9C96;--ink3:#888680;
  --accent:#5B84F5;--accent2:#A3BAFF;--accent-bg:#1A2547;
  --green:#3DBFA0;--green-bg:#0B2E25;
  --red:#F09595;--red-bg:#2D0F0F;
  --amber:#EF9F27;--amber-bg:#2A1D08;
  --border:rgba(240,238,233,.10);--border2:rgba(240,238,233,.18);
  --wire:#9E9C96;
  --tr-block:#252420;--tr-blockln:#5E5D58;--tr-flowgood:#3DBFA0;--tr-flowdead:#F09595;--tr-flowunknown:#5E5D58;
}
/* ---- dark by system preference when no explicit choice ---- */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#141412;--surface:#1E1D1A;--surface2:#252420;
    --ink:#F0EEE9;--ink2:#9E9C96;--ink3:#888680;
    --accent:#5B84F5;--accent2:#A3BAFF;--accent-bg:#1A2547;
    --green:#3DBFA0;--green-bg:#0B2E25;
    --red:#F09595;--red-bg:#2D0F0F;
    --amber:#EF9F27;--amber-bg:#2A1D08;
    --border:rgba(240,238,233,.10);--border2:rgba(240,238,233,.18);
    --wire:#9E9C96;
    --tr-block:#252420;--tr-blockln:#5E5D58;--tr-flowgood:#3DBFA0;--tr-flowdead:#F09595;--tr-flowunknown:#5E5D58;
  }
}

/* ---- base ---- */
body{font-family:var(--font);background:var(--bg);color:var(--ink);min-height:100vh;}

/* hide number input spinners site-wide */
input[type=number]{-moz-appearance:textfield;appearance:textfield;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* ---- header ---- */
header{background:var(--surface);border-bottom:1px solid var(--border);
  padding-inline:max(1.5rem,calc((100% - 1120px) / 2));padding-block:0;
  display:flex;align-items:center;justify-content:space-between;height:56px;
  position:sticky;top:0;z-index:200;}

/* ---- logo ---- */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.logo-mark{width:32px;height:32px;background:var(--accent);border-radius:9px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-mark svg{width:32px;height:32px;display:block;}
.logo-text .name{font-size:15px;font-weight:600;letter-spacing:-.3px;}
.logo-text .sub{font-size:11px;color:var(--ink3);}

/* ---- top nav + dropdowns ---- */
.top-nav{display:flex;gap:6px;align-items:center;}
.nav-dropdown{position:relative;}
.nav-dropbtn{font-size:12px;font-weight:500;padding:6px 12px;border-radius:999px;
  border:1px solid var(--border2);color:var(--ink2);background:var(--surface);
  cursor:pointer;font-family:var(--font);transition:all var(--dur-fast);white-space:nowrap;}
.nav-dropbtn:hover,.nav-dropbtn.open{color:var(--ink);border-color:var(--ink3);background:var(--surface2);}
.nav-dropcontent{display:none;position:absolute;right:0;top:calc(100% + 6px);
  background:var(--surface);border:1px solid var(--border2);border-radius:12px;
  min-width:210px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:500;overflow:hidden;padding:4px 0;}
.nav-dropcontent.open{display:block;}
.nav-dropcontent a{display:block;padding:8px 16px;font-size:13px;color:var(--ink2);
  text-decoration:none;transition:background var(--dur-fast);white-space:nowrap;}
.nav-dropcontent a:hover{background:var(--surface2);color:var(--ink);}
.nav-dropcontent a.active-link{color:var(--accent);font-weight:600;background:var(--accent-bg);}
.nav-dropcontent .dd-head{display:block;padding:9px 16px 4px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);pointer-events:none;}
.nav-dropcontent .dd-head:not(:first-child){margin-top:3px;border-top:1px solid var(--border);padding-top:9px;}
/* ---- Reference menu: two clean columns side by side (desktop), stacked (mobile) ---- */
@media(min-width:681px){
  .nav-dropcontent.ref-menu{display:none;padding:8px 8px;min-width:0;max-width:calc(100vw - 24px);max-height:calc(100vh - 80px);overflow-y:auto;}
  .nav-dropcontent.ref-menu.open{display:flex;gap:4px;align-items:flex-start;}
  .nav-dropcontent.ref-menu .dd-col{display:flex;flex-direction:column;min-width:184px;}
  .nav-dropcontent.ref-menu .dd-head{padding:5px 12px 5px;}
  .nav-dropcontent.ref-menu .dd-head:not(:first-child){margin:0;border:0;padding-top:5px;}
  .nav-dropcontent.ref-menu a{padding:7px 12px;border-radius:8px;margin:0 4px;white-space:nowrap;}
}

/* ---- header right cluster ---- */
.header-right{display:flex;align-items:center;gap:10px;}

/* ---- theme toggle ---- */
.theme-toggle{width:34px;height:34px;border-radius:9px;border:1px solid var(--border2);
  background:var(--surface);color:var(--ink2);cursor:pointer;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;transition:all var(--dur-base);padding:0;}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink3);background:var(--surface2);}
.theme-toggle svg{width:17px;height:17px;display:block;}
.theme-toggle .icon-sun{display:none;}
.theme-toggle .icon-moon{display:block;}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none;}

/* ---- hamburger (mobile only) ---- */
.hamburger{display:none;width:36px;height:34px;border-radius:9px;border:1px solid var(--border2);
  background:var(--surface);color:var(--ink);cursor:pointer;align-items:center;justify-content:center;
  flex-shrink:0;padding:0;}
.hamburger:hover{background:var(--surface2);border-color:var(--ink3);}
.hamburger svg{width:18px;height:18px;}

/* ---- footer ---- */
footer{text-align:center;padding:1.5rem;font-size:12px;color:var(--ink3);
  border-top:1px solid var(--border);margin-top:2rem;}
.site-copyright{margin-top:6px;font-size:11px;color:var(--ink3);}
.site-copyright a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--border2);}
.site-copyright a:hover{color:var(--accent);}

/* ---- responsive: tablet ---- */
@media(max-width:640px){
  .top-nav{gap:4px;}
  .nav-dropbtn{font-size:11px;padding:5px 9px;}
}

/* ---- responsive: mobile (slide-down nav) ---- */
@media(max-width:680px){
  header{padding-inline:.85rem;height:52px;}
  .logo-text .sub{display:none;}
  .logo-text .name{font-size:13px;}
  .logo-mark{width:28px;height:28px;}
  .logo-mark svg{width:28px;height:28px;}
  .header-right{gap:6px;}
  .theme-toggle{width:32px;height:32px;}
  .hamburger{display:flex;}
  .top-nav{position:fixed;top:52px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--border2);
    box-shadow:0 12px 28px rgba(0,0,0,.18);
    padding:8px 0;display:none;z-index:300;max-height:calc(100vh - 52px);overflow-y:auto;}
  .top-nav.mobile-open{display:flex;}
  .nav-dropdown{position:static;}
  .nav-dropbtn{width:calc(100% - 24px);margin:2px 12px;text-align:left;border-radius:8px;
    font-size:14px;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;}
  .nav-dropcontent{position:static;display:none;box-shadow:none;border:none;
    background:var(--surface2);border-radius:8px;margin:0 12px 4px;min-width:0;max-width:none;padding:4px 0;}
  .nav-dropcontent.open{display:block;}
  .nav-dropcontent a{padding:10px 18px;font-size:13px;}
  .nav-dropcontent.ref-menu.open{display:block;padding:4px 0;}
  .nav-dropcontent.ref-menu .dd-col{display:block;}
  .nav-dropcontent.ref-menu .dd-col:not(:first-child){border-top:1px solid var(--border);margin-top:4px;padding-top:4px;}
  .nav-dropcontent.ref-menu .dd-head{padding:8px 18px 3px;}
  .nav-dropcontent.ref-menu a{margin:0;border-radius:0;}
}

/* ---- responsive: small mobile ---- */
@media(max-width:430px){
  .logo-text .name{font-size:0;}
  .logo-mark{margin-right:0;}
  .nav-dropbtn{font-size:11px;padding:6px 8px;}
}

/* ===== Shared tooltip (info bubble) — explains terms inline; never used for navigation ===== */
.ttip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--accent-bg);color:var(--accent2);font-size:10px;font-weight:700;font-family:var(--mono);cursor:help;vertical-align:middle;border:none;margin-left:4px;padding:0;}
.ttip .pop{visibility:hidden;opacity:0;position:absolute;bottom:150%;left:50%;transform:translateX(-50%);width:220px;background:var(--surface);color:var(--ink2);border:1px solid var(--border2);border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.55;font-weight:400;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:60;transition:opacity var(--dur-base);font-family:var(--font);white-space:normal;}
.ttip .pop b{color:var(--accent2);}
.ttip:hover .pop,.ttip:focus .pop,.ttip:focus-within .pop{visibility:visible;opacity:1;}
.ttip.ttip-below .pop{bottom:auto;top:150%;}

/* ===== Site search (header) ===== */
.ec-search{position:relative;display:flex;align-items:center;margin-right:10px;}
.ec-search-box{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border2);border-radius:9px;padding:7px 11px;min-width:210px;transition:border-color var(--dur-base),box-shadow var(--dur-base);}
.ec-search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
.ec-search-box svg{width:15px;height:15px;color:var(--ink3);flex-shrink:0;}
.ec-search-box input{border:none;background:none;outline:none;color:var(--ink);font-size:13px;font-family:var(--font);width:100%;}
.ec-search-box input::placeholder{color:var(--ink3);}
.ec-search-box .ec-kbd{font-family:var(--mono);font-size:10px;color:var(--ink3);border:1px solid var(--border2);border-radius:4px;padding:1px 5px;flex-shrink:0;}
.ec-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border2);border-radius:11px;box-shadow:0 12px 32px rgba(0,0,0,.22);padding:6px;display:none;z-index:120;max-height:60vh;overflow-y:auto;}
.ec-search-results.open{display:block;}
.ec-search-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;text-decoration:none;}
.ec-search-item .ec-si-ico{font-size:16px;width:20px;text-align:center;flex-shrink:0;}
.ec-search-item .ec-si-txt{display:flex;flex-direction:column;line-height:1.3;}
.ec-search-item .ec-si-title{font-size:13.5px;color:var(--ink);font-weight:500;}
.ec-search-item .ec-si-cat{font-size:11px;color:var(--ink3);font-family:var(--mono);}
.ec-search-item.sel,.ec-search-item:hover{background:var(--accent-bg);}
.ec-search-item.sel .ec-si-title{color:var(--accent2);}
.ec-search-empty{padding:14px;font-size:12.5px;color:var(--ink3);text-align:center;font-style:italic;}
@media(max-width:900px){ .ec-search-box{min-width:150px;} .ec-search-box .ec-kbd{display:none;} }
@media(max-width:680px){
  /* On mobile the search box is relocated into the slide-down nav panel (see site.js) */
  .ec-search{margin-right:0;}
  #topNav .ec-search{display:flex;width:calc(100% - 24px);margin:6px 12px 8px;}
  #topNav .ec-search-box{min-width:0;width:100%;}
  #topNav .ec-search-box .ec-kbd{display:none;}
  #topNav .ec-search-results{max-height:50vh;}
  /* when it is NOT inside the nav (i.e. still in header on mobile), keep it hidden */
  .header-right > .ec-search{display:none;}
}

/* ---- "Related on this site" cross-link blocks (promoted site-wide v2.91.1) ---- */
.related-block{margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--border);}
.related-block .rb-head{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-family:var(--mono);margin-bottom:1rem;}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}
.related-card{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--border2);border-radius:var(--rl,12px);padding:12px 14px;text-decoration:none;transition:all var(--dur-base);}
.related-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.10);}
.related-card .rc-ico{font-size:18px;line-height:1.2;flex-shrink:0;}
.related-card .rc-txt{display:flex;flex-direction:column;gap:2px;}
.related-card .rc-name{font-size:13.5px;font-weight:600;color:var(--ink);}
.related-card .rc-why{font-size:11.5px;color:var(--ink2);line-height:1.45;}

/* ---- "How this was solved" worked-steps box (promoted site-wide v2.99.233) ----
   Single canonical implementation for every calculator's worked-solution display.
   One box = one accent color (set via inline style="color:..." on the container by
   the page's JS, matching whatever quantity is active/entered) — never mix colors
   within a single box. Call window.EC_renderSteps(container, opts) in assets/site.js
   to populate; do not hand-build this markup per page. */
.wk-steps{display:none;margin-top:14px;padding:14px 16px;background:var(--surface2,rgba(127,127,127,.08));border-radius:10px;border-left:3px solid currentColor;}
.wk-steps.show{display:block;}
.wk-steps .wk-title{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono);opacity:.7;margin-bottom:8px;}
.wk-steps .wk-group{font-size:11.5px;font-weight:600;font-family:var(--font);opacity:.8;margin:14px 0 6px;}
.wk-steps .wk-group:first-of-type{margin-top:4px;}
.wk-steps .wk-line{font-family:var(--mono);font-size:13.5px;line-height:1.9;display:flex;align-items:baseline;gap:9px;}
.wk-steps .wk-n{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;border-radius:5px;background:currentColor;font-size:10px;font-weight:700;flex-shrink:0;}
.wk-steps .wk-n span{color:var(--bg,#fff);}
.wk-steps .wk-eq{color:var(--ink,inherit);}
.wk-steps .wk-tag{font-family:var(--font);font-size:11px;opacity:.55;font-style:italic;white-space:nowrap;margin-left:11px;padding-left:11px;border-left:1px solid currentColor;}
@media(max-width:560px){.wk-steps .wk-tag{display:none;}}
.wk-steps .wk-note{font-size:12.5px;opacity:.85;margin-top:12px;line-height:1.55;font-family:var(--font);color:var(--ink);padding-top:10px;border-top:1px solid var(--border);}

/* ---- reduced-motion: neutralize the shared layer's motion for users who ask ----
   Overriding the duration tokens to 0 kills every tokenized transition above with no
   !important and without touching lab JS (labs guard their own rAF/keyframe animation
   independently). Also drops the one layout-shifting hover lift so nothing jumps. */
@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; }
  .related-card:hover{ transform:none; }
}

/* Back-to-top floating button — injected once by site.js (ecInitBackToTop). Fully
   theme-tokenized; fade/slide transitions use --dur-* which the reduced-motion block
   above zeroes, so it snaps instantly when motion is reduced. */
.back-to-top{position:fixed;right:var(--sp-6);bottom:var(--sp-6);z-index:1000;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;
  background:var(--surface);color:var(--ink);border:1px solid var(--border2);border-radius:999px;
  cursor:pointer;font-family:var(--font);box-shadow:0 4px 14px rgba(0,0,0,.18);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity var(--dur-base),transform var(--dur-base),background var(--dur-fast),border-color var(--dur-fast);}
.back-to-top:hover{background:var(--surface2);border-color:var(--accent);color:var(--accent);}
.back-to-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.back-to-top svg{width:20px;height:20px;display:block;}
.back-to-top.show-back-to-top{opacity:1;pointer-events:auto;transform:translateY(0);}