/* ====================================
   VOLTAGE DIVIDER CALCULATOR
   Path: javascripts/calculators/voltage-divider/voltage-divider.css
   ==================================== */

/* ====================================
   CIRCUIT DIAGRAM (SVG)
   ==================================== */
.voltage-divider-svg {
  max-width: 400px;
  width: 100%;
  height: auto;
}

/* Load resistor group - dimmed by default */
.voltage-divider-load-group {
  opacity: 0.3;
  transition: opacity 0.2s ease;
}

/* ====================================
   LOAD SECTION STATES
   ==================================== */
.voltage-divider-load-section {
  transition: opacity 0.2s ease;
}

.voltage-divider-load-section.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Result block dimmed when load disabled */
#voltage-divider-usl-block.is-disabled {
  opacity: 0.5;
}

/* ====================================
   RESISTANCE INPUTS
   ==================================== */
.voltage-divider-resistance-input {
  max-width: 80px;
}

/* ====================================
   DETAILS BLOCK — override MkDocs blue
   Uses topic HSL variables with calc()
   variants so color changes need zero
   intervention:
     border       → darker  (l - 20%)
     icon circle  → dark    (l - 10%)
     summary bg   → lighter (l + 30%)
   ==================================== */

/* Left border */
[dir=ltr] .md-typeset .subsection.is-clickable {
  border-color: hsl(var(--topic-h), var(--topic-s), calc(var(--topic-l) - 35%));
}

/* Summary background tint */
.md-typeset .admonition.subsection.is-clickable,
.md-typeset .subsection.is-clickable > summary {
  background-color: hsl(var(--topic-h), var(--topic-s), calc(var(--topic-l) + 30%));
}

/* Icon circle */
.md-typeset .subsection.is-clickable > summary::before {
  background-color: hsl(var(--topic-h), var(--topic-s), calc(var(--topic-l) - 25%));
}

/* ====================================
   COMPARISON COLUMN LAYOUT
   Vertical stack for ΔU, Écart%, and k
   ==================================== */
.voltage-divider-comparison-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: hsl(var(--topic-h), var(--topic-s), var(--topic-l));
  border-radius: 6px;
  margin-bottom: 16px;
}

.voltage-divider-comparison-column .block {
  justify-content: center;
}

/* ====================================
   LOAD MESSAGE BOX
   Status indicator (✅ ⚠️ ❌)
   ==================================== */
#voltage-divider-load-message {
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 6px;
  text-align: center;
  font-weight: 600;
  font-size: 1em;
}

/* ====================================
   LOAD EXPLANATION BOX
   Detailed text based on seuil simple
   ==================================== */
.voltage-divider-explanation {
  margin-top: 12px;
  padding: 16px;
  border-radius: 6px;
  line-height: 1.6;
  font-size: 0.95em;
}

/* Light load (k ≥ 10) */
.voltage-divider-explanation--light {
  background-color: hsl(120, 35%, 92%);
  border-left: 4px solid hsl(120, 45%, 45%);
  color: hsl(120, 40%, 25%);
}

/* Medium load (3 ≤ k < 10) */
.voltage-divider-explanation--medium {
  background-color: hsl(45, 70%, 92%);
  border-left: 4px solid hsl(45, 80%, 45%);
  color: hsl(45, 60%, 25%);
}

/* Heavy load (k < 3) */
.voltage-divider-explanation--heavy {
  background-color: hsl(0, 50%, 94%);
  border-left: 4px solid hsl(0, 60%, 50%);
  color: hsl(0, 50%, 30%);
}

/* ====================================
   RESPONSIVE
   ==================================== */
@media screen and (max-width: 600px) {
  .voltage-divider-comparison-column {
    padding: 12px;
    gap: 10px;
  }

  .voltage-divider-comparison-column .block {
    flex-wrap: wrap;
  }

  .voltage-divider-explanation {
    padding: 12px;
    font-size: 0.9em;
  }
}