/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Double Pendulum - Chaotic Physics Simulation                          - */
/* - Author: Cylian                                                         - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* =========================================================================
   Variables
   ========================================================================= */
:root {
  /* Primary pendulum colors */
  --pendulum-color-rod: var(--text-color-secondary);
  --pendulum-color-pivot: var(--color-grey-500);
  --pendulum-color-bob1: var(--color-blue);
  --pendulum-color-bob2: var(--color-red);
  --pendulum-color-trail: var(--color-teal);
  /* Ghost pendulum colors (for chaos visualization) */
  --pendulum-color-bob1-ghost: var(--color-purple);
  --pendulum-color-bob2-ghost: var(--color-yellow);
  --pendulum-color-trail-ghost: var(--color-orange); }

/* =========================================================================
   Canvas
   ========================================================================= */
/* =========================================================================
   Controls
   ========================================================================= */
.pendulum-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 */ }
  .pendulum-controls button.button {
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer; }
  .pendulum-controls .is-play {
    display: flex; }
  .pendulum-controls .is-pause {
    display: none; }
  .pendulum-controls.is-running .is-play {
    display: none; }
  .pendulum-controls.is-running .is-pause {
    display: flex; }

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

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

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

/* =========================================================================
   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; }