/*
File: designerStyles.css
Date: 2026-05-22
Author: klp
Workspace: SWSolvingRtTriangles2026-05-22-Stg1
Purpose: Styles specific to the Solving Right Triangles app — radical
         notation, answer-input feedback, problem card layout.
*/

/* ── Radical notation (used with Radical.js toHTML output) ──────────────── */
.rad-vinculum {
    text-decoration: overline;
    padding: 0 2px;
}
.rad-index {
    font-size: 0.7em;
    vertical-align: super;
    margin-right: 1px;
}

/* ── Problem card ────────────────────────────────────────────────────────── */
#problemContent {
    min-height: 80px;
}

/* ── Answer input feedback rows ─────────────────────────────────────────── */
.feedback-row {
    min-height: 1.2em;
}

/* ── Answer inputs with validation states ────────────────────────────────── */
#rightPanel input.answer-input {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.9rem;
}

/* is-valid / is-invalid use Bootstrap colors; just add a slight background tint */
#rightPanel input.is-valid  { background-color: #f0fff4; }
#rightPanel input.is-invalid { background-color: #fff5f5; }

/* Correct value but not yet in simplified form — orange border */
#rightPanel input.is-simplify {
    border-color: #fd7e14 !important;
    box-shadow: 0 0 0 0.25rem rgba(253, 126, 20, 0.25) !important;
    background-color: #fff8f0 !important;
}

/* ── √ insert button ─────────────────────────────────────────────────────── */
.btn-sqrt {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    padding: 0 0.5rem;
    min-width: 2rem;
}

/* ── Hint details/summary ───────────────────────────────────────────────── */
details > summary {
    list-style: none;
    user-select: none;
}
details > summary::-webkit-details-marker { display: none; }

/* ── Given-value display ─────────────────────────────────────────────────── */
.given-value {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: bold;
    color: #155724;
}