/* ================================================================
   perimeter-real-world.css
   ----------------------------------------------------------------
   Styling for the "Real-World & Composite Shapes" skill quizzes on
   the Class 5 Math page:

     - A.1 Garden Fencing Word Problems   (.rw-fact card, dashed
                                            "fence" rectangle)
     - A.2 Irregular / Composite Figures  (.rw-stage svg, 6-sided
                                            L-shape, all sides labeled)
     - A.3 Missing Side Puzzle (Composite)(.rw-stage svg, 2 of 6
                                            sides shown as "?")
     - A.4 Perimeter vs Area \u2014 Final       (.rw-scenario card, real-
       Discrimination Check                world icon + word problem)

   This tier comes right after "Using the Formulas (Numeric
   Fluency)" and reuses the same visual language (a bordered "stage"
   card that rings green/red once graded, plus a 4-chip answer row
   forced onto a single line) but is a fully self-contained
   stylesheet with its own "rw-" class prefix \u2014 it does not read
   any class from perimeter-foundations.css, perimeter-measuring.css,
   perimeter-regular-shapes.css, or perimeter-formulas.css, and is
   loaded as its own <link> tag.

   The answer-chip row (.rw-options / .rw-opt) is a flex row with
   flex-wrap: nowrap, so all four answers are FORCED onto a single
   line at every viewport width, down to small Android phones \u2014
   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 A.2 and A.3, which draw an actual composite shape. A.1
   and A.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. A.2/A.3
   need a bit more room than the Tier-4 stage since a 6-sided shape
   carries more labels than a square or rectangle. */
.rw-stage {
    width: clamp(230px, 74vw, 340px);
    min-height: clamp(160px, 44vw, 230px);
    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;
}
.rw-stage.is-correct {
    border-color: #22c08d;
    box-shadow: 0 0 0 4px rgba(34,192,141,0.18);
}
.rw-stage.is-wrong {
    border-color: #f5427d;
    box-shadow: 0 0 0 4px rgba(245,66,125,0.15);
}
.rw-stage svg {
    width: 94%;
    height: 94%;
    display: block;
}

/* ---------- shape shell (A.2 / A.3 composite L-shape) ---------- */
.rw-shape-fill {
    fill: #eafaf0;
    stroke: none;
}
.rw-shape-outline {
    fill: none;
    stroke: var(--line);
    stroke-width: 3;
    stroke-linejoin: round;
}
.rw-side-label-text {
    font-size: 14px;
    font-weight: 800;
    fill: #1c6e4a;
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke fill;
    stroke: #ffffff;
    stroke-width: 4px;
    stroke-linejoin: round;
}
.rw-side-label-text.rw-missing {
    fill: #d3242f;
    font-size: 18px;
}

/* ---------- fenced rectangle shell (A.1 Garden Fencing) ----------
   A dashed outline stands in for a fence line around the plot, a
   quick visual cue that the quantity being asked about is the
   boundary, not the inside. */
.rw-fence-fill {
    fill: #eef8ec;
    stroke: none;
}
.rw-fence-outline {
    fill: none;
    stroke: #2f8f4e;
    stroke-width: 4;
    stroke-linejoin: round;
    stroke-dasharray: 9 6;
}
.rw-fence-post {
    fill: #2f8f4e;
}
.rw-fence-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;
}

/* ---------- A.1 "fact card" (Garden Fencing Word Problems) ----------
   Pairs a small real-world icon with the plot dimensions, plus a
   short reminder that fencing = going all the way around, so the
   word problem never becomes a bare "find X" without a picture of
   what's actually being fenced. */
.rw-fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
}
.rw-fact-icon {
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1;
}
.rw-fact-label {
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a7a68;
}
.rw-fact-value {
    font-size: clamp(20px, 6.4vw, 28px);
    font-weight: 900;
    color: #233c66;
    line-height: 1.2;
}
.rw-formula-chip {
    display: inline-block;
    margin-top: 2px;
    padding: 7px 14px;
    border-radius: 12px;
    background: #d9f4e6;
    border: 2px solid #2f8f4e;
    font-weight: 800;
    font-size: clamp(12px, 3.4vw, 15px);
    color: #1c6e4a;
}

/* ---------- A.4 "scenario card" (Perimeter vs Area) ----------
   A real-world icon plus the full word problem text \u2014 the kid must
   read closely enough to tell whether the boundary or the surface
   is being asked about before ever touching the numbers. */
.rw-scenario {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
}
.rw-scenario-icon {
    font-size: clamp(38px, 11vw, 56px);
    line-height: 1;
}
.rw-scenario-text {
    font-size: clamp(13px, 3.7vw, 16px);
    font-weight: 700;
    color: #3a2c1f;
    line-height: 1.4;
    max-width: 280px;
}
.rw-scenario-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 10px;
    background: #fff3b0;
    border: 2px solid #e0b400;
    font-weight: 800;
    font-size: clamp(10px, 2.8vw, 12px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6a4b16;
}

/* ---------- 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
   (A.2\u2013A.3) and short length/area-with-unit strings (A.1, A.4)
   alike. */
.rw-options {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(5px, 1.8vw, 14px);
    width: 100%;
    max-width: 560px;
    margin: 18px auto 4px;
}
.rw-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;
}
.rw-opt:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 rgba(0,0,0,0.08);
}
.rw-opt:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}
.rw-opt:focus-visible {
    outline: 3px solid #4a90e2;
    outline-offset: 2px;
}
.rw-opt:disabled { cursor: default; }
.rw-opt.is-correct {
    border-color: #22c08d;
    background: #eafff6;
    box-shadow: 0 0 0 4px rgba(34,192,141,0.18);
}
.rw-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 ---------- */
.rw-unit-hint {
    text-align: center;
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 700;
    color: #8a7a68;
    margin: 2px auto 0;
}

/* ---------- responsive tuning (mirrors perimeter-formulas.css) ---------- */
@media (max-width: 380px) {
    .rw-stage { width: clamp(190px, 80vw, 270px); min-height: clamp(140px, 46vw, 195px); margin: 10px auto 4px; padding: 8px; }
    .rw-options { gap: 5px; margin: 12px auto 4px; }
    .rw-opt { min-height: 50px; padding: 6px 3px; font-size: clamp(11px, 3.6vw, 14px); border-width: 2px; border-radius: 12px; }
    .rw-side-label-text { font-size: 11px; stroke-width: 3px; }
    .rw-side-label-text.rw-missing { font-size: 15px; }
    .rw-fence-label-text { font-size: 13px; }
    .rw-fact-value { font-size: clamp(17px, 6.6vw, 24px); }
    .rw-fact-icon { font-size: clamp(26px, 10vw, 36px); }
    .rw-scenario-icon { font-size: clamp(32px, 12vw, 44px); }
    .rw-scenario-text { font-size: clamp(12px, 4vw, 14px); }
}

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

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

@media (min-width: 900px) {
    .rw-stage { width: clamp(280px, 36vw, 380px); }
    .rw-opt { min-height: 80px; }
}

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