@import url("../generic/colors.css");
@import url("../generic/dimensions.css");

/* TEXT EDITOR  */

.simple-text-editor-textarea {
    resize: none;
}

/* BUTTONS */

.workbook-element.button-line {
    margin: 0 auto;
    gap: var(--space-md);
    display: flex;
}

/* Sorting exercise */

.sorting-interaction--inline { padding: var(--space-md) 0; }

.sorting-interaction__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

.sorting-interaction__error-count,
.sorting-exercise-fullscreen__session-errors {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.sorting-exercise-fullscreen__session-errors { font-weight: 600; }

.sorting-exercise-fullscreen {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: var(--space-lg);
    box-sizing: border-box;
    color: var(--color-text-primary);
    background: var(--color-surface-muted);
}

.sorting-exercise-fullscreen__toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding-right: var(--space-3xl);
}

.sorting-exercise-fullscreen__reset-button {
    border-radius: var(--radius-sm);
    border-color: var(--color-border);
    background: var(--color-surface-base);
    color: var(--color-text-primary);
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.sorting-exercise-fullscreen__reset-button:hover,
.sorting-exercise-fullscreen__reset-button:focus-visible {
    background: var(--color-surface-subtle);
    border-color: var(--color-accent-active);
}

.sorting-fields {
    flex: 1;
    display: grid;
    gap: var(--space-lg);
    overflow: auto;
    min-height: 0;
    align-content: start;
}

.sorting-fields--cols-1 { grid-template-columns: minmax(220px, 480px); justify-content: center; }
.sorting-fields--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sorting-fields--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sorting-field-card {
    display: flex;
    flex-direction: column;
    min-height: 9rem;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    background: var(--color-surface-base);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.sorting-field-card--full-width { grid-column: 1 / -1; }

.sorting-field-card__title {
    padding: var(--space-md) var(--space-lg);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
    color: var(--color-text-primary);
    background: var(--color-background-colored);
    border-bottom: 1px solid var(--color-outline-blue-soft);
}

.sorting-field-card__drop {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 5.5rem;
    padding: var(--space-lg);
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 8px,
            color-mix(in srgb, var(--color-gray-2) 55%, transparent) 8px,
            color-mix(in srgb, var(--color-gray-2) 55%, transparent) 9px
        );
    border-top: 2px dashed var(--color-border-soft);
}

.sorting-field-card__drop .sorting-item { pointer-events: none; }

.sorting-source {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    background: var(--color-surface-base);
    box-shadow: var(--shadow-soft);
    padding: var(--space-lg);
}

.sorting-source__label {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

.sorting-source__items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

.sorting-item {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    word-break: break-word;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-text-primary);
    font-weight: 600;
    line-height: 1.35;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.sorting-item--active {
    cursor: grab;
    font-size: 1.35rem;
    padding: var(--space-md) var(--space-xl);
    border-width: 2px;
    border-color: var(--color-accent-active);
    background: var(--color-background-colored);
    box-shadow: var(--shadow-medium);
}

.sorting-item--active:hover {
    border-color: var(--color-accent-strong);
    transform: translateY(-1px);
}

.sorting-item--active:active {
    cursor: grabbing;
    transform: translateY(0);
}

.sorting-item--upcoming {
    opacity: 0.42;
    font-size: 0.95rem;
    font-weight: 500;
    background: var(--color-surface-muted);
}

.sorting-item--waiting-reason {
    opacity: 0.85;
    border-style: dashed;
    border-color: var(--color-accent-active);
    background: var(--color-surface-base);
}

.sorting-item--correct {
    background: var(--color-background-colored-correct);
    border-color: var(--color-accent-success);
}

.sorting-item--wrong {
    background: var(--color-background-colored-incorrect);
    border-color: var(--color-accent-error);
}

.sorting-success-banner:not(.is-visible),
.sorting-error-popup:not(.is-visible) { display: none; }

.sorting-success-banner.is-visible {
    display: block;
    padding: var(--space-lg);
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: var(--radius-md);
    color: var(--color-green-8);
    background: var(--color-background-colored-correct);
    border: 1px solid var(--color-accent-success);
}

.sorting-error-popup.is-visible {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-gray-15) 40%, transparent);
    z-index: 5;
}

.sorting-error-popup__content {
    max-width: 28rem;
    margin: var(--space-md);
    padding: var(--space-xl);
    text-align: center;
    border-radius: var(--radius-lg);
    background: var(--color-surface-base);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-medium);
    color: var(--color-text-primary);
}

.sorting-error-popup__button {
    margin-top: var(--space-lg);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* ========== FEATURE: SnapPythonPopup (BEGIN) ==========
 * Removable with SnapPythonPopup.scala + SnapCodeEditor chrome child.
 * Reuses .sorting-error-popup layout; only Snap-specific bits live here.
 */
.snap-editor-toolbar {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
    z-index: 8;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    max-width: calc(100% - 2 * var(--space-md));
}

.snap-editor-toolbar__speed {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-button-border);
    border-radius: var(--radius-sm);
    background: var(--color-button-background);
    color: var(--color-text-primary);
    font-size: 0.85rem;
    font-weight: 600;
}

.snap-editor-toolbar__speed-label {
    white-space: nowrap;
}

.snap-editor-toolbar__speed-input {
    width: 4.5rem;
    margin: 0;
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text-primary);
    font: inherit;
}

