.sortLab {
  --labInk: var(--bodyText);
  --labSurface: var(--pageBackground);
  --labLine: var(--structureBorder);
  --labSoft: color-mix(in srgb, var(--primaryLightest) 30%, var(--pageBackground));
  --labShadow: color-mix(in srgb, var(--darkText) 14%, transparent);
  color: var(--labInk);
  margin-top: 30px;
}
.sortLab *, .sortLab *::before, .sortLab *::after { box-sizing: border-box; }
#mainContent .sortLab h2, #mainContent .sortLab h3 {
  border: 0;
  margin: 0 0 12px;
  padding: 0;
}
#mainContent .sortLab h2 { font-size: 30px; }
#mainContent .sortLab h3 { font-size: 20px; }
#mainContent .sortLab p { margin: 10px 0; padding: 0; line-height: 1.5; }
.sortLab .visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sortStage, .labResult {
  min-width: 0;
  padding: 16px;
  border: 3px solid var(--labLine);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--labSurface), var(--labSoft));
  box-shadow: 0 8px 0 var(--labShadow);
}
.labResult { margin-top: 22px; }
.sortLab button, .sortLab select, .sortLab input { font: inherit; }
.sortLab button, .sortLab select, .sortLab input[type="text"] {
  padding: 9px 10px;
  min-height: 42px;
  border: 2px solid var(--inputBorder);
  border-radius: 10px;
  background: var(--labSurface);
  color: var(--labInk);
}
.sortLab button { cursor: pointer; font-size: 14px; font-weight: 700; }
.sortLab button:hover { border-color: var(--primary); }
.sortLab button:focus-visible, .sortLab select:focus-visible,
.sortLab input:focus-visible, .sortLab a:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}
.sortLab button:disabled { opacity: .5; cursor: not-allowed; }
.sortLab .primaryAction, .sortLab [aria-pressed="true"] {
  background: var(--primaryDarker);
  color: var(--textOnPrimary);
  border-color: var(--primaryDarker);
}
#mainContent .sortLab .sortIntro { margin: 0 0 14px; font-size: 15px; }
.sortLab #startSort {
  min-height: 48px;
  padding: 12px 18px;
  background: #ffb13b;
  border: 2px solid #9a5700;
  color: #2b1b08;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  text-shadow: none;
}
.sortLab #startSort:hover { background: #ffc564; border-color: #9a5700; }
.sortLab #startSort:active { background: #f29a20; }
.algorithmPicker, .sortToolbar, .dataActions, .playback, .stateLegend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.algorithmPicker button { flex: 1 1 auto; }
.algorithmCard {
  margin: 14px 0;
  padding: 14px;
  border: 2px solid var(--labLine);
  border-radius: 14px;
  background: var(--labSurface);
}
.cardHeading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
#mainContent .sortLab .cardHeading h3 { margin: 0; }
#mainContent .sortLab .tutorialLink { color: var(--labInk); text-decoration: underline; text-underline-offset: 3px; }
.tutorialLink { font-size: 14px; font-weight: 700; }
#mainContent .sortLab .tutorialLink:hover { text-decoration-thickness: 3px; }
#mainContent .sortLab #algorithmSummary { font-size: 14px; }
#mainContent .sortLab .complexityGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
}
.complexityGrid div, .sortStats div {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--labSoft);
}
.sortLab dt { font-size: 12px; font-weight: 700; color: var(--darkTextSecondary); }
.sortLab dd { margin: 2px 0 0; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
#mainContent .sortLab .algorithmWarning {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 4px solid #9a5700;
  border-radius: 6px;
  background: #fff0cd;
  color: #3b2706;
  font-size: 13px;
}
.sortToolbar { justify-content: space-between; margin-bottom: 8px; }
#mainContent .sortLab .labHint, #mainContent .sortLab .chartCaption, #mainContent .sortLab .auxLabel {
  font-size: 13px;
  color: var(--darkTextSecondary);
}
#mainContent .sortLab .sortToolbar .labHint { flex: 1 1 260px; margin: 0; }
#mainContent .sortLab .chartCaption { text-align: center; font-weight: 700; margin: 4px 0 8px; }
#mainContent .sortLab .auxLabel { margin: 12px 0 4px; font-weight: 700; }
.chartWrap { container-type: inline-size; min-width: 0; }
.sortLab [hidden] { display: none !important; }
#mainContent .sortLab .heldValue {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #e5d9f5;
  color: #2f1a4a;
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
  min-height: 22px;
  vertical-align: top;
}
#mainContent .sortLab .heldValue[hidden] { display: inline-block !important; visibility: hidden; }
.barChart {
  --plot: 190px;
  --base: 10px;
  --gap: 3px;
  --pad: 6px;
  --count: 16;
  --label: 14px;
  --labelGap: 3px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--count), minmax(0, 1fr));
  gap: var(--gap);
  align-items: end;
  height: calc(var(--plot) + var(--base) + var(--label) + var(--labelGap) + 18px);
  padding: 0 var(--pad) var(--base);
  border: 2px solid var(--labLine);
  border-radius: 12px;
  background: var(--labSurface);
  overflow: hidden;
}
.barChart.isDense { --gap: 2px; --label: 40px; }
.bufferChart { --plot: 80px; }
.barChart.isEmptyChart { height: 80px; }
.barChart.isEmptyChart::before {
  content: "No numbers to sort";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--darkTextSecondary);
}
.sortBar {
  /* A fixed label row keeps every bar's base on the same line, whatever its label. */
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--label);
  row-gap: var(--labelGap);
  align-items: end;
  justify-items: center;
  min-width: 0;
  height: 100%;
}
/* Side margins let a label wider than a thin bar stay centered over it instead of pinning left. */
.sortBar > .barValue { align-self: start; margin: 0 -12px; }
.barFill {
  width: 100%;
  height: calc(var(--ratio, .5) * var(--plot));
  border: 1px solid #2466a5;
  border-radius: 4px 4px 0 0;
  background: #9cc3e8;
  transition: height .12s ease-out, background-color .12s;
}
.barValue {
  font-size: clamp(8px, calc(100cqw / var(--count) - 4px), 13px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.barValue small { font-size: .8em; font-weight: 700; color: var(--darkTextSecondary); }
.isDense .barValue { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(7px, calc(100cqw / var(--count) - 3px), 12px); }
.sortBar.isEmpty::after {
  content: "";
  width: 100%;
  height: 14px;
  border: 1px dashed var(--inputBorder);
  border-radius: 4px;
}
.sortBar.isSorted .barFill { background: #bfe8cf; border-color: #247a4b; }
.sortBar.isNegative .barFill { background-image: repeating-linear-gradient(135deg, transparent 0 5px, #ffffff70 5px 8px); }
.sortBar.isMarker .barFill { background: #c9b2ea; border: 2px solid #66408a; }
.sortBar.isCompare .barFill { background: #ffd27a; border: 2px solid #95600a; }
.sortBar.isSwap .barFill, .sortBar.isWrite .barFill { background: #f6a5a0; border: 2px solid #a33a33; }
.sortBar.isOutside { opacity: .35; }
.pivotLine {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: calc(var(--base) + var(--label) + var(--labelGap) + var(--ratio) * var(--plot));
  border-top: 2px dashed #66408a;
  pointer-events: none;
}
.pivotLine::after {
  content: attr(data-label);
  position: absolute;
  right: 0;
  bottom: 2px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #e5d9f5;
  color: #2f1a4a;
  font-size: 11px;
  font-weight: 800;
}
.runMarker {
  --pitch: calc((100% - 2 * var(--pad) + var(--gap)) / var(--count));
  position: absolute;
  bottom: 2px;
  left: calc(var(--pad) + var(--pitch) * var(--start));
  width: calc(var(--pitch) * var(--length) - var(--gap));
  height: 5px;
  border-radius: 3px;
  background: #66408a;
  pointer-events: none;
}
#mainContent .sortLab .countsTable {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#mainContent .sortLab .countCell {
  display: grid;
  justify-items: center;
  min-width: 36px;
  margin: 0;
  padding: 3px 5px;
  border: 1px solid var(--inputBorder);
  border-radius: 6px;
  background: var(--labSurface);
  font-size: 11px;
  line-height: 1.3;
  list-style: none;
}
.countCell strong { font-size: 14px; }
.sortLab .countCell.isActive { background: #ffd27a; border: 2px solid #95600a; color: #2b1b08; }
.stateLegend { gap: 8px 16px; font-size: 12px; margin: 14px 0; }
.stateLegend span { display: inline-flex; gap: 6px; align-items: center; }
.stateLegend i { display: inline-block; width: 15px; height: 15px; border-radius: 3px; border: 1px solid #2466a5; background: #9cc3e8; }
.stateLegend .compareSwatch { border: 2px solid #95600a; background: #ffd27a; }
.stateLegend .moveSwatch { border: 2px solid #a33a33; background: #f6a5a0; }
.stateLegend .markerSwatch { border: 2px solid #66408a; background: #c9b2ea; }
.stateLegend .sortedSwatch { border-color: #247a4b; background: #bfe8cf; }
.stateLegend .pivotSwatch { height: 5px; border: 0; background: #66408a; }
.playback { padding-top: 12px; border-top: 2px dashed var(--labLine); }
.playback label { font-size: 13px; }
.scrubber { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; margin-top: 14px; }
.scrubber output { margin-left: auto; }
.scrubber input { width: 100%; accent-color: var(--primary); }
#mainContent .sortLab .stepMessage {
  min-height: 3em;
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--labSoft);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#mainContent .sortLab .sortStats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}
#mainContent .sortLab #sortResult { font-size: 14px; overflow-wrap: anywhere; }
.tableScroll { max-width: 100%; overflow-x: auto; }
/* Borders, header tint, and cell color come from the shared .smileysTable; this only makes it compact. */
.compareTable { width: 100%; margin-top: 12px; font-size: 13px; }
#mainContent .compareTable th, #mainContent .compareTable td { padding: 7px 8px; text-align: left; white-space: nowrap; }
#mainContent .compareTable th { font-size: 13px; }
.compareTable td { font-variant-numeric: tabular-nums; }
.compareTable tr.isCurrent td { background: var(--labSoft); }
.compareTable tbody:empty { display: none; }
#mainContent .complexityTable { margin: 12px 0 20px; }
.labDialog, .expandedDialog {
  color: var(--labInk);
  background: var(--labSurface);
  border: 3px solid var(--labLine);
  border-radius: 18px;
  width: min(520px, calc(100vw - 24px));
  max-height: 90dvh;
  padding: 20px;
}
.sortLab dialog::backdrop { background: #101926b8; }
.dialogHeader, .expandedHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.labDialog label { display: block; font-size: 14px; margin: 16px 0 5px; }
.labDialog output { float: right; }
.labDialog select, .labDialog input { width: 100%; accent-color: var(--primary); }
.labDialog button { margin-top: 10px; }
#mainContent .labDialog h3 { margin-top: 24px; }
#mainContent .sortLab .customError { min-height: 1.5em; font-size: 13px; color: #a33a33; font-weight: 700; }
.expandedDialog { width: calc(100vw - 24px); max-width: 1100px; max-height: calc(100dvh - 24px); }
.expandedDialog .sortStage { box-shadow: none; }
.expandedDialog .barChart { --plot: min(300px, 32dvh); }
body:has(.sortLab dialog[open]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .barFill { transition: none; }
}
@media (max-width: 800px) {
  #mainContent .sortLab .complexityGrid, #mainContent .sortLab .sortStats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .sortStage, .labResult { padding: 10px; border-width: 2px; }
  .sortLab button { padding: 7px 8px; font-size: 12px; }
  .sortLab #startSort { flex-basis: 100%; }
  .algorithmPicker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .algorithmCard { padding: 10px; }
  #mainContent .sortLab .complexityGrid, #mainContent .sortLab .sortStats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .sortLab dd { font-size: 14px; }
  .dataActions, .playback { gap: 5px; }
  .barChart { --plot: 150px; --pad: 3px; --gap: 2px; }
  .barChart.isDense { --gap: 1px; }
  .bufferChart { --plot: 64px; }
  .labDialog, .expandedDialog { padding: 12px; }
}
.labResult .tableScroll:has(#compareBody:empty) { display: none; }