/* ---------- Page layout ---------- */

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  overflow-x: hidden;
  background: #f3f6f8;
  color: #1f2933;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
input {
  font: inherit;
}

.panels {
  --page-gap: clamp(10px, 1.5vw, 20px);

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--page-gap);

  width: min(1500px, 100%);
  margin: 0 auto;
  padding: var(--page-gap);
}

.panel {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
  min-width: 0;
}

.panel-title {
  margin: 0;
  color: #263746;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 650;
  line-height: 1.25;
}

/* ---------- SVG containers ---------- */

/*
When the panels are side by side, both SVG containers
have exactly the same height.
*/

.svg-wrap {
  width: 100%;
  height: min(58vh, 520px);
  min-width: 0;
}

svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;

  border: 1px solid #cbd5dc;
  border-radius: 10px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgb(31 41 51 / 8%),
    0 5px 16px rgb(31 41 51 / 5%);

  font-family: math;
}

/*
The SVGs use preserveAspectRatio="xMidYMid meet",
so their contents will scale proportionally and will
not be stretched even though the SVG boxes match.
*/

/* ---------- Control cards ---------- */

.controls-card {
  display: grid;
  gap: 12px;

  min-height: 0;
  padding: clamp(10px, 1.5vw, 15px);

  border: 1px solid #d8e0e5;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgb(31 41 51 / 5%);
}

.control-section {
  display: grid;
  align-content: start;
  gap: 8px;
}

.control-section + .control-section {
  padding-top: 12px;
  border-top: 1px solid #e4e9ed;
}

.control-heading {
  margin: 0;
  color: #52616d;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.075em;
  line-height: 1;
  text-transform: uppercase;
}

/* ---------- Playback controls ---------- */

.playback-controls {
  grid-template-columns: minmax(180px, 1fr) 220px;
}

.playback-controls .control-heading {
  grid-column: 1 / -1;
}

.speed-control {
  display: grid;
  grid-template-columns: auto minmax(130px, 1fr);
  align-items: center;
  gap: 12px;

  min-height: 42px;
  color: #33414c;
  font-size: 0.95rem;
  font-weight: 600;
}

.speed-control input[type="range"] {
  width: 100%;
  accent-color: #276fa8;
  cursor: pointer;
}

.button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.control-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 42px;
  padding: 8px 12px;

  border: 1px solid transparent;
  border-radius: 7px;

  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 80ms ease;
}

.control-button:hover {
  box-shadow: 0 2px 6px rgb(31 41 51 / 12%);
}

.control-button:active {
  transform: translateY(1px);
}

.primary-button {
  border-color: #276fa8;
  background: #276fa8;
  color: #ffffff;
}

.primary-button:hover {
  border-color: #1f6094;
  background: #1f6094;
}

.secondary-button {
  border-color: #b8c5ce;
  background: #ffffff;
  color: #354550;
}

.secondary-button:hover {
  border-color: #8fa1ad;
  background: #f7f9fa;
}

.button-icon {
  display: inline-block;
  width: 1em;
  text-align: center;
}

/* ---------- Toggle controls ---------- */

.toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.toggle-control {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;

  min-height: 46px;
  padding: 8px 11px;

  border: 1px solid #d7e0e6;
  border-radius: 7px;
  background: #f9fbfc;
  color: #354550;

  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;

  cursor: pointer;
  user-select: none;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.toggle-control:hover {
  border-color: #9cb3c3;
  background: #ffffff;
}

.toggle-control:has(input:checked) {
  border-color: #8bb5d2;
  background: #edf6fc;
  color: #1d5d8d;
}

.toggle-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.toggle-switch {
  position: relative;
  display: block;

  width: 36px;
  height: 20px;

  border: 1px solid #9cabb5;
  border-radius: 999px;
  background: #c8d1d7;

  transition:
    background-color 140ms ease,
    border-color 140ms ease;
}

.toggle-switch::after {
  position: absolute;
  top: 2px;
  left: 2px;

  width: 14px;
  height: 14px;

  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgb(31 41 51 / 25%);

  content: "";
  transition: transform 140ms ease;
}

.toggle-control input:checked + .toggle-switch {
  border-color: #276fa8;
  background: #276fa8;
}

.toggle-control input:checked + .toggle-switch::after {
  transform: translateX(16px);
}

.toggle-label {
  min-width: 0;
}

/* ---------- Keyboard focus ---------- */

.control-button:focus-visible,
.toggle-control:has(input:focus-visible),
.speed-control input:focus-visible {
  outline: 3px solid rgb(39 111 168 / 30%);
  outline-offset: 2px;
}

/* ---------- Responsive layout ---------- */

@media (max-width: 950px) {
  .panels {
    grid-template-columns: 1fr;
    width: min(760px, 100%);
  }

  /*
  Once the panels stack, they no longer need matching heights.
  Each SVG returns to the proportions of its own viewBox.
  */

  .svg-wrap {
    height: auto;
  }

  svg {
    height: auto;
  }

  #svg-canvas {
    aspect-ratio: 600 / 480;
  }

  #graph-canvas {
    aspect-ratio: 600 / 400;
  }
}

@media (max-width: 600px) {
  .panels {
    padding: 12px;
    gap: 22px;
  }

  .playback-controls {
    grid-template-columns: 1fr;
  }

  .playback-controls .control-heading {
    grid-column: auto;
  }

  .speed-control {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .button-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toggle-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- SVG-specific styles ---------- */

.hAxisLabel {
  text-anchor: start;
  dominant-baseline: middle;
  font-size: 1.75em;
  font-family: math;
}

.tickLabel {
  font-family: math;
}

g.given text,
text.given {
  font: bold 1.5em math;
  stroke: white;
  paint-order: stroke;
  stroke-width: 5;
  fill: green;
}

.hLineLabel {
  font: bold 1.5em sans-serif;
  stroke: white;
  paint-order: stroke;
  stroke-width: 5;
  fill: purple;
  font-style: italic;
}

.maxminLine {
  stroke-width: 2;
  stroke: black;
}

#midLine {
  stroke-width: 2;
  stroke: black;
  stroke-dasharray: 7 3;
}

#sinCurve {
  fill: none;
  stroke: darkblue;
  stroke-width: 4;
}

.labeledPoint {
  font-size: 1.1em;
  font-family: math;
  fill: teal;
}