/* ================================================================
   perimeter-formulas.css
   ----------------------------------------------------------------
   Styling for the "Using the Formulas (Numeric Fluency)" skill
   quizzes on the Class 5 Math page:

     - D.1 Plug and Play — Square         (.uf-fact card, no picture)
     - D.2 Plug and Play — Rectangle      (.uf-stage svg, orientation varies)
     - D.3 Missing Side, Known Perimeter  (.uf-stage svg + "?" side)
     - D.4 Unit Sense-Check               (.uf-scenario card, real-world icon)

   This tier comes right after "Regular Shapes: Discovering the
   Shortcut" and reuses the same visual language (a bordered "stage"
   card that rings green/red once graded, plus a 4-chip answer row)
   but is a fully self-contained stylesheet with its own "uf-" class
   prefix — it does not read any class from perimeter-foundations.css,
   perimeter-measuring.css, or perimeter-regular-shapes.css, and is
   loaded as its own <link> tag.

   The answer-chip row (.uf-options / .uf-opt) is a 4-column CSS
   Grid, never a wrapping flex row, so all four answers are FORCED
   onto a single line at every viewport width, down to small Android
   phones — chip text shrinks (via clamp()) and may wrap to a second
   line *inside its own cell*, but the row itself never breaks into
   two rows.
   ================================================================ */

/* ---------- shared visual "stage" ----------
   Used by D.2 and D.3, which draw an actual shape. D.1 and D.4 reuse
   the same box but fill it with a text-based "fact" or "scenario"
   card instead of an <svg>, so every skill in this tier still shows
   one consistent, ring-able container. */
.uf-stage {
    width: clamp(220px, 70vw, 320px);
    min-height: clamp(150px, 40vw, 210px);
    margin: 14px auto 6px;
    border: 3px solid var(--line);
    border-radius: 20px;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 0 rgba(0,0,0,0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
}
.uf-stage.is-correct {
    border-color: #22c08d;
    box-shadow: 0 0 0 4px rgba(34,192,141,0.18);
}
.uf-stage.is-wrong {
    border-color: #f5427d;
    box-shadow: 0 0 0 4px rgba(245,66,125,0.15);
}
.uf-stage svg {
    width: 92%;
    height: 92%;
    display: block;
}

/* ---------- shape shell (D.2 rectangle / D.3 square) ---------- */
.uf-shape-fill {
    fill: #eef2ff;
    stroke: none;
}
.uf-shape-outline {
    fill: none;
    stroke: var(--line);
    stroke-width: 3;
    stroke-linejoin: round;
}
.uf-tick {
    stroke: #5b7fdb;
    stroke-width: 2.5;
    stroke-linecap: round;
}
.uf-side-label-text {
    font-size: 16px;
    font-weight: 800;
    fill: #233c66;
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke fill;
    stroke: #ffffff;
    stroke-width: 4px;
    stroke-linejoin: round;
}
.uf-side-label-text.uf-missing {
    fill: #d3242f;
    font-size: 19px;
}
.uf-center-label {
    font-size: 15px;
    font-weight: 800;
    fill: #6a4b16;
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke fill;
    stroke: #fff8e0;
    stroke-width: 5px;
    stroke-linejoin: round;
}

/* ---------- D.1 "fact card" (Plug and Play — Square) ----------
   No picture, per design: a plain flashcard-style readout of the
   given side length plus a small reminder of the formula being
   practiced, so the drill is pure numeric fluency once the visual
   sense from the Regular Shapes tier is already solid. */
.uf-fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-align: center;
}
.uf-fact-label {
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a7a68;
}
.uf-fact-value {
    font-size: clamp(24px, 7vw, 34px);
    font-weight: 900;
    color: #233c66;
    line-height: 1.15;
}
.uf-fact-sub {
    font-size: clamp(18px, 5.5vw, 26px);
    font-weight: 800;
    color: #233c66;
}
.uf-formula-chip {
    display: inline-block;
    margin-top: 4px;
    padding: 7px 14px;
    border-radius: 12px;
    background: #fff3b0;
    border: 2px solid #e0b400;
    font-weight: 800;
    font-size: clamp(13px, 3.6vw, 16px);
    color: #6a4b16;
}

