/* 10) Button and input defaults (demos) */
button, input {
  margin: 5px;
  padding: 5px;
}

h1,
h2,
h3 {
  margin-top: 0px;    /* shrink the space above */
  margin-bottom: 5px; /* shrink the space below */
  padding: 0;         /* remove any extra padding */
}

/* So the demo is inset a little bit. */
/* I only want this for fullscreen mode, but so far no luck getting it to work. */
html, body {
    padding: 8px;
}

/* 11) Array-based demo layout */
.array-container {
  display: flex;
  gap: 4px; /* Gap between elements, I think */
  align-items: flex-start;
  margin: 10px 0 100px;
  font-size: 18px;
  position: relative;
}

/* 12) Legend container */
.legend {
  display: inline-flex;
  align-items: flex-start;    /* top-align the two columns */
  column-gap: 12px;           /* space between “Legend:” and items */
  margin: 10px 0;
  padding: 4px 8px;
  border: 1px solid #333;
  border-radius: 4px;
  /* remove overflow: auto; since flex handles containment */
}

/* “Legend:” label on the left */
.legend-label {
  /* if you want all legend‐items to start at exactly the same x-coordinate,
     give .legend-label a fixed width. Otherwise you can omit width. */
  /* width: 80px; */
  text-align: right;   /* if using a fixed width, this right‐aligns “Legend:” */
  /*font-weight: bold;*/   /* same as <strong> */
  line-height: 1.2;    /* ensure the label’s height accommodates wrapped lines */
}

/* all colored boxes + text go here */
.legend-items {
  flex: 1;              /* take up remaining horizontal space */
  /* allow wrapping inside this block; <br> will force a new line */
}

/* the little colored‐box squares */
.legend-box {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-left: 5px;
  border-radius: 4px;
  border: 1px solid #333;
  background-color: transparent;
}

/* OPTIONAL: if you want the “Bucket Arrow” (↓) to align with the boxes,
   you can give it the same vertical-align: middle; as .legend-box: */
.bucket-arrow {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}


/* 14) Array-cell styles */
.element {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #333;
  background-color: #cce3ff;
  position: relative;
}
/* state classes */
.default         { background-color: #cce3ff; }
.key             { background-color: #1f77b4; }
.finished        { background-color: lightgreen; }
.blank           { background-color: #fff; }
.right-partition { background-color: #1e90ff; }
.left-partition  { background-color: lightsalmon; }
.pivot           { background-color: lightgreen; }
.comparing       { background-color: yellow; }
.swap            { background-color: #b2f2bb; }
.sorted          { background-color: orange; }
.insert          { background-color:orangered; }
.empty           { background-color: transparent; border: 1px dashed #ccc; }

.arrow {
  position: absolute;
  top: 50px;
  width: 100%;
  text-align: center;
  font-weight: bold;
}

/* ───────────────────────────────────────────────────────────────────── */
/* 1. TREE NODES */
/* ───────────────────────────────────────────────────────────────────── */

/* All “tree” nodes (e.g. subset‐sum expansion) */
.treeNode circle {
  fill: #cce3ff;
  stroke: #2a2a2a;
  stroke-width: 1.5px;
}
.treeNode text {
  font-size: 20px;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #0a0a0a;
}

/* Highlight a “solution” tree node */
.treeNode.solution circle {
  fill: gold;
}

/* Mark a “dead-end” tree node (sum > target) */
.treeNode.deadend circle {
  fill: #e06464;
}

/* Outline for the currently active tree node */
.treeNode.current circle {
  stroke: #000;
  stroke-width: 3px;
}

/* ───────────────────────────────────────────────────────────────────── */
/* 2. GENERIC GRAPH NODES */
/* ───────────────────────────────────────────────────────────────────── */

/* All other graph nodes (not part of the subset‐sum tree) */
.graphNode circle {
  fill: lightblue;
  stroke: #444;
  stroke-width: 1px;
}
.graphNode text {
  font-size: 14px;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #202020;
}

/* If you want to highlight a graph-node differently */
.graphNode.highlight circle {
  fill: orange;
}
.graphNode.current circle {
  stroke: #000;
  stroke-width: 2.5px;
}

/* ───────────────────────────────────────────────────────────────────── */
/* 3. EDGES (ALL TYPES) */
/* ───────────────────────────────────────────────────────────────────── */

/* Any <line> under #svg is an edge—same styling for tree and graph */
#svg line {
  stroke: #888;
  stroke-width: 2px;
}

/* The “+x” label on each edge */
#svg line + text {
  font-size: 24px;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #333;
}

/* If you want tree-edges vs graph-edges to have different strokes: */
/*
.treeNode + line { stroke: green; }
.graphNode + line { stroke: blue; }
*/

/* ───────────────────────────────────────────────────────────────────── */
/* 4. LEVEL LABELS (LEFT-SIDE “val[i] = …”) */
/* ───────────────────────────────────────────────────────────────────── */

.level-label {
  font-size: 24px;
  fill: #222;
  text-anchor: start;
}

/* ───────────────────────────────────────────────────────────────────── */
/* 5. CONTROLS (BUTTONS, SELECTS, ETC.) */
/* ───────────────────────────────────────────────────────────────────── */

#controls1 button,
#controls1 select {
  margin: 5px;
  padding: 4px 8px;
  font-size: 14px;
}