/* Shared Re-order Paragraphs controls; task clocks and scoring stay with the runner. */
.pte-reorder-workspace {
    --pte-reorder-selected: #eff5fc;
    --pte-reorder-selection-line: #497bb4;
    min-width: 0;
    width: 100%;
}
[data-pte-theme="dark"] .pte-reorder-workspace {
    --pte-reorder-selected: #1b3041;
    --pte-reorder-selection-line: #8fbae9;
}
.pte-reorder-workspace *, .pte-reorder-workspace *::before, .pte-reorder-workspace *::after { box-sizing: border-box; }
.pte-reorder-workspace [hidden] { display: none !important; }
.pte-reorder-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
}
.pte-reorder-pane {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hair);
    border-radius: 11px;
    background: var(--paper);
}
.pte-reorder-pane-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--hair);
}
.pte-reorder-pane-header h2 { margin: 0; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.4; }
.pte-reorder-pane-header > span { margin-left: auto; color: var(--ink-2); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pte-reorder-pane.is-target .pte-reorder-pane-header { background: var(--pte-surface-soft); border-radius: 10px 10px 0 0; }
.pte-reorder-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 9px;
    padding: 10px;
    min-height: 240px;
}
.pte-reorder-target-stack { display: grid; flex: 1 1 auto; min-width: 0; position: relative; }
.pte-reorder-target-stack > .pte-reorder-list { grid-area: 1 / 1; }
.pte-reorder-capacity { visibility: hidden; pointer-events: none; }
.pte-reorder-workspace .pte-reorder-list .pte-reorder-card {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px 11px;
    border: 1px solid var(--hair);
    border-radius: 9px;
    background: var(--paper);
    color: var(--ink);
    text-align: left;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
    box-shadow: none;
}
.pte-reorder-card:hover { border-color: var(--ink-3); }
.pte-reorder-workspace .pte-reorder-card[aria-pressed="true"] {
    border-color: var(--pte-reorder-selection-line);
    background: var(--pte-reorder-selected);
    box-shadow: inset 0 0 0 1px var(--pte-reorder-selection-line);
}
.pte-reorder-workspace .pte-reorder-card:focus-visible { outline: 2px solid var(--pte-reorder-selection-line); outline-offset: 2px; }
.pte-reorder-workspace .pte-reorder-card.is-dragging { opacity: .5; cursor: grabbing; }
.pte-reorder-workspace .pte-reorder-card.is-drop-before { box-shadow: 0 -3px 0 var(--pte-reorder-selection-line); }
.pte-reorder-grip { flex: 0 0 18px; width: 18px; height: 21px; color: var(--ink-3); touch-action: none; }
.pte-reorder-grip svg { width: 15px; height: 18px; pointer-events: none; }
.pte-reorder-position { display: none; flex: 0 0 18px; width: 18px; color: var(--ink-2); font-size: 12px; padding-top: 1px; text-align: center; touch-action: none; }
.pte-reorder-pane.is-target .pte-reorder-grip { display: none; }
.pte-reorder-pane.is-target .pte-reorder-position { display: inline-block; }
.pte-reorder-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pte-reorder-transfer { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; }
.pte-reorder-move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 38px;
    min-height: 38px;
    padding: 8px;
    border: 1px solid var(--hair);
    border-radius: 8px;
    background: var(--paper);
    color: var(--green);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
}
.pte-reorder-move svg { width: 17px; height: 17px; flex: 0 0 auto; }
.pte-reorder-move:not(:disabled):hover { background: var(--pte-surface-soft); border-color: var(--green); }
.pte-reorder-move:focus-visible { outline: 2px solid var(--pte-reorder-selection-line); outline-offset: 2px; }
.pte-reorder-move:disabled { opacity: .35; cursor: default; }
.pte-reorder-move.is-labelled { width: auto; }
.pte-reorder-transfer .pte-reorder-move:not(:disabled) { background: var(--pte-surface-soft); border-color: var(--green); }
.pte-reorder-answer-controls { display: flex; justify-content: flex-end; gap: 7px; padding: 8px 10px; border-top: 1px solid var(--hair); }
.pte-reorder-answer-controls .pte-reorder-move { min-height: 32px; padding: 5px 8px; font-size: 11px; }
.pte-reorder-empty {
    position: absolute;
    inset: 42px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px;
    text-align: center;
    color: var(--ink-2);
    pointer-events: none;
}
.pte-reorder-target-stack > .pte-reorder-empty { inset: 0; }
.pte-reorder-empty strong { color: var(--ink); font-size: 13px; font-weight: 500; }
.pte-reorder-empty span { max-width: 235px; font-size: 12px; line-height: 1.5; }
.pte-reorder-list.is-drop-target { background: var(--pte-reorder-selected); }
.pte-reorder-mobile-tabs, .pte-reorder-mobile-transfer { display: none; }
.pte-reorder-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
    .pte-reorder-board { gap: 8px; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); }
    .pte-reorder-transfer .pte-reorder-move { width: 34px; }
}
@media (max-width: 620px) {
    .pte-reorder-mobile-tabs { display: flex; gap: 5px; margin-bottom: 11px; padding: 4px; border-radius: 9px; background: var(--pte-surface-soft); }
    .pte-reorder-mobile-tabs button { flex: 1 1 0; min-height: 38px; padding: 8px 5px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
    .pte-reorder-mobile-tabs button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
    .pte-reorder-board { display: block; }
    .pte-reorder-transfer, .pte-reorder-pane-header { display: none; }
    .pte-reorder-workspace[data-mobile-pane="source"] [data-pte-reorder-pane="target"],
    .pte-reorder-workspace[data-mobile-pane="target"] [data-pte-reorder-pane="source"] { display: none; }
    .pte-reorder-pane { border: 0; background: transparent; }
    .pte-reorder-list { padding: 0; min-height: 190px; }
    .pte-reorder-capacity { display: none; }
    .pte-reorder-workspace .pte-reorder-list .pte-reorder-card { padding: 12px 11px; }
    .pte-reorder-mobile-transfer { display: flex; margin-top: 11px; }
    .pte-reorder-mobile-transfer .pte-reorder-move { width: 100%; min-height: 40px; }
    .pte-reorder-workspace[data-mobile-pane="source"] .pte-reorder-mobile-transfer [data-pte-reorder-move="source"],
    .pte-reorder-workspace[data-mobile-pane="target"] .pte-reorder-mobile-transfer [data-pte-reorder-move="target"] { display: none; }
    .pte-reorder-answer-controls { border: 0; padding: 10px 0 0; justify-content: flex-start; }
    .pte-reorder-answer-controls .pte-reorder-move { min-height: 38px; padding: 8px 10px; font-size: 12px; }
    .pte-reorder-empty { inset: 0; }
}
@media (pointer: coarse) {
    .pte-reorder-move, .pte-reorder-answer-controls .pte-reorder-move, .pte-reorder-mobile-transfer .pte-reorder-move,
    .pte-reorder-mobile-tabs button { min-height: 44px; }
    .pte-reorder-transfer .pte-reorder-move { width: 40px; }
}

/* Keep the full source visible above the fixed navigation in the mock runner. */
.pte-mock-body:has([data-pte-reorder-workspace]) { padding-top: 20px; padding-bottom: 20px; }
.pte-mock-canvas:has([data-pte-reorder-workspace]) { padding: 24px; }
.pte-mock-canvas:has([data-pte-reorder-workspace]) .pte-mock-task-heading { margin-bottom: 20px; padding-bottom: 18px; }