/* ==========================================================================
   EL BADR Industries — Interactive Planetary Gear Guide (learn-planetary.html)
   Loads on top of learn.css and reuses its playground/glossary components.
   ========================================================================== */

/* SVG member colours ------------------------------------------------------- */
.pl-sungear { fill: var(--red); stroke: rgba(0,0,0,0.12); stroke-width: 0.6; }
.pl-planetgear { fill: var(--gray); stroke: rgba(0,0,0,0.12); stroke-width: 0.6; }
[data-theme="dark"] .pl-planetgear { fill: #6f6f7a; }
.pl-ringgear { fill: var(--steel); stroke: rgba(0,0,0,0.2); stroke-width: 0.6; }
[data-theme="dark"] .pl-ringgear { fill: #3a3a41; }
.pl-arm { stroke: #b9975b; opacity: 0.38; }
.pl-armhub { fill: #b9975b; opacity: 0.55; }
.pl-pin { fill: var(--surface); stroke: #b9975b; stroke-width: 2; }
.pl-mark { fill: #ffffff; opacity: 0.85; }
[data-theme="dark"] .pl-mark { fill: #d9d9de; }

/* Legend ------------------------------------------------------------------- */
.pl-legend {
  list-style: none; padding: 0; margin: 0.8rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.45rem 0.9rem; justify-content: center;
}
.pl-legend li {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-head); font-weight: 600; font-size: 0.8rem;
  color: var(--muted); border: 1px solid transparent;
  border-radius: 999px; padding: 0.18rem 0.6rem;
}
.pl-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.pl-swatch--sun { background: var(--red); }
.pl-swatch--planet { background: var(--gray); }
.pl-swatch--ring { background: var(--steel); }
[data-theme="dark"] .pl-swatch--ring { background: #3a3a41; }
.pl-swatch--carrier { background: #b9975b; }
.pl-legend .pl-fixedtag { display: none; color: var(--red); font-size: 0.72rem; }
.pl-legend li.is-fixed { border-color: rgba(210,14,16,0.45); color: var(--ink); }
.pl-legend li.is-fixed .pl-fixedtag { display: inline; }

/* Config caption under the segmented control */
#cfg-note { min-height: 2.2em; }

/* Validity states on result cards */
.gp-result__val.is-bad { color: var(--red); }

/* Single square stage: keep the drawing generous on all screens */
.pl-diagram .diagram-canvas { min-height: 420px; }
@media (max-width: 880px) {
  .pl-diagram { height: auto !important; }
  .pl-diagram .diagram-canvas { min-height: 0; height: min(88vw, 440px); }
}