/* ================================================================
   fraction-compare.css
   ----------------------------------------------------------------
   Styles for the "Fraction Comparing & Ordering" skill group on the
   Class 3 Math page:

     - A.1  Same Denominator Compare — two bars, each split into the
            same number of equal segments (the shared denominator)
            and shaded to their own numerator, sit side by side with
            a "vs" divider between them. Each bar carries its own
            stacked numerator/bar/denominator label underneath it and
            IS the tappable answer — the child taps whichever bar
            shows the bigger fraction. A tap grades immediately, the
            same one-shot pattern Fraction Match / Equivalent
            Fractions Visual Match already use elsewhere on this
            page.

     - A.2  Same Numerator Compare — identical side-by-side / "vs" /
            tap-to-answer layout as A.1, reusing the exact same
            .frac-cmp-* classes below as-is (nothing here is
            denominator-specific). The two shapes instead share a
            numerator and differ in how many equal pieces each is
            split into, and the shape itself (bar/circle/square) is
            randomized per question by fraction-compare.js for
            variety — the .frac-cmp-stage / .frac-cmp-option rules
            already size and center whichever shape gets drawn
            inside, so no new CSS is needed for the shape swap.

     - A.3  Benchmark Fractions (vs 0, 1/2, 1) — "Is 5/8 closer to
            0, 1/2, or 1?" A single shape (bar/circle/square,
            randomized per question) is drawn with its stacked
            fraction label underneath, same as one side of A.1/A.2
            (reuses .frac-cmp-stage as-is). Below it sit three plain
            pill buttons — 0, 1/2, 1 — using the new .frac-bench-*
            classes further down this file (same button feel as
            .frac-cmp-option, just sized for short text instead of a
            shape). Tapping a pill grades immediately, same one-shot
            pattern as A.1/A.2.

     - A.4  Cross-Denominator Compare (unlike fractions) — "Which is
            bigger: 2/3 or 3/4?" Identical side-by-side / "vs" /
            tap-to-answer layout as A.1/A.2, reusing the exact same
            .frac-cmp-* classes below as-is. Here both the numerator
            AND denominator differ between the two shapes (same
            shape type on both sides, randomized per question by
            fraction-compare.js), so the side-by-side picture itself
            is the "visual overlay" the child has to compare — no
            new CSS is needed for this variant either.

     - A.5  Ordering 3-4 Fractions — "Drag these into order, smallest
            to largest." 3 or 4 fraction cards (same shape type,
            randomized per question) sit in a row using the new
            .frac-order-* classes further down this file. Each card
            reuses .frac-cmp-stage/.frac-cmp-label as-is for the
            shape + fraction label, but the card itself is a plain
            draggable div (not a tap-to-answer button like
            .frac-cmp-option) — fraction-compare.js drags it around
            with Pointer Events, and grading only happens once, when
            the child taps "Check My Order," so the correct/wrong
            colors land on whichever position each card settled into
            rather than on a single tapped choice.

     - A.6  Fraction vs Fraction Number Line Placement — "Drag each
            fraction onto the number line where it belongs." Uses the
            new .frac-line-* classes further down this file: a plain
            0/1-2/1 number line (a static div with a few absolutely
            positioned tick marks/labels, not shape-drawing code) with
            a row of small round drag-markers floating above it,
            positioned purely by percentage (left: X%) so the same
            0%-100% scale lines up between the ticks row, the track
            row, and the markers row without any pixel-matched
            vertical alignment between them — deliberately simpler
            than A.5's card layout so it stays robust across phone
            widths. Same green/red grading vocabulary as everywhere
            else, applied once the child taps "Check Placement."

   This file only adds the .frac-cmp-*, .frac-bench-*,
   .frac-order-*, and .frac-line-* layout/grading classes. It
   depends on classes already styled elsewhere:

     - .frac-parts-stage / .frac-parts-bar / .frac-parts-bar-segment
       from fraction.css, for the bar shape itself (drawn by the
       shared renderStaticFracShape() helper in fraction-rwv.js)
     - .frac-friendly-symbol-num / -bar / -den from fraction.css, for
       the stacked fraction label under each bar (drawn by the shared
       renderFracSymbolInto() helper in fraction-rwv.js)
     - .bq-* / .quiz-* classes from quiz-popup-theme.css and
       quiz-modal-responsive.css, for the modal shell, slot tracker,
       progress line, feedback banner, and star-reward summary card

   so this file must be loaded AFTER fraction.css and fraction-rwv.css,
   e.g.:

     <link rel="stylesheet" th:href="@{/css/fraction.css}" />
     <link rel="stylesheet" th:href="@{/css/fraction-rwv.css}" />
     <link rel="stylesheet" th:href="@{/css/fraction-compare.css}" />
   ================================================================ */