/* ---------- D.4 "scenario card" (Unit Sense-Check) ----------
   A large real-world icon plus a short description of the object's
   approximate size, standing in for the "is it closer to X or Y?"
   estimation prompt \u2014 the numeric options underneath carry the
   actual choices. */
.uf-scenario {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
}
.uf-scenario-icon {
    font-size: clamp(40px, 12vw, 60px);
    line-height: 1;
}
.uf-scenario-text {
    font-size: clamp(13px, 3.8vw, 16px);
    font-weight: 700;
    color: #3a2c1f;
    line-height: 1.35;
    max-width: 260px;
}

/* ---------- shared answer-chip row (all four skills' answer chips) ----------
   flex row with flex-wrap: nowrap = guaranteed single line at every
   width, on every browser (including older Android WebViews that
   may not fully support CSS Grid) \u2014 the row can never break into
   two rows. Each chip is an equal-width flex item (flex: 1 1 0,
   min-width: 0) so it shrinks instead of overflowing; the chip's own
   text uses clamp() and may wrap to a second line *inside its own
   chip*, but the row itself never does. Works for plain numbers
   (D.1\u2013D.3) and short length-with-unit strings (D.4) alike. */
.uf-options {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(5px, 1.8vw, 14px);
    width: 100%;
    max-width: 560px;
    margin: 18px auto 4px;
}
.uf-opt {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 8px 3px;
    border-radius: 14px;
    border: 3px solid var(--line);
    background: #fff;
    font-family: inherit;
    font-weight: 800;
    color: #3a2c1f;
    font-size: clamp(11px, 3.2vw, 17px);
    line-height: 1.15;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.uf-opt:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 rgba(0,0,0,0.08);
}
.uf-opt:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}
.uf-opt:focus-visible {
    outline: 3px solid #4a90e2;
    outline-offset: 2px;
}
.uf-opt:disabled { cursor: default; }
.uf-opt.is-correct {
    border-color: #22c08d;
    background: #eafff6;
    box-shadow: 0 0 0 4px rgba(34,192,141,0.18);
}
.uf-opt.is-wrong {
    border-color: #f5427d;
    background: #fff0f4;
    box-shadow: 0 0 0 4px rgba(245,66,125,0.15);
}

/* ---------- helper caption under the stage ---------- */
.uf-unit-hint {
    text-align: center;
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 700;
    color: #8a7a68;
    margin: 2px auto 0;
}

/* ---------- responsive tuning (mirrors perimeter-regular-shapes.css) ---------- */
@media (max-width: 380px) {
    .uf-stage { width: clamp(180px, 78vw, 260px); min-height: clamp(130px, 42vw, 180px); margin: 10px auto 4px; padding: 8px; }
    .uf-options { gap: 5px; margin: 12px auto 4px; }
    .uf-opt { min-height: 50px; padding: 6px 3px; font-size: clamp(11px, 3.6vw, 14px); border-width: 2px; border-radius: 12px; }
    .uf-side-label-text { font-size: 13px; stroke-width: 3px; }
    .uf-side-label-text.uf-missing { font-size: 16px; }
    .uf-fact-value { font-size: clamp(20px, 7.5vw, 28px); }
    .uf-fact-sub { font-size: clamp(15px, 6vw, 22px); }
    .uf-scenario-icon { font-size: clamp(34px, 13vw, 48px); }
    .uf-scenario-text { font-size: clamp(12px, 4vw, 14px); }
}

@media (min-width: 480px) {
    .uf-opt { min-height: 64px; }
}

@media (min-width: 700px) {
    .uf-options { gap: 16px; }
    .uf-opt { min-height: 74px; font-size: 18px; }
}

@media (min-width: 900px) {
    .uf-stage { width: clamp(260px, 34vw, 340px); }
    .uf-opt { min-height: 80px; }
}

@media (max-height: 700px) {
    .uf-stage { width: clamp(180px, 46vw, 240px); margin: 8px auto 4px; }
    .uf-options { margin: 10px auto 4px; }
    .uf-opt { min-height: 48px; }
}