/* page1.css – Bar Graph Builder */

.graph-title {
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 32px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #222222;
}

/* Graph area – white background, subtle border */
.graph-area-bg {
  fill: #ffffff;          /* plain white */
  stroke: #ccd8e6;
  stroke-width: 2.4;
}

.graph-axis {
  stroke: #333333;
  stroke-width: 3;
}

.grid-line {
  stroke: #dde6f2;
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}

/* Right scale */
.scale-tick {
  stroke: #555555;
  stroke-width: 1.6;
}

.scale-text {
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 18px;
  fill: #333333;
  dominant-baseline: middle;
	 font-weight: 600;
}

/* Bars – square edges, colors set in JS */
<!--.bar-rect {
  fill: #4a90e2;          /* fallback until JS paints */
  stroke: #2364b1;
  stroke-width: 3;
	
}
-->
.bar-value {
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #222222;
}

.bar-label {
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: hanging;
  fill: #333333;
}