/* ---------- Same Denominator Compare (A.1) ---------- */

.frac-cmp-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 18px auto 6px;
    flex-wrap: wrap;
}

/* Each side of the comparison is its own plain <button> — the whole
   card (bar + label) is the tappable answer, not just a caption
   underneath it. */
.frac-cmp-option {
    flex: 0 0 auto;
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 16px;
    border-radius: 18px;
    border: 3px solid var(--line);
    background: transparent;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.frac-cmp-option:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: var(--sky);
    box-shadow: 0 10px 20px -12px rgba(30,58,95,0.25);
}
.frac-cmp-option:active:not(:disabled) { transform: translateY(-1px); }
.frac-cmp-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(46,155,245,0.35);
}
.frac-cmp-option:disabled { cursor: default; }

.frac-cmp-stage { width: 100%; pointer-events: none; }
.frac-cmp-option .frac-parts-bar {
    width: 100% !important;
    max-width: 100% !important;
    height: 64px !important;
}

.frac-cmp-label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

/* Post-answer grading states — same green/red vocabulary as every
   other one-shot-tap skill on the page (Fraction Match's chips,
   Equivalent Fractions Visual Match's Yes/No). */
.frac-cmp-option.is-correct {
    border-color: #10b981;
    background: rgba(16,185,129,0.08);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.frac-cmp-option.is-wrong {
    border-color: #ef4444;
    background: rgba(239,68,68,0.08);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}

.frac-cmp-vs {
    flex: 0 0 auto;
    font-weight: 800;
    font-size: 20px;
    color: var(--secondary);
    opacity: 0.55;
}

/* ---------- phone responsiveness ---------- */
@media (max-width: 560px) {
    .frac-cmp-pair { gap: 10px; margin: 14px auto 4px; }
    .frac-cmp-option {
        width: 44%;
        min-width: 128px;
        padding: 14px 10px 12px;
        gap: 8px;
        border-radius: 14px;
    }
    .frac-cmp-option .frac-parts-bar { height: 46px !important; }
    .frac-cmp-vs { font-size: 15px; }
}

@media (max-width: 380px) {
    .frac-cmp-pair { gap: 8px; }
    .frac-cmp-option { width: 42%; min-width: 108px; padding: 10px 8px 10px; }
    .frac-cmp-option .frac-parts-bar { height: 38px !important; }
}

/* ---------- Benchmark Fractions (A.3) ---------- */
/* Single shape + label (reuses .frac-cmp-stage from A.1/A.2 as-is)
   sitting above three plain pill buttons — 0, 1/2, 1 — instead of a
   second shape. The pills share the same rounded-card / hover-lift /
   grading look as .frac-cmp-option so the whole A.1–A.3 group feels
   like one family. */

.frac-bench-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 18px auto 6px;
}

.frac-bench-stage-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 220px;
}
.frac-bench-stage-card .frac-parts-bar {
    width: 100% !important;
    max-width: 100% !important;
    height: 64px !important;
}

.frac-bench-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.frac-bench-option {
    flex: 0 0 auto;
    min-width: 84px;
    padding: 14px 10px;
    border-radius: 16px;
    border: 3px solid var(--line);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    font-size: 22px;
    color: var(--secondary);
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.frac-bench-option:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: var(--sky);
    box-shadow: 0 10px 20px -12px rgba(30,58,95,0.25);
}
.frac-bench-option:active:not(:disabled) { transform: translateY(-1px); }
.frac-bench-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(46,155,245,0.35);
}
.frac-bench-option:disabled { cursor: default; }

