/* ================================================================
   decimal-compare-order.css
   ----------------------------------------------------------------
   Styles for the "Decimal Comparing & Ordering" skill group on the
   Class 4 Math page:

     - A.1  Same Place-Value Compare — two identical-size tenths
            bars side by side, shaded to their own tenths digit; the
            bar itself is the tappable answer (new .dco-cmp-*
            classes, tenbar variant).

     - A.2  Different-Length Decimal Compare (the trap) — two
            identical-size 100-grids side by side, one redrawing a
            tenths value as hundredths (0.4 -> 40 shaded cells) so
            the "more digits = bigger" trap is corrected visually
            instead of avoided (new .dco-cmp-* classes, grid
            variant).

     - A.3  Benchmark Decimals (vs 0, 0.5, 1) — a single 0-1 number
            line with the three benchmarks marked and a dot at the
            target decimal's spot, plus three pill chips forced onto
            a single line (new .dco-bench-* classes + .dco-picker).

     - A.4  Decimal Number Line Placement (multi-point) — three
            decimal chips drag from a starting row onto a shared 0-1
            line at once, so order and spacing are visible together
            (new .dco-line-* classes).

     - A.5  Ordering 3-4 Decimals — decimal cards drag-reorder in a
            single-line row, graded as a whole arrangement (new
            .dco-order-* classes).

   Every skill here shares the same 5-question-per-slot / star-
   reward / "practice more?" quiz shell as the rest of the site (via
   the .bq- / .quiz- classes from quiz-popup-theme.css and quiz-
   modal-responsive.css, loaded elsewhere). This file defines its
   own self-contained "dco-" prefixed classes, including its own
   answer-chip wrapper (.dco-picker, forced single-line — no chip
   row on this page ever wraps to a second line, phone or desktop),
   so it has no hidden cross-file dependency. Load this file after
   the shared quiz shell stylesheets, e.g.:

     <link rel="stylesheet" th:href="@{/css/quiz-popup-theme.css}" />
     <link rel="stylesheet" th:href="@{/css/quiz-modal-responsive.css}" />
     <link rel="stylesheet" th:href="@{/css/decimal-compare-order.css}" />
   ================================================================ */

/* ---------- shared: answer-chip picker row, FORCED single line ---------- */
.dco-picker {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;             /* never wrap to a second line */
    gap: 8px;
    margin: 16px auto 4px;
    width: 100%;
    max-width: 380px;
}
.dco-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;                  /* allow shrinking so 4 chips always fit one row */
    padding: 12px 6px;
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
    font-size: 17px;
    color: var(--secondary);
    text-align: center;
    line-height: 1.25;
}
.quiz-number-opt.dco-opt.is-correct {
    border-color: #10b981;
    background: rgba(16,185,129,0.08);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.quiz-number-opt.dco-opt.is-wrong {
    border-color: #ef4444;
    background: rgba(239,68,68,0.08);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}

/* ================================================================
   A.1 / A.2 shared: side-by-side tappable compare panels
   ================================================================ */
.dco-cmp-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 16px auto 4px;
    width: 100%;
}
.dco-cmp-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 170px;
    background: #fff;
    border: 3px solid var(--line);
    border-radius: 16px;
    padding: 14px 8px 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.dco-cmp-panel:active { transform: scale(0.97); }
.dco-cmp-panel:disabled { cursor: default; }
.dco-cmp-panel.is-correct {
    border-color: #10b981;
    background: rgba(16,185,129,0.08);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.dco-cmp-panel.is-wrong {
    border-color: #ef4444;
    background: rgba(239,68,68,0.08);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}
.dco-cmp-divider {
    flex: 0 0 auto;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0.55;
}
.dco-cmp-label {
    font-weight: 800;
    font-size: 19px;
    color: var(--secondary);
}

/* -- A.1 tenths bar (vertical, taller than wide so two fit side by side) -- */
.dco-cmp-tenbar {
    display: flex;
    flex-direction: column-reverse;
    width: 44px;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid var(--line);
    background: #fff;
    pointer-events: none;
}
.dco-cmp-tenbar-seg {
    flex: 1 1 0;
    width: 100%;
    border-top: 2px solid var(--line);
}
.dco-cmp-tenbar-seg:last-child { border-top: none; }
.dco-cmp-tenbar-seg.is-shaded { background: var(--sky); }

/* -- A.2 100-grid (same grid used for both sides so amounts compare 1:1) -- */
.dco-cmp-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 1px;
    background: var(--line);
    border: 2px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    width: 130px;
    height: 130px;
    pointer-events: none;
}
.dco-cmp-cell { background: #fff; }
.dco-cmp-cell.is-shaded { background: var(--sky); }

/* ================================================================
   A.3 Benchmark Decimals (vs 0, 0.5, 1)
   ================================================================ */
.dco-bench-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.dco-bench-line {
    position: relative;
    width: min(320px, 92%);
    height: 56px;
    margin: 18px auto 26px;
}
.dco-bench-track {
    position: absolute;
    left: 0; right: 0; top: 24px;
    height: 4px;
    border-radius: 2px;
    background: var(--line);
}
.dco-bench-tick {
    position: absolute;
    top: 14px;
    width: 3px;
    height: 24px;
    background: var(--secondary);
    opacity: 0.7;
    transform: translateX(-1.5px);
}
.dco-bench-ticklabel {
    position: absolute;
    top: 42px;
    transform: translateX(-50%);
    font-weight: 800;
    font-size: 13px;
    color: var(--secondary);
}
.dco-bench-marker {
    position: absolute;
    top: 16px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sun);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transform: translate(-50%, 0);
}
.dco-bench-markerlabel {
    position: absolute;
    top: -22px;
    transform: translateX(-50%);
    font-weight: 800;
    font-size: 14px;
    color: var(--secondary);
    white-space: nowrap;
}

