/* fraction-vs-ratio/style.css - small overrides to align with repo style-guide */
html {
	/* increase base font size so Tailwind utility sizes scale up */
	font-size: 18px;
}
body { font-family: Inter, 'Segoe UI', Arial, sans-serif; font-size: 1rem; }
.main-header h1 { color: var(--text-dark, #222); }

/* Ensure the demo keeps reasonable max width */
.max-w-4xl { max-width: 48rem; margin-left: auto; margin-right: auto; }

/* Make bar units visible when Tailwind not loaded or to complement style-guide */
.bar-unit { min-width: 0; }

/* Make each bar segment outlined in black so segments stand out */
.bar-unit {
    /* draw a thick black separator on the right edge of every unit so segments appear distinct */
    border-right: 4px solid #000;
    box-sizing: border-box;
    border-radius: 0;
}
.bar-unit:last-child {
    /* last unit doesn't need right border since container provides the outline */
    border-right: none;
}/* Make the bar container have a clear black outline and sharp corners */
#barContainer {
	border: 2px solid #000 !important;
	border-radius: 0 !important;
}

/* Fraction values hidden by default until revealed */
.fraction-value { display: none; }
.fraction-value.show { display: inline; }

/* Fraction box interactive styles */
.fraction-box {
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none; /* prevent text selection when clicking */
}

.fraction-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Slightly increase inputs and small labels for readability */
input[type="number"], input[type="text"] {
	font-size: 1rem; /* ensure inputs scale with new base */
}

/* Increase the prominent title sizes where Tailwind utilities are used */
.text-3xl { font-size: 2.25rem; }
.text-xl { font-size: 1.125rem; }