/* Programmatic class pages — figures extracted from the Sarthi whiteboard CSS.
   The SVGs are authored by the class engine; this file only themes them for
   the cream "textbook page" card used on eduspheria.com/class/... */

.class-figure {
  --wb-ink: #1f2937;
  --wb-ink-soft: #374151;
  --wb-ink-faint: #6b7280;
  --wb-line: #e5e7eb;
  --wb-card-solid: #ffffff;
  --wb-paper-2: #f8fafc;
  --wb-accent: #0d9488;
  --wb-accent-soft: #ccfbf1;
  --wb-amber: #b45309;
  background: #fdfcf7;
  color: #1f2937;
}

.class-figure svg { display: block; width: 100%; height: auto; }
.class-figure text { font-family: 'Caveat', 'Bradley Hand', cursive; fill: var(--wb-ink); }
.class-figure .wb-semantic-diagram { display: block; width: 100%; max-height: 430px; margin: 0 auto; }
.class-figure .wb-diagram-wrap {
  padding: 0.6rem 0.2rem;
  overflow-x: auto;
  background: transparent;
}
.class-figure .wb-diagram-wrap svg {
  max-width: 100%;
  height: auto;
}
.class-figure .wb-semantic-diagram {
  display: block;
  width: 100%;
  max-height: 430px;
  margin: 0 auto;
}
.class-figure .wb-semantic-diagram text {
  font-family: 'Caveat', 'Bradley Hand', cursive;
  fill: var(--wb-ink);
}
.class-figure .wb-semantic-diagram .wb-sd-title {
  font-size: 27px;
  font-weight: 700;
  fill: var(--wb-ink);
}
.class-figure .wb-semantic-diagram .wb-sd-text {
  font-weight: 600;
  fill: var(--wb-ink);
}
.class-figure .wb-semantic-diagram .wb-sd-node {
  fill: var(--wb-card-solid);
  stroke: var(--wb-ink);
  stroke-width: 2.2;
}
.class-figure .wb-semantic-diagram .wb-sd-edge, .class-figure .wb-semantic-diagram .wb-sd-force {
  fill: none;
  stroke: var(--wb-ink-soft);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.class-figure .wb-semantic-diagram .wb-sd-force {
  stroke: var(--wb-amber);
}
.class-figure .wb-semantic-diagram .wb-sd-arrowhead {
  fill: var(--wb-ink-soft);
  stroke: none;
}
.class-figure .wb-semantic-diagram .wb-sd-edge-label, .class-figure .wb-semantic-diagram .wb-sd-force-label {
  font-size: 16px;
  font-weight: 600;
  fill: var(--wb-ink-soft);
}
.class-figure .wb-semantic-diagram .wb-sd-axis {
  stroke: var(--wb-ink);
  stroke-width: 2.2;
}
.class-figure .wb-semantic-diagram .wb-sd-axis-label, .class-figure .wb-semantic-diagram .wb-sd-legend {
  font-size: 17px;
  font-weight: 600;
  fill: var(--wb-ink-soft);
}
.class-figure .wb-semantic-diagram .wb-sd-grid {
  stroke: var(--wb-line);
  stroke-width: 1;
}
.class-figure .wb-semantic-diagram .wb-sd-tick {
  font-size: 13px;
  fill: var(--wb-ink-faint);
}
.class-figure .wb-semantic-diagram .wb-sd-series-0 {
  fill: none;
  stroke: #2563eb;
  stroke-width: 3;
}
.class-figure .wb-semantic-diagram .wb-sd-series-1 {
  fill: none;
  stroke: #b45309;
  stroke-width: 3;
}
.class-figure .wb-semantic-diagram .wb-sd-series-2 {
  fill: none;
  stroke: #15803d;
  stroke-width: 3;
}
.class-figure .wb-semantic-diagram .wb-sd-point {
  fill: var(--wb-accent);
}
.class-figure .wb-semantic-diagram .wb-sd-point-label {
  font-size: 16px;
  font-weight: 600;
  fill: var(--wb-ink-soft);
}
.class-figure .wb-semantic-diagram .wb-sd-table-header {
  fill: var(--wb-accent-soft);
  stroke: var(--wb-line);
}
.class-figure .wb-semantic-diagram .wb-sd-table-row {
  fill: var(--wb-card-solid);
}
.class-figure .wb-semantic-diagram .wb-sd-body {
  fill: var(--wb-paper-2);
  stroke: var(--wb-ink);
  stroke-width: 2.2;
}
.class-figure .wb-cell-membrane {
  fill: var(--wb-paper-2);
  stroke: var(--wb-ink);
  stroke-width: 2.4;
}
.class-figure .wb-cell-wall {
  fill: none;
  stroke: #15803d;
  stroke-width: 4;
}
.class-figure .wb-cell-nucleus {
  fill: var(--wb-accent-soft);
  stroke: var(--wb-accent);
  stroke-width: 2.4;
}
.class-figure .wb-cell-nucleolus {
  fill: var(--wb-accent);
  opacity: 0.55;
}
.class-figure .wb-cell-vacuole {
  fill: var(--wb-accent-soft);
  stroke: var(--wb-accent);
  stroke-width: 2;
  opacity: 0.7;
}
.class-figure .wb-cell-mito {
  fill: #f5c26b;
  stroke: #b45309;
  stroke-width: 2;
}
.class-figure .wb-cell-cristae {
  fill: none;
  stroke: #b45309;
  stroke-width: 2;
  stroke-linecap: round;
}
.class-figure .wb-cell-chloroplasts ellipse {
  fill: #bbf7d0;
  stroke: #15803d;
  stroke-width: 2;
}
.class-figure .wb-cell-ribosomes circle {
  fill: var(--wb-ink-soft);
}
.class-figure .wb-cell-nucleoid {
  fill: none;
  stroke: var(--wb-accent);
  stroke-width: 4;
  stroke-linecap: round;
}
.class-figure .wb-cell-flagellum {
  fill: none;
  stroke: var(--wb-ink-soft);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.class-figure .wb-cell-leader {
  fill: none;
  stroke: var(--wb-ink-faint);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
}
.class-figure .wb-semantic-diagram .wb-cell-label {
  font-size: 17px;
  font-weight: 600;
  fill: var(--wb-ink-soft);
}
.class-figure html[data-theme='dark'] .wb-cell-mito {
  fill: #7c4a12;
  stroke: #f5c26b;
}
.class-figure html[data-theme='dark'] .wb-cell-cristae {
  stroke: #f5c26b;
}
.class-figure html[data-theme='dark'] .wb-cell-chloroplasts ellipse {
  fill: #14532d;
  stroke: #6ee7a8;
}
.class-figure html[data-theme='dark'] .wb-cell-wall {
  stroke: #6ee7a8;
}
.class-figure .wb-reaction-box {
  fill: var(--wb-card-solid);
  stroke: var(--wb-ink);
  stroke-width: 1.8;
}
.class-figure .wb-reaction-formula {
  font-size: 25px;
  font-weight: 700;
  fill: var(--wb-ink);
}
.class-figure .wb-reaction-label {
  font-size: 14px;
  font-weight: 600;
  fill: var(--wb-ink-soft);
}
.class-figure .wb-reaction-plus {
  font-size: 25px;
  font-weight: 700;
  fill: var(--wb-ink-soft);
}
.class-figure .wb-reaction-condition {
  font-size: 16px;
  font-weight: 600;
  fill: var(--wb-accent);
}
.class-figure .wb-reaction-arrow {
  stroke: var(--wb-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.class-figure .wb-reaction-arrowhead {
  fill: var(--wb-ink);
}
.class-figure .wb-semantic-diagram .wb-geo-point {
  fill: var(--wb-accent);
  stroke: var(--wb-card-solid);
  stroke-width: 2;
}
.class-figure .wb-semantic-diagram .wb-geo-label, .class-figure .wb-semantic-diagram .wb-geo-segment-label, .class-figure .wb-semantic-diagram .wb-geo-circle-label, .class-figure .wb-semantic-diagram .wb-geo-angle-label {
  font-weight: 600;
  fill: var(--wb-ink);
}
.class-figure .wb-semantic-diagram .wb-geo-segment-label, .class-figure .wb-semantic-diagram .wb-geo-circle-label, .class-figure .wb-semantic-diagram .wb-geo-angle-label {
  fill: var(--wb-ink-soft);
  font-size: 14px;
}
.class-figure .wb-semantic-diagram .wb-geo-segment {
  stroke: var(--wb-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.class-figure .wb-semantic-diagram .wb-geo-segment.dashed {
  stroke-dasharray: 8 6;
}
.class-figure .wb-semantic-diagram .wb-geo-circle {
  fill: none;
  stroke: var(--wb-accent);
  stroke-width: 2;
  opacity: 0.9;
}
.class-figure .wb-semantic-diagram .wb-geo-circle-label, .class-figure .wb-semantic-diagram .wb-geo-angle-label {
  fill: var(--wb-accent);
}
.class-figure .wb-semantic-diagram .wb-geo-angle {
  fill: none;
  stroke: var(--wb-accent);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.class-figure .wb-semantic-diagram .wb-number-axis {
  stroke: var(--wb-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.class-figure .wb-semantic-diagram .wb-number-arrowhead {
  fill: var(--wb-ink);
}
.class-figure .wb-semantic-diagram .wb-number-tick {
  stroke: var(--wb-ink-soft);
  stroke-width: 2;
  stroke-linecap: round;
}
.class-figure .wb-semantic-diagram .wb-number-tick-label {
  font-size: 14px;
  font-weight: 500;
  fill: var(--wb-ink-soft);
}
.class-figure .wb-semantic-diagram .wb-number-point {
  fill: var(--wb-accent);
  stroke: var(--wb-card-solid);
  stroke-width: 2;
}
.class-figure .wb-semantic-diagram .wb-number-point-label {
  font-size: 16px;
  font-weight: 700;
  fill: var(--wb-accent);
}
.class-figure .wb-semantic-diagram .wb-number-interval {
  stroke: var(--wb-accent);
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0.7;
}
.class-figure .wb-semantic-diagram .wb-number-interval-end {
  fill: var(--wb-accent);
  stroke: var(--wb-card-solid);
  stroke-width: 2;
}
.class-figure .wb-semantic-diagram .wb-number-interval-label {
  font-size: 15px;
  font-weight: 600;
  fill: var(--wb-accent);
}
.class-figure .wb-semantic-diagram .wb-area-grid {
  fill: none;
  stroke: var(--wb-ink);
  stroke-width: 2.4;
}
.class-figure .wb-semantic-diagram .wb-area-grid-line {
  stroke: var(--wb-ink-soft);
  stroke-width: 1.2;
}
.class-figure .wb-semantic-diagram .wb-area-row {
  fill: var(--wb-accent);
  fill-opacity: 0.14;
  stroke: none;
}
.class-figure .wb-semantic-diagram .wb-area-row-label, .class-figure .wb-semantic-diagram .wb-area-col-label {
  font-size: 15px;
  font-weight: 600;
  fill: var(--wb-ink-soft);
}
.class-figure .wb-semantic-diagram .wb-area-total {
  font-size: 18px;
  font-weight: 700;
  fill: var(--wb-ink);
}
.class-figure .wb-semantic-diagram .wb-tree-edge {
  stroke: var(--wb-ink-soft);
  stroke-width: 2;
  stroke-linecap: round;
}
.class-figure .wb-semantic-diagram .wb-tree-node {
  fill: var(--wb-card-solid);
  stroke: var(--wb-accent);
  stroke-width: 2.4;
}
.class-figure .wb-semantic-diagram .wb-tree-leaf {
  fill: var(--wb-card-solid);
  stroke: var(--wb-ink-soft);
  stroke-width: 1.8;
}
.class-figure .wb-semantic-diagram .wb-tree-root {
  fill: var(--wb-accent);
  stroke: var(--wb-accent);
}
.class-figure .wb-semantic-diagram .wb-tree-root-label {
  font-size: 16px;
  font-weight: 700;
  fill: var(--wb-card-solid);
}
.class-figure .wb-semantic-diagram .wb-tree-label {
  font-size: 16px;
  font-weight: 600;
  fill: var(--wb-ink);
}
.class-figure .wb-semantic-diagram .wb-tree-prob {
  font-size: 14px;
  font-weight: 700;
  fill: var(--wb-accent);
}
.class-figure .wb-semantic-diagram .wb-tree-outcome {
  font-size: 13px;
  font-weight: 600;
  fill: var(--wb-ink-soft);
}
.class-figure .wb-semantic-diagram .wb-number-interval-end.open {
  fill: var(--wb-card-solid);
  stroke: var(--wb-accent);
}
.class-figure .wb-semantic-diagram .wb-ds-box {
  fill: var(--wb-card-solid);
  stroke: var(--wb-ink);
  stroke-width: 2.2;
}
.class-figure .wb-semantic-diagram .wb-ds-box.highlight {
  fill: var(--wb-accent-soft);
  stroke: var(--wb-accent);
}
.class-figure .wb-semantic-diagram .wb-ds-value {
  font-size: 19px;
  font-weight: 700;
  fill: var(--wb-ink);
}
.class-figure .wb-semantic-diagram .wb-ds-index {
  font-size: 13px;
  font-weight: 500;
  fill: var(--wb-ink-soft);
}
.class-figure .wb-semantic-diagram .wb-ds-arrow, .class-figure .wb-semantic-diagram .wb-ds-pointer-arrow {
  fill: none;
  stroke: var(--wb-ink-soft);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.class-figure .wb-semantic-diagram .wb-ds-pointer-arrow {
  stroke: var(--wb-accent);
}
.class-figure .wb-semantic-diagram .wb-ds-arrowhead {
  fill: var(--wb-ink-soft);
}
.class-figure .wb-semantic-diagram .wb-ds-pointer {
  font-size: 15px;
  font-weight: 700;
  fill: var(--wb-accent);
}
.class-figure .wb-semantic-diagram .wb-ds-label {
  font-size: 16px;
  font-weight: 600;
  fill: var(--wb-accent);
}
.class-figure .wb-semantic-diagram .wb-cs-tree-edge {
  stroke: var(--wb-ink-soft);
  stroke-width: 2;
  stroke-linecap: round;
}
.class-figure .wb-semantic-diagram .wb-cs-tree-arrowhead {
  fill: var(--wb-ink-soft);
}
.class-figure .wb-semantic-diagram .wb-cs-tree-node {
  fill: var(--wb-card-solid);
  stroke: var(--wb-ink);
  stroke-width: 2.2;
}
.class-figure .wb-semantic-diagram .wb-cs-tree-node.root {
  fill: var(--wb-accent-soft);
  stroke: var(--wb-accent);
}
.class-figure .wb-semantic-diagram .wb-cs-tree-label {
  font-size: 14px;
  font-weight: 600;
  fill: var(--wb-ink);
}

/* Page shell: keep a comfortable edge on phones (the site-wide mobile
   `.container` rule forces 1rem, which is too tight for these long pages). */
@media (max-width: 767px) {
  .class-shell {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

#class-outline, #faq { scroll-margin-top: 5rem; }

/* Two-column layouts. Tailwind's extractor drops arbitrary minmax() values
   that contain commas, so these live here instead of in the class attribute. */
.chapter-grid { display: grid; }
@media (min-width: 768px) {
  .chapter-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.faq-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}