/* ================================================================
   rect-square-formula.css
   ----------------------------------------------------------------
   Styling for the "Rectangles & Squares: From Counting to the
   Formula" skill quizzes on the Class 5 Math page:

     - A.1 Rows and Columns          (.rsf-stage, grid with axis counts)
     - A.2 Skip-Counting Shortcut    (.rsf-stage, number-line hops)
     - A.3 Length x Width Reveal     (.rsf-stage, ruler-style rectangle)
     - A.4 Square Special Case       (.rsf-stage, equal-side square)
     - A.5 Missing Side Puzzles      (.rsf-stage, area + one side given)
     - A.6 Guess, Then Check         (.rsf-stage, themed real object)

   Independent stylesheet (own "rsf-" prefixed classes, does not
   reuse grid-area-counting.css's ".grid-*" classes or
   area-foundations.css's ".area-*" classes) but mirrors the same
   bordered "stage" card language (rings green/red via
   .is-correct/.is-wrong once graded) and the same shared answer-chip
   row: a 4-column CSS Grid \u2014 not a wrapping flex row \u2014 so all
   four answers are FORCED onto a single line at every viewport width
   down to small Android phones; text inside a chip shrinks (via
   clamp()) and may wrap to a second line inside its own cell, but the
   row itself never breaks into two rows. Loaded as a plain stylesheet
   link, independent of every other skill's CSS.
   ================================================================ */

/* ---------- shared visual "stage" (all six skills) ---------- */
.rsf-stage {
    width: clamp(220px, 74vw, 340px);
    aspect-ratio: 1 / 1;
    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;
}
.rsf-stage.is-correct {
    border-color: #22c08d;
    box-shadow: 0 0 0 4px rgba(34,192,141,0.18);
}
.rsf-stage.is-wrong {
    border-color: #f5427d;
    box-shadow: 0 0 0 4px rgba(245,66,125,0.15);
}
.rsf-stage svg {
    width: 92%;
    height: 92%;
    display: block;
}

/* Number-line skills (A.2) read better a bit wider/shorter than a
   perfect square, so give that stage its own aspect ratio while
   keeping the same border/ring language. */
.rsf-stage.rsf-stage-wide {
    aspect-ratio: 4 / 3;
    width: clamp(240px, 86vw, 420px);
}

/* ---------- shared grid-paper lines (A.1) ---------- */
.rsf-line {
    stroke: #cfd8e3;
    stroke-width: 1;
}
.rsf-bounds {
    fill: none;
    stroke: #b7c2cf;
    stroke-width: 1.5;
}

/* ---------- A.1 Rows and Columns ---------- */
.rsf-cell-normal {
    fill: #7ecbff;
    stroke: #4a90c9;
    stroke-width: 1.2;
}
.rsf-cell-highlight {
    fill: #ffd166;
    stroke: #e0a72e;
    stroke-width: 1.2;
}
.rsf-axis-label {
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    fill: #5b4636;
    text-anchor: middle;
}
.rsf-axis-caption {
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    fill: #8a5a2e;
    text-anchor: middle;
}

/* ---------- A.2 Skip-Counting Shortcut (number line) ---------- */
.rsf-nl-line {
    stroke: #b7c2cf;
    stroke-width: 2;
}
.rsf-nl-tick {
    stroke: #8a7a68;
    stroke-width: 2;
}
.rsf-nl-dot {
    fill: #4a90e2;
    stroke: #2f6bb0;
    stroke-width: 1;
}
.rsf-nl-dot-final {
    fill: #fff;
    stroke: #f5427d;
    stroke-width: 2.5;
}
.rsf-nl-hop {
    fill: none;
    stroke: #ffb672;
    stroke-width: 2.5;
}
.rsf-nl-label {
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    fill: #3a2c1f;
    text-anchor: middle;
}
.rsf-nl-hop-label {
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    fill: #a97c30;
    text-anchor: middle;
}
.rsf-nl-question {
    font-family: inherit;
    font-size: 20px;
    font-weight: 900;
    fill: #f5427d;
    text-anchor: middle;
}
.rsf-nl-caption {
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    fill: #8a5a2e;
    text-anchor: middle;
}

/* ---------- A.3 / A.4 dimension diagrams (rectangle & square) ---------- */
.rsf-rect-fill {
    fill: #c8e9ff;
    stroke: #4a90c9;
    stroke-width: 2.2;
}
.rsf-square-fill {
    fill: #d8f5e3;
    stroke: #33a874;
    stroke-width: 2.2;
}
.rsf-dim-arrow {
    stroke: #5b4636;
    stroke-width: 1.6;
    fill: none;
}
.rsf-tick-mark {
    stroke: #5b4636;
    stroke-width: 1.4;
}
.rsf-dim-label {
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    fill: #3a2c1f;
    text-anchor: middle;
}
.rsf-equal-tick {
    stroke: #33a874;
    stroke-width: 2.2;
}
.rsf-formula-bg {
    fill: #fff8e8;
    stroke: #f0c96e;
    stroke-width: 1.5;
}
.rsf-formula-text {
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    fill: #8a5a2e;
    text-anchor: middle;
}

