/* ===== guide.css — article layout for STEM guide pages ===== */
/* Extends the shared design tokens in ../landing.css              */

/* ---------- layout: ToC sidebar + content ---------- */
.guide-layout{
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

@media(min-width:900px){
  .guide-layout{
    grid-template-columns: 200px 1fr;
  }
}

/* ---------- table of contents ---------- */
.guide-toc{
  display: none;                       /* hidden on mobile; <details> fallback shown instead */
}

@media(min-width:900px){
  .guide-toc{
    display: block;
    position: sticky;
    top: 20px;
    align-self: start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }
}

.guide-toc-inner{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guide-toc-inner li{
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.guide-toc-inner a{
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  transition: color .15s, background .15s;
}

.guide-toc-inner a:hover{
  color: var(--text);
  background: var(--panel);
}

.guide-toc-inner a.active{
  color: #d8ddff;
  background: rgba(102,126,234,0.18);
}

/* mobile ToC: collapsible <details> */
.guide-toc-mobile{
  display: block;
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0;
}

.guide-toc-mobile summary{
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 14px;
  color: #d7dcff;
  letter-spacing: .04em;
  text-transform: uppercase;
  list-style: none;
}

.guide-toc-mobile summary::-webkit-details-marker{ display:none; }
.guide-toc-mobile summary::marker{ content: ""; }

.guide-toc-mobile summary::before{
  content: "\f078";              /* fa chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  margin-right: 8px;
  display: inline-block;
  transition: transform .2s;
}

.guide-toc-mobile[open] summary::before{
  transform: rotate(180deg);
}

.guide-toc-mobile ul{
  list-style: none;
  padding: 0 16px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guide-toc-mobile li{
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.guide-toc-mobile a{
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.guide-toc-mobile a:hover{
  color: var(--text);
  background: var(--panel2);
}

@media(min-width:900px){
  .guide-toc-mobile{ display: none; }
}

/* ---------- sections ---------- */
.guide-section{
  scroll-margin-top: 24px;
  margin-bottom: 48px;
}

.guide-section:last-child{ margin-bottom: 0; }

.section-heading{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 800;
  color: #d7dcff;
  letter-spacing: .02em;
}

.section-heading i{
  color: var(--accentA);
  font-size: 20px;
  width: 28px;
  text-align: center;
}

/* ---------- prose ---------- */
.guide-prose{
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.guide-prose strong{ color: var(--text); }

.guide-prose em{ color: #c4cbe8; }

.guide-prose ul{
  display: block;
  list-style: disc;
  padding-left: 20px;
  margin: 10px 0;
}

.guide-prose ul li{
  padding: 0;
  margin: 0 0 6px;
  background: none;
  border: none;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- responsive grids ---------- */
.guide-grid-2{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-bottom: 20px;
}

.guide-grid-3{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-bottom: 20px;
}

@media(min-width:640px){
  .guide-grid-2{ grid-template-columns: repeat(2, 1fr); }
}

@media(min-width:768px){
  .guide-grid-3{ grid-template-columns: repeat(3, 1fr); }
}

/* ---------- cards ---------- */
.guide-card{
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.guide-card h3{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #d8ddff;
}

.guide-card p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.guide-card--blue{ border-color: rgba(59,130,246,0.35); }
.guide-card--orange{ border-color: rgba(249,115,22,0.35); }

.guide-card .card-icon{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 16px;
}

.card-icon--blue{
  background: rgba(59,130,246,0.15);
  color: #60a5fa;
}

.card-icon--orange{
  background: rgba(249,115,22,0.15);
  color: #fb923c;
}

.card-icon--yellow{
  background: rgba(234,179,8,0.15);
  color: #facc15;
}

.card-icon--green{
  background: rgba(34,197,94,0.15);
  color: #4ade80;
}

/* polarity badges */
.badge{
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}

.badge--pos{ background: rgba(34,197,94,0.15); color: #4ade80; }
.badge--neg{ background: rgba(239,68,68,0.15); color: #f87171; }

/* ---------- callout boxes ---------- */
.guide-callout{
  padding: 16px 20px;
  border-radius: 0 12px 12px 0;
  border-left: 4px solid;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.guide-callout strong{ display: block; margin-bottom: 4px; }

.guide-callout--info{
  background: rgba(102,126,234,0.08);
  border-color: var(--accentA);
  color: #c4d0ff;
}

.guide-callout--info strong{ color: #d8ddff; }

.guide-callout--warn{
  background: rgba(251,191,36,0.08);
  border-color: var(--warn);
  color: #ffe6a7;
}

.guide-callout--warn strong{ color: #ffd580; }

.guide-callout--project{
  background: linear-gradient(135deg, rgba(102,126,234,0.12), rgba(118,75,162,0.1));
  border-color: var(--accentA);
  border-radius: 16px;
  border-left: none;
  border: 2px solid rgba(102,126,234,0.3);
  padding: 24px;
  margin-bottom: 20px;
}

.guide-callout--project h3{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  color: #d8ddff;
}

.guide-callout--project p{
  color: #b8c4e8;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* ---------- definition box (anode/cathode) ---------- */
.guide-defbox{
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accentA);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 12px 0;
  list-style: none;
}

.guide-defbox li{
  padding: 0;
  margin: 0 0 8px;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.guide-defbox li:last-child{ margin-bottom: 0; }

/* ---------- panels (consuming/providing) ---------- */
.guide-panel{
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.guide-panel__header{
  background: var(--panel);
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: #d8ddff;
}

.guide-panel__header i{ font-size: 16px; }

.guide-panel__body{
  padding: 20px;
}

.guide-panel__body p{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}

/* polarity row */
.polarity-row{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.polarity-row:last-child{ margin-bottom: 0; }

.polarity-row h4{
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #d8ddff;
}

.polarity-row p{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Ohm's law featured box ---------- */
.ohm-box{
  background: linear-gradient(135deg, rgba(102,126,234,0.12), rgba(118,75,162,0.08));
  border: 1px solid rgba(102,126,234,0.25);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

@media(min-width:640px){
  .ohm-box{
    flex-direction: row;
    justify-content: space-between;
  }
}

.ohm-box h3{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  color: #d8ddff;
}

.ohm-box p{
  color: #a8b8d8;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 12px;
}

.ohm-formulas{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ohm-formulas li{
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: #c4cbe8;
  font-size: 15px;
  font-weight: 500;
}

.formula-tag{
  display: inline-block;
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 17px;
  background: var(--panel2);
  border: 1px solid var(--border);
  padding: 2px 10px;
  border-radius: 6px;
  margin-left: 8px;
  color: var(--text);
}

.ohm-triangle{
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.ohm-triangle__inner{
  text-align: center;
  width: 100%;
}

.ohm-triangle__top{
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  border-bottom: 2px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.ohm-triangle__bottom{
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}

.ohm-triangle__bottom .times{
  color: var(--muted);
}

/* ---------- interactive tools ---------- */
.guide-tool{
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  margin-bottom: 24px;
}

.guide-tool__header{
  background: linear-gradient(135deg, var(--accentA), var(--accentB));
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guide-tool__header h3{
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.guide-tool__header i{
  color: #fff;
  font-size: 16px;
}

.guide-tool__body{
  padding: 24px;
}

.guide-tool__body > p{
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 20px;
}

.guide-tool__footer{
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  font-size: 13px;
  color: var(--muted);
}

.guide-tool__footer strong{ color: #d8ddff; }

/* form controls */
.guide-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guide-field label{
  font-size: 12px;
  font-weight: 700;
  color: #d8ddff;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.guide-input{
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text);
  width: 100%;
  transition: border-color .15s;
}

.guide-input:focus{
  outline: none;
  border-color: var(--accentA);
  box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}

.guide-input::placeholder{ color: rgba(168,177,201,0.5); }

.guide-select{
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text);
  width: 100%;
  cursor: pointer;
}

.guide-select:focus{
  outline: none;
  border-color: var(--accentA);
}

.guide-hint{
  font-size: 11px;
  color: rgba(168,177,201,0.6);
  margin-top: 2px;
}

.guide-unit{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 13px;
  pointer-events: none;
}

.input-wrap{
  position: relative;
}

.input-wrap .guide-input{
  padding-right: 32px;
}

/* calculator result area */
.guide-result{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

@media(min-width:640px){
  .guide-result{
    flex-direction: row;
    justify-content: space-between;
  }
}

.guide-btn{
  background: linear-gradient(135deg, var(--accentA), var(--accentB));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}

.guide-btn:hover{ opacity: 0.9; transform: translateY(-1px); }
.guide-btn:active{ transform: translateY(0); }

.result-value{
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
}

.result-label{
  font-size: 13px;
  color: var(--muted);
}

.result-error{
  font-size: 13px;
  color: #f87171;
  display: none;
  margin-top: 4px;
}

.result-error.visible{ display: block; }

/* resistor visual */
.resistor-visual{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 0;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.resistor-wire{
  width: 48px;
  height: 3px;
  background: var(--muted);
  border-radius: 2px;
}

.resistor-body{
  width: 180px;
  height: 56px;
  background: #c4956e;
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  position: relative;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.resistor-band{
  width: 14px;
  height: 100%;
  border-radius: 2px;
}

.resistor-band--tolerance{
  position: absolute;
  right: 16px;
}

/* color code result */
.color-result{
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
}

.color-result .tolerance{
  font-size: 18px;
  font-weight: 400;
  color: var(--accentA);
  margin-left: 8px;
}

/* ---------- breadboard section ---------- */
.breadboard-wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

@media(min-width:900px){
  .breadboard-wrap{
    grid-template-columns: 1fr 1fr;
  }
}

.breadboard-explain h3{
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 800;
  color: #d8ddff;
}

.breadboard-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.breadboard-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.bb-dot{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.bb-dot--red{ background: #ef4444; }
.bb-dot--green{ background: #22c55e; }
.bb-dot--gray{ background: #9ca3af; border-radius: 4px; }

.breadboard-list strong{ color: #d8ddff; }
.breadboard-list p{
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.breadboard-svg{
  display: flex;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

/* ---------- guide header ---------- */
.guide-header{
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.guide-header .icon-circle{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(102,126,234,0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.guide-header .icon-circle i{
  font-size: 24px;
  color: var(--accentA);
}

.guide-header h1{
  font-size: 32px;
  background: linear-gradient(135deg, var(--accentA), var(--accentB));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 8px;
  letter-spacing: .04em;
}

@media(min-width:640px){
  .guide-header h1{ font-size: 40px; }
}

.guide-header .lead{
  max-width: 60ch;
  margin: 0 auto;
}

/* ---------- guide footer ---------- */
.guide-footer{
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.guide-footer p{
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
}

.guide-footer a{
  color: #d8ddff;
  font-weight: 700;
}

.guide-footer a:hover{ color: #fff; }

.guide-footer .footer-links{
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* ---------- SPST card ---------- */
.guide-card ul{
  display: block;
  list-style: disc;
  padding-left: 20px;
  margin: 8px 0 0;
}

.guide-card ul li{
  padding: 0;
  margin: 0 0 6px;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- scrollbar (dark) ---------- */
::-webkit-scrollbar{ width: 8px; }
::-webkit-scrollbar-track{ background: var(--bg0); }
::-webkit-scrollbar-thumb{ background: rgba(168,177,201,0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(168,177,201,0.4); }