/* Student worksheet display controls.
   Theme variables live here because these controls select the page palette. */
:root {
    --problem-scale: 1;
    --page-background: #eef3f8;
    --page-text: #142f54;
    --surface: #ffffff;
    --surface-soft: #f9fcff;
    --border: #c6d5e4;
    --settings-border: #d2deed;
    --settings-background: linear-gradient(135deg, #ffffff 0%, #eef4fb 100%);
    --settings-label: #223d5a;
    --focus: #2f77bf;
    --theme-track: linear-gradient(90deg, #ffe28a 0%, #7cb5ff 100%);
    --theme-thumb: #ffffff;
    --answer-text: #2e5a43;
    --star-badge: #0077ff;
    --star-badge-hover: #0056b3;
}

/* The theme toggle changes this data attribute through studentControls.js. */
:root[data-theme="dark"] {
    --page-background: #0f1a26;
    --page-text: #e0ebf7;
    --surface: #18283b;
    --surface-soft: #142131;
    --border: #2c4159;
    --settings-border: #39536e;
    --settings-background: linear-gradient(135deg, #1b2c40 0%, #142131 100%);
    --settings-label: #d8e7f7;
    --focus: #8cc7ff;
    --theme-track: linear-gradient(90deg, #4d6c92 0%, #0a1320 100%);
    --theme-thumb: #f5f9ff;
    --answer-text: #6fcf9c;
    --star-badge: #f08cb4;
    --star-badge-hover: #e25b8d;
}

/* The control group is a two-column grid: toggle and full screen above the
   size control, which spans both columns. */
.settings-content {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 8px;
    font-family: Arial, sans-serif;
}

.settings-controls-row { display: contents; }

.settings-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 2px solid var(--settings-border);
    border-radius: 999px;
    background: var(--settings-background);
}

/* Center the label and input together inside both top-row control panels. */
.theme-toggle-section,
.fullscreen-section {
    justify-content: center;
}

.theme-control-label,
.settings-icon-label,
.worksheet-slider-section label {
    color: var(--settings-label);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.theme-toggle-row { display: flex; align-items: center; gap: 7px; }
.theme-icon { font-size: 1.05rem; line-height: 1; }
.theme-icon-day { color: #d59500; }
.theme-icon-night { color: #5576b5; }
.theme-toggle-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.theme-toggle-track { display: block; width: 52px; height: 22px; padding: 3px; border-radius: 999px; background: var(--theme-track); box-shadow: inset 0 1px 3px rgba(7, 17, 27, 0.4); }
.theme-toggle-thumb { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--theme-thumb); box-shadow: 0 2px 5px rgba(14, 31, 48, 0.28); transition: transform 0.25s ease; }
body[data-theme="dark"] .theme-toggle-thumb { transform: translateX(30px); }

/* The full screen button switches between its enter and exit SVG icons. */
.settings-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 24px; padding: 0; border: 1px solid var(--settings-border); border-radius: 8px; background: var(--surface); color: var(--settings-label); cursor: pointer; }
.settings-icon-button:focus-visible,
.theme-toggle-button:focus-visible,
.worksheet-slider-section input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.fullscreen-icon { display: inline-flex; width: 14px; height: 14px; }
.fullscreen-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fullscreen-icon-exit,
body.is-fullscreen .fullscreen-icon-enter { display: none; }
body.is-fullscreen .fullscreen-icon-exit { display: inline-flex; }

/* The size slider occupies the second row and scales the worksheet content. */
.worksheet-slider-section { grid-column: 1 / -1; }
.worksheet-slider-section input { width: min(260px, 38vw); margin: 0; accent-color: #ff7b7b; }

/* Printouts omit interactive controls. */
@media print {
    .settings-content { display: none; }
}

/* On narrow screens, stack the settings under the worksheet title. */
@media (max-width: 760px) {
    .settings-content { grid-template-columns: 1fr; width: 100%; }
    .settings-controls-row { display: flex; gap: 8px; }
    .settings-section { justify-content: space-between; width: 100%; }
    .theme-toggle-section,
    .fullscreen-section { justify-content: center; }
    .worksheet-slider-section input { width: 100%; }
}