/* ---------- A.5 Missing Side Puzzles ---------- */
.rsf-missing-dim {
    stroke: #f5427d;
    stroke-width: 2.2;
    stroke-dasharray: 5,4;
    fill: none;
}
.rsf-known-label {
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    fill: #3a2c1f;
    text-anchor: middle;
}
.rsf-missing-label {
    font-family: inherit;
    font-size: 18px;
    font-weight: 900;
    fill: #f5427d;
    text-anchor: middle;
}
.rsf-area-tag-bg {
    fill: #fff8e8;
    stroke: #f0c96e;
    stroke-width: 1.5;
}
.rsf-area-tag-text {
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    fill: #8a5a2e;
    text-anchor: middle;
}

/* ---------- A.6 Guess, Then Check (themed real objects) ---------- */
.rsf-theme-garden {
    fill: #94d97e;
    stroke: #4f9e3a;
    stroke-width: 2.2;
}
.rsf-theme-table {
    fill: #e0b482;
    stroke: #a97c46;
    stroke-width: 2.2;
}
.rsf-theme-rug {
    fill: #ff8fa3;
    stroke: #d84f6b;
    stroke-width: 2.2;
}
.rsf-theme-wall {
    fill: #a9c4dd;
    stroke: #5c85ab;
    stroke-width: 2.2;
}
.rsf-theme-playground {
    fill: #f0c96e;
    stroke: #c99a2e;
    stroke-width: 2.2;
}
.rsf-guess-tag-bg {
    fill: #eef6ff;
    stroke: #a9c4dd;
    stroke-width: 1.5;
}
.rsf-guess-tag-text {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    fill: #3a5a78;
    text-anchor: middle;
}

/* ---------- shared answer-chip row (all six skills' chips) ----------
   4-column grid = guaranteed single line at every width; never
   switches to flex-wrap, so the four chips can't stack. */
.rsf-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(6px, 2vw, 14px);
    width: 100%;
    max-width: 620px;
    margin: 18px auto 4px;
}
.rsf-opt {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 58px;
    padding: 8px 4px;
    border-radius: 14px;
    border: 3px solid var(--line);
    background: #fff;
    font-family: inherit;
    font-weight: 700;
    color: #3a2c1f;
    font-size: clamp(11px, 3.3vw, 16px);
    line-height: 1.15;
    text-align: center;
    word-break: break-word;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.rsf-opt:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 rgba(0,0,0,0.08);
}
.rsf-opt:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}
.rsf-opt:focus-visible {
    outline: 3px solid #4a90e2;
    outline-offset: 2px;
}
.rsf-opt:disabled { cursor: default; }
.rsf-opt.is-correct {
    border-color: #22c08d;
    background: #eafff6;
    box-shadow: 0 0 0 4px rgba(34,192,141,0.18);
}
.rsf-opt.is-wrong {
    border-color: #f5427d;
    background: #fff0f4;
    box-shadow: 0 0 0 4px rgba(245,66,125,0.15);
}

/* Number chips (all six skills) can afford slightly larger digits
   when the label is short (no unit suffix). */
.rsf-opt.rsf-opt-number {
    font-size: clamp(14px, 4.4vw, 20px);
    font-weight: 800;
}
/* Chips that carry a unit suffix ("24 sq cm") need a touch more
   headroom so they still fit one line inside their own cell. */
.rsf-opt.rsf-opt-unit {
    font-size: clamp(10.5px, 3vw, 15px);
    font-weight: 800;
}

/* ---------- responsive tuning ---------- */
@media (max-width: 380px) {
    .rsf-stage { width: clamp(180px, 80vw, 270px); margin: 10px auto 4px; }
    .rsf-stage.rsf-stage-wide { width: clamp(220px, 88vw, 320px); }
    .rsf-options { gap: 5px; margin: 12px auto 4px; }
    .rsf-opt { min-height: 50px; padding: 6px 3px; font-size: clamp(10px, 3.2vw, 13px); border-width: 2px; border-radius: 12px; }
    .rsf-opt.rsf-opt-number { font-size: clamp(13px, 4.2vw, 18px); }
    .rsf-opt.rsf-opt-unit { font-size: clamp(9.5px, 2.9vw, 12.5px); }
}

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

@media (min-width: 700px) {
    .rsf-options { gap: 16px; }
    .rsf-opt { min-height: 74px; font-size: 17px; }
    .rsf-opt.rsf-opt-number { font-size: 21px; }
    .rsf-opt.rsf-opt-unit { font-size: 15px; }
}

@media (min-width: 900px) {
    .rsf-stage { width: clamp(270px, 36vw, 360px); }
    .rsf-stage.rsf-stage-wide { width: clamp(340px, 46vw, 460px); }
    .rsf-opt { min-height: 80px; }
}

@media (max-height: 700px) {
    .rsf-stage { width: clamp(180px, 48vw, 250px); margin: 8px auto 4px; }
    .rsf-stage.rsf-stage-wide { width: clamp(220px, 56vw, 320px); }
    .rsf-options { margin: 10px auto 4px; }
    .rsf-opt { min-height: 48px; }
}