/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Von Neumann's Elephant - Parametric Curve Visualization                 - */
/* - Author: Cylian                                                          - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* =========================================================================
   Variables
   ========================================================================= */
:root {
  --elephant-color-body: var(--color-accent); }

/* =========================================================================
   Canvas
   ========================================================================= */
#elephant-canvas {
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: block;
  background: var(--background-color-surface);
  border-radius: var(--border-radius); }

/* =========================================================================
   Controls
   ========================================================================= */
.elephant-controls {
  display: flex;
  justify-content: center;
  gap: var(--layout-spacing);
  margin-top: var(--layout-spacing);
  /* Reset button styling for native buttons */
  /* State-based button visibility */
  /* Wiggle toggle button */ }
  .elephant-controls button.button {
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer; }
  .elephant-controls .is-play {
    display: flex; }
  .elephant-controls .is-pause {
    display: none; }
  .elephant-controls.is-running .is-play {
    display: none; }
  .elephant-controls.is-running .is-pause {
    display: flex; }
  .elephant-controls #btn-wiggle {
    opacity: 0.6;
    transition: opacity 0.2s ease; }
    .elephant-controls #btn-wiggle.is-active {
      opacity: 1;
      color: var(--color-accent); }
    .elephant-controls #btn-wiggle:hover {
      opacity: 1; }

/* =========================================================================
   Options (sliders)
   ========================================================================= */
.elephant-options {
  display: flex;
  flex-direction: column;
  gap: calc(var(--layout-spacing) * 0.75);
  /* Fieldset styling for grouped parameters */ }
  .elephant-options fieldset {
    border: none;
    padding: 0;
    margin: 0; }
    .elephant-options fieldset legend {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-color-primary);
      margin-bottom: 0.5rem; }
  .elephant-options .option {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; }
    .elephant-options .option label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.875rem; }
      .elephant-options .option label span {
        color: var(--text-color-secondary);
        font-family: var(--font-family-mono);
        min-width: 4rem;
        text-align: right; }
    .elephant-options .option input[type="range"] {
      width: 100%;
      height: 4px;
      appearance: none;
      background: var(--draw-color-surface);
      border-radius: 2px;
      cursor: pointer; }
      .elephant-options .option input[type="range"]:focus {
        outline: 2px solid var(--draw-color-primary);
        outline-offset: 2px; }
      .elephant-options .option input[type="range"]:focus:not(:focus-visible) {
        outline: none; }
      .elephant-options .option input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--draw-color-primary);
        cursor: pointer;
        transition: transform 0.1s ease; }
        .elephant-options .option input[type="range"]::-webkit-slider-thumb:hover {
          transform: scale(1.2); }
      .elephant-options .option input[type="range"]::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border: none;
        border-radius: 50%;
        background: var(--draw-color-primary);
        cursor: pointer;
        transition: transform 0.1s ease; }
      .elephant-options .option input[type="range"]:hover::-moz-range-thumb {
        transform: scale(1.2); }

/* =========================================================================
   Statistics
   ========================================================================= */
.elephant-stats dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  margin: 0; }
  .elephant-stats dl dt {
    color: var(--text-color-secondary);
    font-size: 0.875rem; }
  .elephant-stats dl dd {
    margin: 0;
    text-align: right;
    font-family: var(--font-family-mono);
    font-size: 0.875rem;
    color: var(--text-color-primary); }

/* =========================================================================
   Legend
   ========================================================================= */
.elephant-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Reset list styling */ }
  .elephant-legend .legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; }
  .elephant-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem; }
    .elephant-legend .legend-item .swatch {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      flex-shrink: 0; }
      .elephant-legend .legend-item .swatch.body {
        background: var(--elephant-color-body); }
    .elephant-legend .legend-item span {
      color: var(--text-color-secondary); }

/* =========================================================================
   Quote section
   ========================================================================= */
.elephant-quote {
  margin-top: var(--layout-spacing);
  padding: var(--layout-spacing);
  background: var(--draw-color-surface);
  border-radius: var(--border-radius);
  border-left: 4px solid var(--color-accent); }
  .elephant-quote blockquote {
    margin: 0;
    padding: 0;
    font-style: italic;
    color: var(--text-color-secondary);
    line-height: 1.6; }
    .elephant-quote blockquote cite {
      display: block;
      margin-top: 0.5rem;
      font-style: normal;
      font-size: 0.875rem;
      color: var(--text-color-tertiary); }
      .elephant-quote blockquote cite::before {
        content: "\2014 "; }

/* =========================================================================
   Algorithm section
   ========================================================================= */
layout-after .algorithm h4 {
  margin-top: var(--layout-spacing);
  margin-bottom: 0.5rem;
  color: var(--text-color-primary); }

layout-after .algorithm p {
  color: var(--text-color-secondary);
  line-height: 1.6; }

layout-after .algorithm code {
  font-family: var(--font-family-mono);
  background: var(--draw-color-surface);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.875em; }

layout-after .algorithm .equation {
  display: block;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--draw-color-surface);
  border-radius: var(--border-radius);
  font-family: var(--font-family-mono);
  text-align: center;
  overflow-x: auto; }