/* ================================================================
   fraction.css
   ----------------------------------------------------------------
   Styling for the Fraction Concepts (T.1-T.5) skill-quiz popups on
   the Class 1 Math page: Fair Shares Intro's drag-to-cut widget,
   Parts of a Whole's tap-to-shade circle/bar/square, Naming the
   Parts' drag-to-label chips, Halves/Thirds/Quarters' word+symbol
   picker, and Equal vs. Unequal Parts' Yes/No trap-question shapes.
   Split out of multiplication_division.css (which still holds every
   non-fraction skill's quiz styling) so fraction-only rules live in
   one dedicated file. Loaded as a plain stylesheet link, after
   multiplication_division.css, so load order only matters where a
   rule here intentionally overrides something earlier (kept as-is,
   in original order, from the block this was extracted from).
   ================================================================ */

    /* ---- Fair Shares Intro (T.1) drag-to-cut widget ----
       .fair-cookie-stage is the un-clipped positioning context (so the
       knife "grab tabs" can stick out past the circle's edge and stay
       tappable); .fair-cookie-circle is the round, overflow:hidden
       shape that clips the color pieces and the knife lines into a
       true circle automatically, so no SVG/canvas is needed - just
       absolutely-positioned rectangles clipped by a round parent. */
    .fair-cookie-stage {
        position: relative;
        width: clamp(200px, 55vw, 280px);
        height: clamp(200px, 55vw, 280px);
        margin: 18px auto 8px;
        touch-action: none;
    }
    .fair-cookie-circle {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        overflow: hidden;
        background: #f3d9a4;
        box-shadow: 0 8px 0 rgba(0,0,0,0.08), inset 0 0 0 6px rgba(255,255,255,0.5);
    }
    .fair-piece {
        position: absolute;
        transition: background-color 0.2s ease;
    }
    .fair-knife-line {
        position: absolute;
        background: #4a3323;
        z-index: 3;
        pointer-events: none;
    }
    .fair-knife-line.is-correct { background: #10b981; }
    .fair-knife-line.is-wrong { background: #ef4444; }
    .fair-knife-handle {
        position: absolute;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #fff;
        border: 3px solid #4a3323;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4a3323;
        font-size: 0.95rem;
        cursor: grab;
        z-index: 4;
        touch-action: none;
        box-shadow: 0 2px 0 rgba(0,0,0,0.15);
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }
    .fair-knife-handle:active { cursor: grabbing; }
    .fair-knife-handle.is-correct { border-color: #10b981; color: #10b981; }
    .fair-knife-handle.is-wrong { border-color: #ef4444; color: #ef4444; }
    .fair-knife-handle.is-locked { pointer-events: none; }
    .fair-item-label {
        text-align: center;
        font-weight: 700;
        font-size: clamp(1rem, 4vw, 1.2rem);
        margin-bottom: 4px;
    }
    #fracFairCutBtn {
        display: block;
        margin: 14px auto 4px;
    }

    /* ---- Parts of a Whole (T.2) tap-to-shade widget ----
       Three interchangeable shape renderers (circle wedges via SVG
       paths, a bar of equal flex segments, a square split into an
       auto-sized grid) all driving the exact same shaded-count state,
       so "2 out of 4 parts" reads identically regardless of which
       shape is on screen that question. */
    .frac-parts-stage {
        display: flex;
        justify-content: center;
        margin: 16px auto 10px;
    }
    .frac-parts-circle-svg {
        width: clamp(190px, 50vw, 250px);
        height: clamp(190px, 50vw, 250px);
    }
    .frac-parts-circle-svg path {
        fill: #f3f4f6;
        stroke: #fff;
        stroke-width: 3;
        cursor: pointer;
        transition: fill 0.15s ease;
    }
    .frac-parts-circle-svg path.is-shaded { fill: #7ecbff; }
    .frac-parts-circle-svg.is-locked path { cursor: default; }

    .frac-parts-bar {
        display: flex;
        width: clamp(240px, 70vw, 420px);
        height: clamp(70px, 18vw, 100px);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 0 rgba(0,0,0,0.08);
    }
    .frac-parts-bar-segment {
        flex: 1 1 0;
        background: #f3f4f6;
        border-right: 3px solid #fff;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }
    .frac-parts-bar-segment:last-child { border-right: none; }
    .frac-parts-bar-segment.is-shaded { background: #7ecbff; }
    .frac-parts-bar.is-locked .frac-parts-bar-segment { cursor: default; }

    .frac-parts-square-grid {
        display: grid;
        width: clamp(220px, 55vw, 280px);
        height: clamp(220px, 55vw, 280px);
        gap: 3px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 0 rgba(0,0,0,0.08);
    }
    .frac-parts-square-cell {
        background: #f3f4f6;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }
    .frac-parts-square-cell.is-shaded { background: #7ecbff; }
    .frac-parts-square-grid.is-locked .frac-parts-square-cell { cursor: default; }

    /* Green/red ring around whichever shape is on screen once "Check"
       has been tapped and the attempt is graded. */
    .frac-parts-stage.is-correct > * { outline: 4px solid #10b981; outline-offset: 4px; border-radius: 50%; }
    .frac-parts-stage.is-wrong > * { outline: 4px solid #ef4444; outline-offset: 4px; border-radius: 50%; }
    .frac-parts-stage.is-correct .frac-parts-bar,
    .frac-parts-stage.is-correct .frac-parts-square-grid { border-radius: 16px; }
    .frac-parts-stage.is-wrong .frac-parts-bar,
    .frac-parts-stage.is-wrong .frac-parts-square-grid { border-radius: 16px; }

    #fracPartsCountText {
        text-align: center;
        font-weight: 700;
        color: #4a5568;
        margin: 4px 0 2px;
    }
    #fracPartsCheckBtn {
        display: block;
        margin: 14px auto 4px;
    }

    /* ---- Naming the Parts (T.3) drag-to-label widget ----
       Reuses Parts of a Whole's circle/bar/square shape renderers as
       a static, pre-shaded display (fracNameShapeWrap gets the same
       .frac-parts-stage class, and each shape gets .is-locked so the
       existing "no pointer cursor" rules apply), and reuses Fair
       Shares Intro's pointer-drag plumbing for the two number tiles
       (the shaded-part count and the total-part count) as they're
       dragged from the tray into the numerator (top) or denominator
       (bottom) slot of an empty fraction frame. */
    .frac-name-stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        margin: 10px auto 4px;
    }
    .frac-name-fraction-frame {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .frac-name-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .frac-name-slot {
        position: relative;
        width: 72px;
        height: 72px;
        border-radius: 16px;
        border: 3px dashed var(--line);
        background: var(--bg-light);
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }
    .frac-name-slot.drag-over {
        background: color-mix(in srgb, var(--sky) 20%, white);
        border-color: var(--sky);
    }
    .frac-name-slot.filled {
        border-style: solid;
        border-color: var(--line);
    }
    .frac-name-slot.filled .frac-name-slot-placeholder {
        display: none;
    }
    .frac-name-slot.is-correct {
        border-color: #10b981;
        background: color-mix(in srgb, #10b981 14%, white);
        animation: frac-name-slot-pop 0.3s ease;
    }
    .frac-name-slot.is-wrong {
        border-color: #ef4444;
        background: color-mix(in srgb, #ef4444 12%, white);
        animation: frac-name-slot-shake 0.35s ease;
    }
    @keyframes frac-name-slot-pop {
        0% { transform: scale(1); }
        50% { transform: scale(1.08); }
        100% { transform: scale(1); }
    }
    @keyframes frac-name-slot-shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }
    .frac-name-slot-placeholder {
        font-family: 'Nunito', sans-serif;
        font-weight: 800;
        font-size: 26px;
        color: var(--line);
    }
    .frac-name-bar {
        width: 100px;
        height: 5px;
        border-radius: 3px;
        background: var(--text);
    }
    .frac-name-caption {
        font-family: 'Nunito', sans-serif;
        font-weight: 700;
        font-size: 14px;
        color: var(--text);
        text-transform: lowercase;
        text-align: center;
        margin: 0;
    }
    .frac-name-chip-tray {
        display: flex;
        justify-content: center;
        gap: 16px;
        min-height: 76px;
        padding-top: 6px;
    }
    .frac-name-chip {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        background: #fff;
        border: 3px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Nunito', sans-serif;
        font-weight: 800;
        font-size: 26px;
        color: var(--secondary);
        cursor: grab;
        touch-action: none;
        box-shadow: 0 4px 0 rgba(0,0,0,0.08);
        box-sizing: border-box;
        z-index: 2;
    }
    .frac-name-chip:active { cursor: grabbing; }
    .frac-name-chip.dragging {
        position: fixed;
        z-index: 999;
        box-shadow: 0 8px 16px rgba(0,0,0,0.18);
        transform: scale(1.06);
        cursor: grabbing;
    }
    .frac-name-slot .frac-name-chip {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        box-shadow: none;
        border-style: solid;
    }
    .frac-name-chip.is-locked {
        cursor: default;
        pointer-events: none;
        opacity: 0.9;
    }
    #fracNameCheckBtn {
        display: block;
        margin: 14px auto 4px;
    }
    #fracNameCheckBtn:disabled {
        opacity: 0.5;
        cursor: default;
        box-shadow: none;
        transform: none;
    }

    /* Naming the Parts — mobile responsiveness (tablets / large phones) */
    @media (max-width: 560px) {
        .frac-name-slot { width: 60px; height: 60px; }
        .frac-name-slot-placeholder { font-size: 22px; }
        .frac-name-chip { width: 54px; height: 54px; font-size: 22px; }
        .frac-name-bar { width: 80px; }
    }

    /* ---- Halves, Thirds & Quarters (T.4) word/symbol picker ----
       Reuses the shared quiz-number-opt button for both the "Word" and
       "Symbol" chip rows, but overrides its sizing here: the shared
       style is a small fixed-size circle sized for single digits, which
       is too cramped for "one quarter" (it wrapped and overlapped the
       neighboring chip on narrow Android screens). Word/symbol chips
       here are pill-shaped and size to their own text instead, and the
       row wraps to a second line if it ever doesn't fit. This file also
       adds the row layout, a small label above each row, and the
       "picked but not yet graded" highlight the other quiz-number-opt
       users don't need (they lock immediately on tap instead of waiting
       for a separate Check step). */
    .frac-friendly-picker {
        margin: 10px auto 0;
        max-width: 420px;
    }
    .frac-friendly-picker-label {
        text-align: center;
        font-family: 'Nunito', sans-serif;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #8a94a6;
        margin: 0 0 6px;
    }
    .frac-friendly-picker .quiz-number-options {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 10px;
    }
    .frac-friendly-picker .quiz-number-opt {
        width: auto;
        height: auto;
        min-width: 64px;
        min-height: 48px;
        border-radius: 16px;
        padding: 10px 16px;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
        word-break: normal;
    }
    /* Symbol-row chips show a stacked numerator/bar/denominator (like
       "1" over a line over "2") instead of flat "1/2" text, so the
       fraction notation looks the same everywhere in the app while
       kids are still learning what the symbol means. */
    .frac-friendly-picker .frac-friendly-symbol-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 52px;
        padding: 8px 18px;
    }
    .frac-friendly-symbol-num,
    .frac-friendly-symbol-den {
        display: block;
        font-family: 'Nunito', sans-serif;
        font-weight: 800;
        font-size: 20px;
        line-height: 1;
        color: inherit;
    }
    .frac-friendly-symbol-bar {
        display: block;
        width: 22px;
        height: 3px;
        border-radius: 2px;
        background: currentColor;
    }
    .quiz-number-opt.is-selected {
        border-color: var(--sky);
        background: color-mix(in srgb, var(--sky) 16%, white);
    }
    #fracFriendlyCheckBtn {
        display: block;
        margin: 16px auto 4px;
    }
    #fracFriendlyCheckBtn:disabled {
        opacity: 0.5;
        cursor: default;
        box-shadow: none;
        transform: none;
    }

    /* ---- Equal vs. Unequal Parts (T.5) trap-question widget ----
       Two shape renderers (circle wedges / bar segments, alternating
       every question) both driven by a `proportions` array of
       percentages that either divide the whole exactly evenly or
       deliberately skew one piece bigger and another smaller - the
       same visual language as Parts of a Whole's circle/bar, but
       sized from real percentages instead of always-equal CSS
       flex/grid so an "unequal" question visibly shows a bigger and a
       smaller slice. Each piece also gets its own fill color (instead
       of Parts of a Whole's single shaded-blue) so the size
       difference reads at a glance. Static display only - no
       tap-to-shade - since the whole point of this skill is judging
       the picture, not building it. */
    .frac-equal-stage {
        display: flex;
        justify-content: center;
        margin: 16px auto 10px;
    }
    .frac-equal-circle-svg {
        width: clamp(190px, 50vw, 250px);
        height: clamp(190px, 50vw, 250px);
    }
    .frac-equal-circle-svg path {
        stroke: #fff;
        stroke-width: 3;
    }
    .frac-equal-bar {
        display: flex;
        width: clamp(240px, 70vw, 420px);
        height: clamp(70px, 18vw, 100px);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 0 rgba(0,0,0,0.08);
    }
    .frac-equal-bar-segment {
        border-right: 3px solid #fff;
    }
    .frac-equal-bar-segment:last-child { border-right: none; }

    /* Green/red ring around whichever shape is on screen once Yes/No
       has been tapped and the attempt is graded - same treatment as
       Parts of a Whole's is-correct/is-wrong ring. */
    .frac-equal-stage.is-correct > * { outline: 4px solid #10b981; outline-offset: 4px; border-radius: 50%; }
    .frac-equal-stage.is-wrong > * { outline: 4px solid #ef4444; outline-offset: 4px; border-radius: 50%; }
    .frac-equal-stage.is-correct .frac-equal-bar,
    .frac-equal-stage.is-wrong .frac-equal-bar { border-radius: 16px; }

    .frac-equal-choice-row {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin: 18px auto 4px;
    }
    .frac-equal-choice-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 120px;
        padding: 12px 28px;
        border-radius: 16px;
        border: 3px solid var(--line);
        background: #fff;
        font-family: 'Nunito', sans-serif;
        font-weight: 800;
        font-size: 17px;
        color: #4a5568;
        cursor: pointer;
        transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
    }
    .frac-equal-choice-btn:hover { transform: translateY(-2px); }
    .frac-equal-choice-btn.is-picked { border-color: var(--sky); }
    .frac-equal-choice-btn.is-correct-choice {
        border-color: #10b981;
        background: color-mix(in srgb, #10b981 14%, white);
        color: #0d7a53;
    }
    .frac-equal-choice-btn.is-wrong-choice {
        border-color: #ef4444;
        background: color-mix(in srgb, #ef4444 14%, white);
        color: #b91c1c;
    }
    .frac-equal-choice-btn:disabled {
        cursor: default;
        transform: none;
    }