.snap-python-button {
    position: static;
    border: 1px solid var(--color-button-border);
    border-radius: var(--radius-sm);
    background: var(--color-button-background);
    color: var(--color-text-primary);
    font-weight: 600;
    cursor: pointer;
}

.snap-python-button:hover,
.snap-python-button:focus-visible {
    background: var(--color-button-hover);
}

.snap-python-popup.is-visible {
    z-index: 9;
}

.snap-python-popup__content {
    width: calc(80% - 2 * var(--space-md));
    max-width: none;
    max-height: calc(100% - 2 * var(--space-md));
    padding: var(--space-md);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    overflow: hidden;
    min-height: 0;
}

.snap-python-popup__overview {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    flex-shrink: 0;
}

.snap-python-popup__overview[open] {
    max-height: 12rem;
    overflow: auto;
}

.snap-python-popup__overview-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    list-style: none;
}

.snap-python-popup__overview-title::-webkit-details-marker {
    display: none;
}

.snap-python-popup__overview-title::before {
    content: "▸ ";
    display: inline-block;
    width: 0.9em;
}

.snap-python-popup__overview[open] > .snap-python-popup__overview-title::before {
    content: "▾ ";
}

.snap-python-popup__overview-note {
    margin: var(--space-sm) 0;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.snap-python-popup__overview-list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-xs) var(--space-md);
    font-size: 0.8rem;
    color: var(--color-text-primary);
}

.snap-python-popup__overview-list code {
    font-family: var(--color-code-font);
    font-size: var(--color-code-size);
    white-space: pre-wrap;
}

.snap-python-popup__overview-list .cm-keyword {
    color: var(--color-blue-7);
    font-weight: 600;
}

.snap-python-popup__overview-list .cm-accent-name {
    color: var(--color-blue-6);
    font-weight: 600;
}

.snap-python-popup__overview-list .cm-plain-name {
    color: var(--color-text-primary);
}

.snap-python-popup__overview-list .cm-receive-go {
    color: var(--color-green-6);
    font-weight: 700;
}

.snap-python-popup__script-hints {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.snap-python-popup__script-label {
    margin-bottom: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.snap-python-popup__warning {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-outline-blue-soft);
    border-radius: var(--radius-sm);
    background: var(--color-background-colored);
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

.snap-python-popup__editor {
    flex: 1 1 auto;
    min-height: 10rem;
    max-height: none;
    height: auto;
    overflow: auto;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
}

.snap-python-popup__editor .code-mirror-editor,
.snap-python-popup__editor .code-mirror-editor .cm-editor,
.snap-python-popup__editor .code-mirror-editor .cm-scroller {
    min-height: 10rem;
    height: 100%;
}

.snap-python-popup__editor .code-mirror-editor__fallback {
    min-height: 10rem;
    height: 100%;
}

.snap-python-popup .cm-receive-go {
    color: var(--color-green-2) !important;
    font-weight: 700;
}

.snap-python-popup__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    flex-shrink: 0;
}

.snap-python-popup__actions .sorting-error-popup__button {
    margin-top: 0;
}
/* ========== FEATURE: SnapPythonPopup (END) ========== */

/* ProgrammingExercise stage output (Run → simulateGreenFlag PNG) */
.prog-ex-stage-output {
    margin-top: var(--space-md);
    max-width: 100%;
}

.prog-ex-stage-output__placeholder {
    min-height: var(--space-lg);
}

.prog-ex-stage-output .preview-card,
.prog-ex-stage-output .preview-content img {
    max-width: 100%;
    height: auto;
}
.be-program-snap-fullscreen__turtle {
    flex: 0 0 30%;
    min-width: 16rem;
    max-width: 28rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.be-program-snap-fullscreen__turtle-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.be-program-snap-fullscreen__turtle .prog-ex-stage-output {
    margin-top: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
}

.be-program-snap-fullscreen__turtle-stage {
    width: 100%;
    height: auto;
    max-width: 100%;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    background: var(--color-background-workarea-display);
}

.sorting-reason-form {
    margin-bottom: var(--space-lg);
    padding: var(--space-lg);
    border: 1px solid var(--color-outline-blue-soft);
    border-radius: var(--radius-md);
    background: var(--color-background-colored);
}

.sorting-reason-form__prompt {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
}

.sorting-reason-form__input {
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    background: var(--color-surface-base);
}

.sorting-reason-form__confirm-button {
    margin-top: var(--space-md);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* Fill-in code editor (advanced CodeTaskToggle mode) */

.fill-in-code-editor {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.fill-in-code-editor__todo-legend {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.fill-in-code-editor__todo-badge {
    color: var(--color-accent-error);
    font-weight: 700;
}

.fill-in-code-editor__toolbar {
    display: flex;
    justify-content: flex-end;
}

.fill-in-code-editor__reset-btn {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9rem;
}

.fill-in-code-editor__confirm-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.fill-in-code-editor__confirm-reset {
    background: var(--color-background-colored-incorrect);
}

.fill-in-code-editor__mirror {
    min-height: 16rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.fill-in-code-editor__mirror .cm-editor,
.fill-in-code-editor__mirror .cm-scroller {
    min-height: 16rem;
}

@media (max-width: 640px) {
    .sorting-fields--cols-2,
    .sorting-fields--cols-3 { grid-template-columns: 1fr; }
    .sorting-field-card--full-width { grid-column: auto; }
}