/* =================================================================
   MODULE PLANNER — which module, and in what order

   Two panes: the module's own order on the left, everything not in it
   on the right. The order pane is the one that matters, so it takes the
   space and the pool pane is fixed.
   ================================================================= */

.mp-controls {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.mp-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mp-field > span {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mp-field .form-control {
    min-width: 168px;
}

.mp-field[hidden] {
    display: none;
}

.mp-spacer {
    flex-grow: 1;
}

.mp-state {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

/* The one thing an author must not miss: work that is not on the server
   yet. Colour alone would not say it, so the word changes too. */
.mp-dirty {
    color: var(--warning);
    font-weight: 700;
}

.mp-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--warning-light, #FEF3C7);
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.5;
}

.mp-note[hidden] {
    display: none;
}

.mp-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.mp-pane {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    overflow: hidden;
}

.mp-pane-order {
    flex-grow: 1;
    min-width: 0;
}

.mp-pane-pool {
    width: 380px;
    flex-shrink: 0;
}

.mp-pane-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.mp-eyebrow {
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mp-hint,
.mp-n {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.mp-search {
    margin: 10px 10px 0;
    width: calc(100% - 20px);
}

.mp-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 520px;
    padding: 10px;
    overflow-y: auto;
}

.mp-row,
.mp-pool-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-primary);
}

.mp-grip {
    color: var(--text-secondary);
    cursor: grab;
}

.mp-grip:active {
    cursor: grabbing;
}

/* Dragging is mouse-only: a keyboard cannot start an HTML5 drag. These
   are the same move, reachable by Tab. */
.mp-nudge {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.mp-nudge button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 16px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.6rem;
    cursor: pointer;
}

.mp-nudge button:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.mp-nudge button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.mp-pos {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
}

.mp-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 5px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.mp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-thumb-none,
.mp-thumb-backdrop {
    border: 1px dashed var(--border-color);
    color: var(--text-secondary);
    font-size: 0.7rem;
}

.mp-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
    min-width: 0;
}

.mp-target {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-english {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-multi {
    margin-left: 7px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
}

/* The five rounds, as the student module judges them. Only Sentence
   Builder has rounds; the other modules render an empty span rather
   than five greys, which would read as "broken". */
.mp-pips {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.mp-pip {
    width: 16px;
    height: 7px;
    border-radius: 3px;
}

.mp-pip-ok {
    background: var(--success);
}

.mp-pip-no {
    background: var(--border-color);
}

.mp-drop,
.mp-add {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.mp-add {
    border-color: var(--primary);
    color: var(--primary);
}

.mp-drop:hover:not(:disabled),
.mp-add:hover:not(:disabled) {
    border-color: var(--primary);
    background: var(--bg-tertiary);
}

.mp-add:disabled,
.mp-drop:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* A sentence no module uses. Written, translated, and never met. */
.mp-pool-orphan {
    border-color: var(--warning);
    background: var(--warning-light, #FEF3C7);
}

.mp-empty {
    padding: 22px 16px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    text-align: center;
}

.mp-empty h4 {
    margin: 0 0 7px;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.mp-empty p {
    margin: 0;
    line-height: 1.55;
}

.mp-warn {
    padding: 16px;
    color: var(--danger);
    font-size: 0.9rem;
}

@media (width <= 1100px) {
    .mp-body {
        flex-direction: column;
    }

    .mp-pane-pool {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp-row {
        transition: none;
    }
}