body {
    font-family: Arial, sans-serif;
    margin: 20px; /* Simplified margin for screen */
    background-color: #f4f4f4;
    color: #333;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

#worksheet-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 20px; /* Gap between problems */
    padding: 10px; /* Simplified padding */
    margin: 0 auto; /* Center on screen */
    /* background-color: lightcoral; /* Diagnostic background removed */
}

.problem {
    border: 1px solid #ddd; /* More subtle grey border for screen */
    padding: 15px; /* Increased padding for content */
    text-align: center;
    /* background-color: lightskyblue; /* Diagnostic background removed */
    font-size: 1.2em;
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

@media print {
    body {
        width: 8.5in;
        /* height: 11in; Removed to allow natural content flow */
        margin: 0.3in 0.5in; /* Reduced top/bottom margin */
        padding: 0;
        background-color: #fff;
        font-size: 12pt;
        color: #000;
    }

    h1 {
        display: none; /* Remove header from print view */
    }

    #worksheet-container {
        display: grid; /* Explicitly set for print */
        grid-template-columns: repeat(3, 1fr); /* Explicitly set for print */
        gap: 0.25in; /* Print-specific gap */
        padding: 0; /* No extra padding for print */
        margin: 0; /* No extra margin for print */
        page-break-inside: avoid;
        page-break-before: avoid; /* Try to keep this with the element above it */
        /* background-color: lightcoral; /* Diagnostic background for print removed */
    }

    .problem {
        border: 1px solid #000; /* Clearer border for print */
        padding: 0.15in; /* Print-specific padding */
        font-size: 14pt;
        min-height: 0.75in; /* Ensure space for writing answers */
        /* background-color: lightskyblue; /* Diagnostic background for print removed */
        /* text-align: center; is inherited */
        /* box-sizing: border-box; is inherited */
    }
}

#selectionControlsContainer {
    display: flex;
    gap: 20px; /* Adjust as needed for spacing */
}

/* Styling for the individual selection containers */
#baseNumberSelectionContainer,
#multiplierSelectionContainer {
    padding: 10px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column; /* Stack h2 and ul vertically */
    flex-wrap: wrap; /* Still useful if content within columns wraps */
    gap: 10px;
    flex: 1; /* Allow these containers to grow and share space */
}

/* Styling for the checkbox lists within selection containers */
#baseNumberSelectionContainer ul,
#multiplierSelectionContainer ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Arrange items in a single horizontal line */
    gap: 10px;       /* Spacing between list items (checkbox/label pairs) */
    padding: 0;      /* Remove default list padding */
    margin: 0;       /* Remove default list margin */
    overflow-x: auto; /* Add horizontal scroll if content overflows */
}

#baseNumberSelectionContainer ul li,
#multiplierSelectionContainer ul li {
    display: inline-flex; /* Make li an inline-level flex container */
    align-items: center;
    gap: 5px;             /* Space between checkbox and its label */
    flex: 0 0 auto;       /* Do not grow, do not shrink, base size on content */
}

#factCountControl {
    margin-top: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#factCountControl label {
    font-weight: bold;
}

#factCount {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
}