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

/* 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 take player, the live
   route and the results all show at once over the recording controls. */
.os-activity [hidden] { display: none !important; }

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

/* ------------------------------------------------------------------ privacy */

/* Said before anyone speaks, not in a policy nobody reads. */
.os-privacy {
    display: flex; align-items: flex-start; gap: 0.5rem; margin: 0;
    padding: 0.55rem 0.8rem; border-radius: 8px;
    background: #EAF1EB; border: 1px solid #C3D8C9; color: #2F5238;
    font-size: 0.9rem; line-height: 1.5;
}

/* -------------------------------------------------------------------- brief */

.os-brief {
    border: 1px solid var(--activity-border, #DDD9D0);
    border-left: 4px solid var(--activity-accent, #2C5AA0);
    border-radius: 8px; padding: 0.8rem 1rem; background: #FFFFFF;
}
.os-brief-heading { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 800;
                    display: flex; align-items: center; gap: 0.45rem; }
.os-brief-body { font-size: 0.97rem; line-height: 1.55; }
.os-brief-body p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------- stage */

.os-stage {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 1rem; align-items: start;
}

.os-notes, .os-deliver {
    display: flex; flex-direction: column; gap: 0.5rem;
    border: 1px solid var(--activity-border, #DDD9D0);
    border-radius: 8px; padding: 0.85rem 0.95rem; background: #FBFAF7;
}

.os-heading { margin: 0; font-size: 1rem; font-weight: 800; }
.os-sub-heading { margin: 0; font-size: 0.88rem; font-weight: 800; }
.os-sub { margin: 0; font-size: 0.85rem; color: #5A6169; }

.os-plan { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; color: #4A5159; }
.os-plan li { margin-bottom: 0.15rem; }

.os-notes-input, .os-transcript, .os-live-input {
    width: 100%; border: 1px solid var(--activity-border, #DDD9D0);
    border-radius: 8px; padding: 0.7rem 0.8rem; font-family: inherit;
    font-size: 0.98rem; line-height: 1.6; resize: vertical; background: #FFFFFF;
}

/* ---------------------------------------------------------------- prompter */

/* The student's OWN notes, large enough to glance at while speaking -- never an
   authored script to read out, which is the opposite of the skill. */
.os-prompter {
    max-height: 11rem; overflow: auto; border-radius: 8px;
    background: #1B1F23; color: #F4F2EC; padding: 0.8rem 0.9rem;
}
.os-prompter-line { margin: 0 0 0.55rem; font-size: 1.15rem; line-height: 1.5; font-weight: 600; }
.os-prompter-line:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- timer */

.os-timer-wrap { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.os-timer { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.os-target { font-size: 0.85rem; color: #5A6169; }
.os-timer-track { flex: 1; min-width: 6rem; height: 0.5rem; background: #EDECE6;
                  border-radius: 3px; overflow: hidden; }
.os-timer-fill { display: block; height: 100%; width: 0;
                 background: var(--activity-accent, #2C5AA0); transition: width 0.2s linear; }
.os-timer-fill.os-over { background: #B8892C; }

.os-countdown {
    display: flex; align-items: center; justify-content: center;
    height: 5rem; border-radius: 8px; background: #1B1F23; color: #FFFFFF;
    font-size: 3rem; font-weight: 800;
}

.os-actions { display: flex; gap: 0.4rem; }
.os-primary {
    background: var(--activity-accent, #2C5AA0) !important;
    color: #FFFFFF !important; border-color: var(--activity-accent, #2C5AA0) !important;
}
#osRecordBtn i { color: #E5574A; }
#osRecordBtn.btn-control.os-primary i { color: #FFFFFF; }

/* -------------------------------------------------------------------- take */

.os-take { display: flex; flex-direction: column; gap: 0.5rem; }
.os-player { width: 100%; }
.os-take-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.os-take-note { margin: 0; font-size: 0.86rem; color: #5A6169; }

/* --------------------------------------------------------------- live route */

/* Not a lesser path: the lesson already offers live delivery with peer sign-off,
   and SEC verification wants a teacher to have heard it anyway. */
.os-live {
    display: flex; flex-direction: column; gap: 0.5rem;
    border: 1px dashed var(--activity-border, #DDD9D0);
    border-radius: 8px; padding: 0.75rem 0.85rem; background: #FFFFFF;
}
.os-live-why { margin: 0; font-weight: 700; font-size: 0.92rem; color: #8A5A17; }
.os-live-how { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.os-live-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; }
.os-live-label { font-size: 0.88rem; font-weight: 700; }

/* ------------------------------------------------------------------ result */

.os-result {
    display: flex; flex-direction: column; gap: 0.7rem;
    border: 1px solid var(--activity-border, #DDD9D0);
    border-radius: 8px; padding: 0.85rem 0.95rem; background: #FFFFFF;
}

.os-metrics { list-style: none; margin: 0; padding: 0; display: flex;
              flex-direction: column; gap: 0.3rem; }
.os-metrics li {
    display: grid; grid-template-columns: 11rem 8rem 1fr; gap: 0.6rem;
    align-items: baseline; padding: 0.3rem 0; border-bottom: 1px solid #EDECE6;
    font-size: 0.9rem;
}
.os-metrics li:last-child { border-bottom: none; }
.os-m-label { color: #4A5159; }
.os-m-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.os-m-note { color: #5A6169; font-size: 0.85rem; }

.os-transcript-wrap { display: flex; flex-direction: column; gap: 0.25rem; }

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

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

body.display-mode .os-actions,
body.display-mode .os-take,
body.display-mode .os-countdown { display: none !important; }

@media (max-width: 58rem) {
    .os-stage { grid-template-columns: 1fr; }
    .os-metrics li { grid-template-columns: 1fr auto; }
    .os-m-note { grid-column: 1 / -1; }
}