/*
  Coding Ireland proprietary interactive activity
  Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
  Ref: CI-english-shot-reader
*/

/* Every panel below is laid out with flex or grid, and a class selector beats the
   user agent's `[hidden] { display: none }`. Without this the picker, the sequence
   list and the empty state all show on top of the frame strip. */
.sr-activity [hidden] { display: none !important; }

.sr-container { display: flex; flex-direction: column; gap: 0.75rem; }

/* ------------------------------------------------------------------ progress */

.sr-progress { display: flex; align-items: center; gap: 0.6rem; }
.sr-progress-count { font-size: 0.88rem; color: #4A5159; font-variant-numeric: tabular-nums; }
.sr-progress-track {
    flex: 1; height: 0.5rem; background: #EDECE6; border-radius: 3px; overflow: hidden;
}
.sr-progress-fill {
    display: block; height: 100%; width: 0;
    background: var(--activity-accent, #2C5AA0); border-radius: 3px;
    transition: width 0.25s ease;
}

/* -------------------------------------------------------------------- frames */

.sr-genre {
    margin: 0.5rem 0 0.3rem; font-size: 0.8rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em; color: #4A5159;
}

.sr-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
}

.sr-frame {
    display: flex; flex-direction: column; gap: 0.45rem;
    border: 1px solid var(--activity-border, #DDD9D0);
    border-radius: 8px; padding: 0.75rem 0.85rem; background: #FFFFFF;
}

.sr-frame-head { display: flex; align-items: center; gap: 0.4rem; justify-content: space-between; }
.sr-frame-label { font-weight: 800; font-size: 0.95rem; }
.sr-frame-genre { font-size: 0.72rem; }
.sr-frame-img { width: 100%; border-radius: 6px; }

/* The described still IS the shot. It is set like a quotation because that is what
   it is -- the lesson's words standing in for a frame we cannot show. */
.sr-frame-still {
    margin: 0; font-size: 0.95rem; line-height: 1.55;
    background: #F7F6F2; border-left: 3px solid var(--activity-accent, #2C5AA0);
    border-radius: 0 6px 6px 0; padding: 0.55rem 0.7rem;
}

.sr-frame-caption { margin: 0; font-size: 0.82rem; color: #5A6169; font-style: italic; }

.sr-chips { list-style: none; margin: 0; padding: 0; display: flex;
            flex-direction: column; gap: 0.3rem; }

.sr-chip {
    display: flex; align-items: baseline; gap: 0.4rem;
    background: #EAF0F9; border-radius: 6px; padding: 0.3rem 0.45rem; font-size: 0.86rem;
}

.sr-chip-term { font-weight: 800; color: #24405F; white-space: nowrap; }
.sr-chip-effect { flex: 1; min-width: 0; }
.sr-chip-drop {
    border: none; background: transparent; cursor: pointer; color: #8A8F95; padding: 0 0.15rem;
}
.sr-chip-drop:hover { color: #B03A2E; }

.sr-add { align-self: flex-start; font-size: 0.85rem; }

/* ------------------------------------------------------------------ sequence */

.sr-sequence { display: flex; flex-direction: column; gap: 0.6rem; }
.sr-order-prompt { margin: 0; font-weight: 700; }
.sr-order-list { list-style: none; margin: 0; padding: 0; display: flex;
                 flex-direction: column; gap: 0.4rem; }

.sr-order-item {
    display: grid; grid-template-columns: 2rem 9rem 1fr auto;
    gap: 0.6rem; align-items: center;
    border: 1px solid var(--activity-border, #DDD9D0);
    border-radius: 8px; padding: 0.5rem 0.65rem; background: #FFFFFF;
}

.sr-order-n {
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: var(--activity-accent, #2C5AA0); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.85rem;
}

.sr-order-label { font-weight: 700; font-size: 0.9rem; }
.sr-order-still { font-size: 0.85rem; color: #5A6169; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
.sr-order-moves { display: flex; gap: 0.2rem; }

.sr-move {
    border: 1px solid var(--activity-border, #DDD9D0); background: #FFFFFF;
    border-radius: 5px; width: 1.8rem; height: 1.8rem; cursor: pointer; color: #4A5159;
}
.sr-move:hover:not([disabled]) { background: #F4F2EC; }
.sr-move[disabled] { opacity: 0.35; cursor: default; }

.sr-order-why { display: flex; flex-direction: column; gap: 0.3rem; }
.sr-order-why-label { font-weight: 700; font-size: 0.9rem; }
.sr-order-why-input, .sr-picker-effect-input {
    width: 100%; border: 1px solid var(--activity-border, #DDD9D0);
    border-radius: 6px; padding: 0.5rem 0.6rem; font-family: inherit;
    font-size: 0.95rem; line-height: 1.5; resize: vertical;
}

/* -------------------------------------------------------------------- picker */

.sr-picker {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 40;
    display: flex; flex-direction: column; gap: 0.6rem;
    width: min(30rem, 92vw); background: #FFFFFF;
    border: 1px solid var(--activity-border, #DDD9D0); border-radius: 10px;
    padding: 1rem; box-shadow: 0 10px 30px rgba(27, 31, 35, 0.18);
}

.sr-picker-frame {
    margin: 0; font-size: 0.9rem; background: #F4F2EC;
    border-radius: 6px; padding: 0.5rem 0.65rem; max-height: 7rem; overflow: auto;
}

.sr-picker-terms { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.sr-term {
    border: 1px solid var(--activity-border, #DDD9D0); background: #FFFFFF;
    border-radius: 999px; padding: 0.32rem 0.7rem;
    font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.sr-term:hover { background: #F4F2EC; }
.sr-term.is-chosen {
    background: var(--activity-accent, #2C5AA0);
    border-color: var(--activity-accent, #2C5AA0); color: #FFFFFF;
}

.sr-picker-effect { display: flex; flex-direction: column; gap: 0.25rem; }
.sr-picker-effect-label { font-weight: 700; font-size: 0.9rem; }

/* The sentence is the assessed half, so an empty one is refused rather than
   quietly accepted. */
.sr-needed { border-color: #B03A2E !important; background: #F8EDEB; }

.sr-picker-actions { display: flex; gap: 0.4rem; }
.sr-primary {
    background: var(--activity-accent, #2C5AA0) !important;
    color: #FFFFFF !important; border-color: var(--activity-accent, #2C5AA0) !important;
}

/* --------------------------------------------------------------------- model */

.sr-model {
    border: 1px solid var(--activity-border, #DDD9D0); border-left: 4px solid #3F6B4A;
    border-radius: 8px; padding: 0.8rem 0.95rem; background: #FBFAF7;
}
.sr-model-heading { margin: 0 0 0.2rem; font-size: 0.98rem; font-weight: 800; }
.sr-model-intro { margin: 0 0 0.5rem; font-size: 0.86rem; color: #5A6169; }
.sr-model-list { list-style: none; margin: 0; padding: 0; display: flex;
                 flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
.sr-model-list li { display: grid; grid-template-columns: 8rem 8rem 1fr; gap: 0.5rem; }
.sr-model-frame { font-weight: 700; }
.sr-model-term { font-weight: 800; color: #24405F; }

/* --------------------------------------------------------------------- empty */

.sr-empty {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 1rem; border-radius: 8px; background: #F7F6F2; color: #5A6169;
}

/* -------------------------------------------------------------- display mode */

body.display-mode .sr-add,
body.display-mode .sr-picker,
body.display-mode .sr-chip-drop { display: none !important; }

@media (max-width: 52rem) {
    .sr-group { grid-template-columns: 1fr; }
    .sr-order-item { grid-template-columns: 2rem 1fr auto; }
    .sr-order-still { display: none; }
    .sr-model-list li { grid-template-columns: 1fr; gap: 0.1rem; }
}