/* ============================================================
   Fun Tools — Drawing Pad
   ============================================================ */

/* Page wrapper: canvas left, controls right, both same height */
/* dp-page-wrap fills vertical space between header and footer */
.dp-page-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* push footer to bottom */
}


.dp-layout {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    margin-bottom: 8px;
    align-items: stretch;
    flex-wrap: nowrap;
    height: calc(100vh - 112px);
    min-height: 400px;
    overflow: visible;
}

/* Canvas panel — white always, grows to fill available width,
   height is set by JS to match the controls panel */
.dp-canvas-panel {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
    margin-bottom: 0 !important;
}

html[data-theme="dark"] .dp-canvas-panel { background: #fff; }

html[data-theme="dark"] .dp-canvas-panel canvas:not(#dp-cursor-canvas) {
    box-shadow: 0 0 0 2px #4a3870, 0 4px 20px rgba(0,0,0,0.5);
}

.dp-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 2px 0 8px;
    line-height: 1.4;
}

.dp-canvas-panel canvas:not(#dp-cursor-canvas) {
    display: block;
    flex: 1 1 0;               /* fill panel height respecting padding */
    width: 100%;
    height: 0 !important;      /* override global height:auto; flex: 1 provides actual height */
    min-height: 0;
    background: #fff;
    border-radius: 4px;
    cursor: crosshair;
    touch-action: none;
}

/* Cursor overlay — absolutely covers the main canvas, never intercepts events */
#dp-cursor-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 4px;
}

/* Controls panel — fixed width, scrolls if tiny viewport */
.dp-controls-panel {
    flex: 0 0 280px;
    width: 280px;
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    overflow-y: auto;
    align-self: stretch;           /* fill the flex row height */
    margin-bottom: 0 !important;   /* override .panel margin-bottom */
    box-sizing: border-box;
}

/* Spacer pushes download button to bottom of controls */
.dp-section-spacer {
    flex: 1;
}

/* Header row: title + hint on same line */
.dp-header-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.dp-header-row h3  { font-size: 1rem; margin: 0; }
.dp-header-row .hint { font-size: 0.74rem; }

/* Section dividers */
.dp-section {
    padding: 8px 0;
    border-top: 1px solid #e0d8f0;
}
html[data-theme="dark"] .dp-section { border-top-color: #2d1f4a; }

/* Two-column grid for buttons and sliders */
.dp-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* Labels */
.dp-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 3px;
}

/* Buttons */
.dp-btn {
    width: 100%;
    font-size: 0.76rem;
    padding: 7px 4px;
    min-height: 34px;
    letter-spacing: 0;
}

.dp-btn-full {
    width: 100%;
    font-size: 0.80rem;
    padding: 8px;
    min-height: 34px;
    letter-spacing: 0;
}

/* Eraser uses muted colour by default */
.dp-eraser { background: var(--text-muted) !important; }

/* Inputs inside controls */
.dp-controls-panel select,
.dp-controls-panel input[type="text"] {
    width: 100%;
    font-size: 0.82rem;
    padding: 5px 7px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: var(--bg-card);
    color: var(--text-primary);
    box-sizing: border-box;
}
html[data-theme="dark"] .dp-controls-panel select,
html[data-theme="dark"] .dp-controls-panel input[type="text"] {
    border-color: #3a2d5a;
}

.dp-controls-panel input[type="range"] {
    width: 100%;
    margin: 2px 0 0;
    padding: 0;
}




/* Short screens: switch controls to single-column layout */
@media (max-height: 620px) and (min-width: 701px) {
    .dp-grid-2 {
        grid-template-columns: 1fr;
    }
    /* Compress section padding */
    .dp-section { padding: 5px 0; }
    .dp-layout { height: calc(100vh - 80px); }
}

