/* === Function Plotting Styles === */
.graph-container {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 5px rgba(212, 67, 38, 0.1);
}

.graph-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.graph-box {
    border-radius: 8px;
    padding: 15px;
    margin: 15px auto;
    position: relative;
}

.graph-title {
    text-align: center;
    font-weight: 600;
    color: #d44326;
    margin-bottom: 10px;
}

.coordinate-plane {
    width: 240px;
    height: 240px;
    background-color: white;
    border: 1px solid #ffccb8;
    border-radius: 4px;
    position: relative;
    margin: 0 auto;
}

/* Grid lines */
.coordinate-plane::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(to right, #ffe0d3 1px, transparent 1px),
        linear-gradient(to bottom, #ffe0d3 1px, transparent 1px);
    background-size: 20px 20px;
}

/* X-axis */
.x-axis {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #d44326;
    transform: translateY(-50%);
}

/* Y-axis */
.y-axis {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #d44326;
    transform: translateX(-50%);
}

/* Axis arrows */
.x-axis::after {
    content: '→';
    position: absolute;
    right: -5px;
    top: -8px;
    color: #d44326;
    font-size: 16px;
}

.y-axis::before {
    content: '↑';
    position: absolute;
    top: -5px;
    left: -6px;
    color: #d44326;
    font-size: 16px;
}

/* Simple dot plotting system */
.plot-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #ff6b35;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

/* Connect dots with lines using pseudo-elements */
.plot-dot.connect-right::after {
    content: '';
    position: absolute;
    background-color: #ff6b35;
    height: 2px;
    width: 20px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
}

.plot-dot.connect-diagonal-up::after {
    content: '';
    position: absolute;
    background-color: #ff6b35;
    height: 2px;
    width: 28.28px; /* sqrt(20^2 + 20^2) for diagonal */
    top: 50%;
    left: 50%;
    transform: translateY(-50%) rotate(-45deg);
    transform-origin: left center;
}

.plot-dot.connect-diagonal-down::after {
    content: '';
    position: absolute;
    background-color: #ff6b35;
    height: 2px;
    width: 28.28px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: left center;
}

.plot-dot.connect-steep-up::after {
    content: '';
    position: absolute;
    background-color: #ff6b35;
    height: 2px;
    width: 44.72px; /* sqrt(20^2 + 40^2) for 2:1 slope */
    top: 50%;
    left: 50%;
    transform: translateY(-50%) rotate(-63.43deg);
    transform-origin: left center;
}

.plot-dot.connect-steep-down::after {
    content: '';
    position: absolute;
    background-color: #ff6b35;
    height: 2px;
    width: 44.72px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) rotate(63.43deg);
    transform-origin: left center;
}

.plot-dot.connect-gentle-up::after {
    content: '';
    position: absolute;
    background-color: #ff6b35;
    height: 2px;
    width: 44.72px; /* sqrt(40^2 + 20^2) for 1:2 slope */
    top: 50%;
    left: 50%;
    transform: translateY(-50%) rotate(-26.57deg);
    transform-origin: left center;
}

.plot-dot.connect-gentle-down::after {
    content: '';
    position: absolute;
    background-color: #ff6b35;
    height: 2px;
    width: 44.72px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) rotate(26.57deg);
    transform-origin: left center;
}