/* Same green/red grading vocabulary as .frac-cmp-option. */
.frac-bench-option.is-correct {
    border-color: #10b981;
    background: rgba(16,185,129,0.08);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.frac-bench-option.is-wrong {
    border-color: #ef4444;
    background: rgba(239,68,68,0.08);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}

/* ---------- phone responsiveness ---------- */
@media (max-width: 560px) {
    .frac-bench-wrap { margin: 14px auto 4px; gap: 8px; }
    .frac-bench-stage-card { width: 170px; }
    .frac-bench-stage-card .frac-parts-bar { height: 46px !important; }
    .frac-bench-options { gap: 10px; margin-top: 6px; }
    .frac-bench-option { min-width: 64px; padding: 10px 8px; font-size: 18px; border-radius: 14px; }
}

@media (max-width: 380px) {
    .frac-bench-stage-card { width: 150px; }
    .frac-bench-stage-card .frac-parts-bar { height: 38px !important; }
    .frac-bench-options { gap: 8px; }
    .frac-bench-option { min-width: 56px; padding: 8px 6px; font-size: 16px; }
}

/* ---------- Ordering 3-4 Fractions (A.5) ---------- */
/* A row of plain draggable cards (not tap-to-answer buttons like
   .frac-cmp-option) — fraction-compare.js reorders them with
   Pointer Events (mouse + touch) or Left/Right arrow keys, then
   grades the whole arrangement at once when "Check My Order" is
   tapped, coloring each card green/red by its final position. */

.frac-order-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 18px auto 10px;
    width: 100%;
}

.frac-order-legend {
    font-weight: 700;
    font-size: 14px;
    color: var(--secondary);
    opacity: 0.7;
    letter-spacing: 0.02em;
}

/* Padding here (not on .frac-order-card) is what keeps the
   top-left position badge from clipping off-screen on narrow
   Android widths — must stay >= the badge's negative offset at
   every breakpoint below. overflow-x/overscroll-behavior-x are a
   safety net only; card sizing is flexible (see below) so a normal
   phone width should never actually need to scroll to see a card. */
.frac-order-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 16px 10px;
}

/* Flexible width (flex-grow/shrink between a min and max) instead of
   a fixed px width — 3-4 cards always divide up the available row
   width, so this self-fits any Android screen (360px-430px is the
   common range) without relying on more breakpoints, and the
   overflow-x fallback above only ever kicks in on truly tiny
   viewports. */
.frac-order-card {
    position: relative;
    flex: 1 1 130px;
    min-width: 116px;
    max-width: 180px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 12px 14px;
    border-radius: 18px;
    border: 3px solid var(--line);
    background: transparent;
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-user-select: none;
    user-select: none;
}
.frac-order-card:active { cursor: grabbing; }
.frac-order-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(46,155,245,0.35);
}
.frac-order-card.is-dragging {
    z-index: 10;
    border-color: var(--sky);
    box-shadow: 0 14px 24px -12px rgba(30,58,95,0.35);
}
.frac-order-card .frac-parts-bar {
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
}

.frac-order-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sky);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Same green/red grading vocabulary as .frac-cmp-option /
   .frac-bench-option, applied per-card once "Check My Order" grades
   the final arrangement. */
.frac-order-card.is-correct {
    border-color: #10b981;
    background: rgba(16,185,129,0.08);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.frac-order-card.is-wrong {
    border-color: #ef4444;
    background: rgba(239,68,68,0.08);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}

/* ---------- phone responsiveness ---------- */
/* Card widths stay flexible (min/max only) at every breakpoint —
   only gaps, padding, and the badge/font sizes shrink — so common
   Android widths (360px Galaxy-class up through 412-430px Pixel/
   large-phone class) all lay out 3-4 cards per row without
   horizontal scrolling, even after accounting for the modal's own
   padding around the card content. Row padding is kept a couple px
   larger than the badge's negative offset at each step so the
   badge never clips at the row edge. */
@media (max-width: 560px) {
    .frac-order-wrap { margin: 14px auto 6px; gap: 10px; }
    .frac-order-row { gap: 8px; padding: 10px 10px 8px; }
    .frac-order-card { flex-basis: 96px; min-width: 78px; max-width: 136px; padding: 16px 8px 10px; gap: 6px; border-radius: 14px; }
    .frac-order-card .frac-parts-bar { height: 40px !important; }
    .frac-order-badge { width: 20px; height: 20px; font-size: 11px; top: -8px; left: -8px; }
    .frac-order-legend { font-size: 12px; }
}

@media (max-width: 380px) {
    .frac-order-row { gap: 6px; padding: 10px 10px 6px; }
    .frac-order-card { flex-basis: 76px; min-width: 68px; max-width: 104px; padding: 14px 6px 8px; }
    .frac-order-card .frac-parts-bar { height: 34px !important; }
}

/* ---------- Fraction vs Fraction Number Line Placement (A.6) ---------- */
/* Three stacked rows — markers, track, labels — all sharing the same
   horizontal padding, so a given left:X% means the exact same pixel
   position in every row without any pixel-matched vertical alignment
   between them. This (rather than trying to center markers exactly
   ON the line like real number-line pins) is what keeps the layout
   robust across phone widths: nothing here depends on a fixed
   height/width relationship that could drift at a breakpoint — only
   font/marker sizes and row heights shrink on narrow screens, the
   left:X% positions themselves never need recalculating. */

.frac-line-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 26px;
    box-sizing: border-box;
    margin: 18px auto 10px;
    gap: 8px;
}