/* Very short screens: even tighter */
@media (max-height: 480px) and (min-width: 701px) {
    .dp-controls-panel { font-size: 0.82rem; }
    .dp-btn  { min-height: 28px; padding: 4px 4px; font-size: 0.72rem; }
    .dp-btn-full { min-height: 28px; padding: 4px 8px; }
    .dp-label { font-size: 0.68rem; }
    .dp-section { padding: 3px 0; }
}

/* ── Drawing Pad: help button ───────────────────────────────── */
.dp-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--accent-teal);
    color: var(--accent-teal);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    background: none;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    vertical-align: middle;
}
.dp-help-btn:hover { background: var(--accent-teal); color: #fff; }

/* ── Drawing Pad: help modal ────────────────────────────────── */
.dp-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.dp-modal-backdrop.open { display: flex; }

.dp-modal {
    background: white;
    border-radius: 12px;
    padding: 28px 28px 22px;
    max-width: 460px;
    width: calc(100% - 32px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
    position: relative;
}
html[data-theme="dark"] .dp-modal { background: #1e1630; color: var(--text-dark); }

.dp-modal h3 { margin: 0 0 14px; font-size: 1.1rem; color: var(--accent-teal); }
.dp-modal p  { font-size: 0.9rem; line-height: 1.7; margin: 0 0 12px; }
.dp-modal p:last-child { margin-bottom: 0; }

.dp-modal-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: none; font-size: 1.3rem;
    cursor: pointer; color: var(--text-muted); line-height: 1; padding: 4px;
}
.dp-modal-close:hover { color: var(--text-dark); }

.dp-modal .key-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0 12px;
    font-size: 0.88rem;
}
.dp-modal .key-item {
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.dp-modal kbd {
    display: inline-block;
    background: #e0d8f0;
    border: 1px solid #b0a0d0;
    border-radius: 4px;
    padding: 1px 6px;
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--primary-purple);
    white-space: nowrap;
    flex-shrink: 0;
}
html[data-theme="dark"] .dp-modal kbd { background: #2d1f4a; border-color: #4a3870; color: #c3a0ff; }

/* Mobile: stack canvas above controls */
@media (max-width: 700px) {
    .dp-layout {
        flex-wrap: wrap;
        flex-direction: column;
        height: auto;
    }
    .dp-canvas-panel {
        min-height: 260px;
        flex: none;
        width: 100%;
    }
    .dp-controls-panel {
        flex: none;
        width: 100%;
        height: auto;
    }
}


/* ============================================================
   Fourier Camera (science/fourier-camera.html)
   ============================================================ */
.fc-panel      { margin-bottom: 16px; }
.fc-intro p    { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; }

.fc-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.fc-cam-panel,
.fc-controls-panel { flex: 1 1 240px; min-width: 0; }

.fc-cam-panel h3,
.fc-controls-panel h3 { font-size: 1rem; margin-bottom: 10px; }

.fc-field-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.fc-source-select { margin-bottom: 12px; }
.fc-preview       { margin-bottom: 12px; text-align: center; }

.fc-status { font-size: 0.82rem; color: var(--text-muted); margin-top: 8px; text-align: center; }
.fc-status a { color: var(--accent-green); font-weight: 700; text-decoration: none; }

.fc-warning {
    display: none;
    background: #c62828;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    margin-top: 10px;
    text-align: center;
}

.fc-canvas-panel h3 { font-size: 1rem; margin-bottom: 12px; }
.fc-canvas-wrap     { overflow-x: auto; text-align: center; }

@media (max-width: 600px) { .fc-layout { flex-direction: column; } }

/* ── Image placement UI ────────────────────────────────────── */
.dp-place-status {
    background: #e8f4f8;
    border-left: 3px solid var(--accent-teal);
    border-radius: var(--radius-sm);
    padding: 8px 10px !important;
    font-size: 0.8rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.dp-place-status kbd {
    background: var(--accent-teal);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.78rem;
}
html[data-theme="dark"] .dp-place-status {
    background: #0d2d35;
    color: var(--text-dark);
}