/* Alternative: Continuous line approach */
.function-line {
    position: absolute;
    stroke: #ff6b35;
    stroke-width: 2;
    fill: none;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Pre-calculated positions for common coordinates */
/* Origin = 120px, 120px (center of 240x240) */
/* Scale: 20px = 1 unit */

/* X coordinates */
.x-neg5 { left: 20px; }
.x-neg4 { left: 40px; }
.x-neg3 { left: 60px; }
.x-neg2 { left: 80px; }
.x-neg1 { left: 100px; }
.x0 { left: 120px; }
.x1 { left: 140px; }
.x2 { left: 160px; }
.x3 { left: 180px; }
.x4 { left: 200px; }
.x5 { left: 220px; }

/* Y coordinates (inverted for CSS) */
.y5 { top: 20px; }
.y4 { top: 40px; }
.y3 { top: 60px; }
.y2 { top: 80px; }
.y1 { top: 100px; }
.y0 { top: 120px; }
.y-neg1 { top: 140px; }
.y-neg2 { top: 160px; }
.y-neg3 { top: 180px; }
.y-neg4 { top: 200px; }
.y-neg5 { top: 220px; }

/* Axis labels */
.axis-label {
    position: absolute;
    font-size: 11px;
    color: #d44326;
    font-weight: 600;
}

.x-axis-label {
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.y-axis-label {
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
}

/* Number labels on axes */
.axis-number {
    position: absolute;
    font-size: 10px;
    color: #666;
}

.x-number {
    top: calc(50% + 5px);
    transform: translateX(-50%);
}

.y-number {
    left: calc(50% - 15px);
    transform: translateY(50%);
}

/* Dot grid style for plotting */
.dot-grid-plane {
    width: 100%;
    height: 200px;
    background-color: white;
    border: 1px solid #ffccb8;
    border-radius: 4px;
    background-image: 
        /* Vertical axis */
        linear-gradient(to right, #d44326 2px, transparent 2px),
        /* Horizontal axis */
        linear-gradient(to bottom, #d44326 2px, transparent 2px),
        /* Dots */
        radial-gradient(circle, #ffccb8 1px, transparent 1px);
    background-size: 
        100% 100%,
        100% 100%,
        20px 20px;
    background-position:
        center center,
        center center,
        0 0;
}

/* Isometric/3D grid for advanced functions */
.iso-grid-plane {
    width: 100%;
    height: 200px;
    background-color: white;
    border: 1px solid #ffccb8;
    border-radius: 4px;
    background-image: 
        linear-gradient(30deg, transparent 49%, #ffe0d3 49%, #ffe0d3 51%, transparent 51%),
        linear-gradient(-30deg, transparent 49%, #ffe0d3 49%, #ffe0d3 51%, transparent 51%),
        linear-gradient(90deg, transparent 49%, #ffe0d3 49%, #ffe0d3 51%, transparent 51%);
    background-size: 20px 35px, 20px 35px, 20px 20px;
}

.function-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff6b35;
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.axis-labels {
    position: absolute;
    font-size: 11px;
    color: #d44326;
    font-weight: 600;
}

.x-label {
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.y-label {
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
}

/* Interactive canvas for actual plotting */
.plot-canvas {
    width: 100%;
    height: 200px;
    border: 1px solid #ffccb8;
    border-radius: 4px;
    cursor: crosshair;
    background: white;
}


/* === MOBILE RESPONSIVE STYLES === */
/* This block applies *only* to screens 768px wide or smaller */
@media (max-width: 768px) {

    /* Add padding to body to prevent text touching edges */
    body {
        padding: 0 10px;
    }

    /* Stack student info fields vertically */
    .student-info {
        flex-direction: column;
        gap: 10px;
    }

    .info-field {
        min-width: unset;
        /* Allow fields to be full width */
        width: 100%;
    }

    /* Reduce header padding and title font size */
    .header-section {
        padding: 15px;
    }

    h1 {
        font-size: 1.6em;
        /* Smaller title */
    }

    /* Make problem grid stack into 1 column */
    .problem-grid {
        grid-template-columns: 1fr;
        /* The most important change! */
        width: 100%;
        /* Use full width */
        padding: 15px;
        gap: 20px;
    }

    /* Adjust padding for standard problems */
    .problem-container {
        padding: 15px;
    }

    /* Stack the content *inside* each compact problem */
    .problem-expression {
        flex-direction: column;
        /* Stack text and answer box */
        /* align-items: flex-start; */ /* Changed from flex-start */
        align-items: center;
        /* Added to center stacked items */
        gap: 12px;
        font-size: 1.1em;
        width: 100%;
        /* Ensure it fills the box */
    }

    .problem-expression .answer-box {
        margin: 0;
        /* Remove side margins */
    }

    /* General Font Size Reductions */
    .question-text {
        font-size: 1.3em;
    }

    .math-text {
        font-size: 1.2em;
        text-align: center;
        /* Explicitly center math text on mobile */
    }

    .problem-content {
        font-size: 15px;
        line-height: 1.7;
    }

    .answer-label {
        font-size: 1.3em;
    }


    .items-list {
        font-size: 1.2em;
    }

    .info-box {
        font-size: 16px;
        padding: 12px;
    }

    .site-footer {
        font-size: 18px;
        padding: 12px;
    }

    /* Make SVGs larger and centered */
    .my-svg {
        width: 90%;
        /* Much larger for mobile */
        margin: 15px auto;
        /* Ensures centering */
    }

    /* Adjust table fonts to be smaller */
    .table-style th,
    .table-style td {
        padding: 5px;
        font-size: 12px;
    }

    /* Adjust numbered list padding */
    .section-item {
        padding-right: 35px;
        /* Ensure space for number */
    }

    .subsection-item {
        padding-right: 45px;
    }

    /* Responsive styles for function plotting */
    .graph-grid {
        grid-template-columns: 1fr;
        /* Stack graphs */
    }

    .coordinate-plane {
        width: 100%;
        /* Make plane fill available space */
        max-width: 240px;
        /* But don't let it get huge */
        height: 240px;
        /* Keep it square */
    }

    .plot-canvas {
        width: 100%;
    }
}