/* Row 1: draggable markers, floating above the line. Width is set
   explicitly (not left to flex-stretch alone) so this row can never
   render at a different width than the track/labels rows below it —
   that mismatch is what caused markers to visually line up with the
   wrong spot on the line. */
.frac-line-chips {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    height: 66px;
}

.frac-line-chip {
    position: absolute;
    top: 50%;
    /* left is set inline per-marker (left: X%) by fraction-compare.js */
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid var(--line);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    color: var(--secondary);
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: 0 3px 8px -3px rgba(30,58,95,0.3);
    transition: border-color .15s ease, box-shadow .15s ease;
    z-index: 5;
}
.frac-line-chip:active { cursor: grabbing; }
.frac-line-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(46,155,245,0.35);
}
.frac-line-chip.is-dragging {
    z-index: 10;
    border-color: var(--sky);
    box-shadow: 0 12px 22px -10px rgba(30,58,95,0.4);
}

/* Same green/red grading vocabulary as every other skill on this
   page, applied once "Check Placement" grades the final spot. */
.frac-line-chip.is-correct {
    border-color: #10b981;
    background: rgba(16,185,129,0.12);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.frac-line-chip.is-wrong {
    border-color: #ef4444;
    background: rgba(239,68,68,0.12);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}

/* Row 2: the number line itself — a plain div, not shape-drawing
   code — with a few static tick marks (the same 0/1-4/1-2/3-4/1
   percentages at every screen size). Explicit width for the same
   reason as .frac-line-chips above — this row must always match the
   chips/labels rows' width exactly, or the ticks (and the markers'
   left:X% positions) stop lining up with what the labels say. */
.frac-line-track {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    margin: 2px 0;
}
.frac-line-tick {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 16px;
    background: var(--secondary);
    opacity: 0.5;
    transform: translate(-1px, -50%);
}
.frac-line-tick.minor {
    height: 9px;
    opacity: 0.3;
}

/* Row 3: labels for the benchmark ticks (0, 1/2, 1). Same explicit
   width as the two rows above, for the same reason. */
.frac-line-labels {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    height: 20px;
}
.frac-line-ticklabel {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-weight: 800;
    font-size: 14px;
    color: var(--secondary);
}

/* ---------- phone responsiveness ---------- */
/* Everything here is percentage-positioned already, so narrow
   Android widths just need smaller markers/ticks/fonts and less
   padding — no repositioning math, unlike A.5's card-width tuning. */
@media (max-width: 560px) {
    .frac-line-wrap { padding: 0 22px; margin: 14px auto 8px; gap: 6px; }
    .frac-line-chips { height: 54px; }
    .frac-line-chip { width: 44px; height: 44px; font-size: 11px; border-width: 2px; }
    .frac-line-tick { height: 13px; }
    .frac-line-tick.minor { height: 8px; }
    .frac-line-ticklabel { font-size: 12px; }
}

@media (max-width: 380px) {
    .frac-line-wrap { padding: 0 20px; }
    .frac-line-chips { height: 48px; }
    .frac-line-chip { width: 40px; height: 40px; font-size: 10px; }
    .frac-line-ticklabel { font-size: 11px; }
}