/* ==========================================================================
   How it works — page-specific diagrams

   Loaded only by how-it-works.html. Everything reads from tokens.css; the
   shared base, navigation, cards, and footer come from styles.css.
   ========================================================================== */



/* ==========================================================================
   Illustrations shared by the component and culturing panels
   ========================================================================== */

.ill {
  width: calc(var(--unit) * 5.5);
  height: auto;
  margin-bottom: var(--space-4);
}

.ill--cell {
  width: calc(var(--unit) * 4);
}

.ill__edge path,
.ill__edge rect {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.45;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ill__node circle {
  fill: var(--accent);
}

.ill__dashed {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.4;
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

.ill__solid {
  fill: var(--accent);
}

.ill__solid-ring {
  fill: color-mix(in srgb, var(--accent) 18%, transparent);
  stroke: var(--accent);
  stroke-width: 1.5;
}

/* ==========================================================================
   Component panels
   ========================================================================== */

.part {
  padding: var(--space-8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  transition: border-color var(--duration-medium) var(--ease),
    transform var(--duration-medium) var(--ease);
}

.part:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.part__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-3);
}

.part__body {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.grid + .stack,
.block + .stack,
.block + .chain {
  margin-top: var(--space-16);
}

.stack + .grid,
.chain + .steps {
  margin-top: var(--space-16);
}

/* ==========================================================================
   Conventional computing against a BPU
   ========================================================================== */

.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-16);
}

.compare__side {
  padding: var(--space-8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.compare__side--core {
  border-color: var(--accent-border);
}

.compare__label {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-6);
}

.compare__side--core .compare__label {
  color: var(--accent);
}

.compare__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: calc(var(--unit) * 11);
  justify-content: center;
}

.compare__layer {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--text-secondary);
}

/* The BPU side collapses the three layers into a single block. */
.compare__merged {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-base));
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--accent);
}

.compare__note {
  margin-top: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* ==========================================================================
   Training loop
   ========================================================================== */

.loop {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-12);
  align-items: center;
  margin-top: var(--space-16);
}

.loop__figure svg {
  width: 100%;
  height: auto;
}

.loop__ring {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 3 7;
}

/* A short arc travelling the ring, showing the direction of the cycle. */
.loop__arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 90 601;
  transform-origin: 310px 170px;
  animation: loop-spin 7s linear infinite;
}

@keyframes loop-spin {
  to {
    transform: rotate(360deg);
  }
}

.loop__nodes circle {
  fill: var(--surface-sunken);
  stroke: var(--accent);
  stroke-width: 2;
}

.loop__labels text {
  fill: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  .loop {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Auto margins shrink a grid item to its content, and an SVG with no
     intrinsic width falls back to 300px, so the width is set explicitly. */
  .loop__figure {
    width: 100%;
    max-width: calc(var(--unit) * 34);
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  .compare {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .part {
    padding: var(--space-6);
  }
}