/* ================================================================
   A.4 Decimal Number Line Placement (multi-point, drag)
   ================================================================ */
.dco-line-wrap {
    position: relative;
    width: min(340px, 94%);
    height: 190px;
    margin: 14px auto 6px;
    touch-action: none;
}
.dco-line-chip {
    position: absolute;
    width: 58px;
    height: 40px;
    margin-left: -29px;
    margin-top: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    background: var(--secondary);
    border: 3px solid #fff;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
    cursor: grab;
    z-index: 2;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.dco-line-chip.is-dragging { cursor: grabbing; z-index: 6; box-shadow: 0 6px 14px rgba(0,0,0,0.28); }
.dco-line-chip.is-placed { border-radius: 50%; width: 40px; height: 40px; margin-left: -20px; font-size: 13px; }
.dco-line-chip.is-correct { background: #10b981; }
.dco-line-chip.is-wrong { background: #ef4444; }
.dco-line-chip:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.dco-line-track {
    position: absolute;
    left: 6%; right: 6%;
    height: 4px;
    border-radius: 2px;
    background: var(--line);
}
.dco-line-tick {
    position: absolute;
    top: -10px;
    width: 3px;
    height: 24px;
    background: var(--secondary);
    opacity: 0.55;
    transform: translateX(-1.5px);
}
.dco-line-tick.is-end { opacity: 0.85; }
.dco-line-ticklabel {
    position: absolute;
    top: 16px;
    transform: translateX(-50%);
    font-weight: 800;
    font-size: 13px;
    color: var(--secondary);
}
.dco-line-target-tick {
    position: absolute;
    top: -8px;
    width: 2px;
    height: 20px;
    background: #ef4444;
    opacity: 0.7;
    transform: translateX(-1px);
}
.dco-line-target-tick::after {
    content: attr(data-val);
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 800;
    font-size: 11px;
    color: #ef4444;
    white-space: nowrap;
}
.dco-line-hint {
    position: absolute;
    left: 0; right: 0; top: 0;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    color: var(--text);
    opacity: 0.55;
}

/* ================================================================
   A.5 Ordering 3-4 Decimals (drag reorder)
   ================================================================ */
.dco-order-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 14px auto 4px;
    width: 100%;
}
.dco-order-legend {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0.6;
}
.dco-order-row {
    display: flex;
    flex-wrap: nowrap;             /* forced single line, never 2 rows */
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 400px;
    padding: 6px 0;
}
.dco-order-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 4px;
    min-height: 56px;
    font-weight: 800;
    font-size: 16px;
    color: var(--secondary);
    background: #fff;
    border: 3px solid var(--line);
    border-radius: 12px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}
.dco-order-card.is-dragging { cursor: grabbing; z-index: 6; box-shadow: 0 6px 14px rgba(0,0,0,0.22); }
.dco-order-card.is-correct { border-color: #10b981; background: rgba(16,185,129,0.08); }
.dco-order-card.is-wrong { border-color: #ef4444; background: rgba(239,68,68,0.08); }
.dco-order-card:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

/* ---------- phone responsiveness ---------- */
@media (max-width: 560px) {
    .dco-picker { gap: 6px; max-width: 320px; }
    .dco-opt { padding: 9px 4px; font-size: 14.5px; min-height: 46px !important; }

    .dco-cmp-pair { gap: 8px; }
    .dco-cmp-panel { padding: 10px 5px 9px; max-width: 140px; gap: 8px; }
    .dco-cmp-label { font-size: 16px; }
    .dco-cmp-tenbar { width: 36px; height: 120px; }
    .dco-cmp-grid { width: 106px; height: 106px; }

    .dco-bench-line { height: 50px; margin: 16px auto 24px; }

    .dco-line-wrap { height: 170px; }
    .dco-line-chip { width: 50px; height: 36px; margin-left: -25px; margin-top: -18px; font-size: 13px; }
    .dco-line-chip.is-placed { width: 36px; height: 36px; margin-left: -18px; font-size: 11.5px; }

    .dco-order-row { gap: 6px; max-width: 340px; }
    .dco-order-card { padding: 11px 3px; min-height: 48px; font-size: 14px; }
}
@media (max-width: 380px) {
    .dco-picker { gap: 5px; max-width: 280px; }
    .dco-opt { padding: 7px 3px; font-size: 13px; }

    .dco-cmp-panel { max-width: 120px; padding: 8px 4px 8px; }
    .dco-cmp-label { font-size: 14.5px; }
    .dco-cmp-tenbar { width: 30px; height: 104px; }
    .dco-cmp-grid { width: 90px; height: 90px; }

    .dco-line-wrap { height: 158px; }
    .dco-line-chip { width: 44px; height: 32px; margin-left: -22px; margin-top: -16px; font-size: 11.5px; }
    .dco-line-chip.is-placed { width: 32px; height: 32px; margin-left: -16px; font-size: 10.5px; }

    .dco-order-row { gap: 4px; max-width: 300px; }
    .dco-order-card { padding: 9px 2px; min-height: 44px; font-size: 12.5px; }
}