/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 * Ref: CI-english-shared
 *
 * ReadAloud -- the control and the follow-along highlight.
 *
 * The highlight is the point of this, not decoration: seeing which sentence is
 * being spoken is most of what helps a student who has yet to achieve literacy,
 * which this course's descriptor names as a central tenet.
 */

.ra-bar {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 0.5rem;
}

.ra-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #b9c7c1;
    background: #fff;
    color: #2f6f5e;
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.3;
}

.ra-btn:hover { background: #f2f7f5; border-color: #2f6f5e; }
.ra-btn:focus-visible { outline: 2px solid #2f6f5e; outline-offset: 2px; }

.ra-play.is-playing { background: #2f6f5e; border-color: #2f6f5e; color: #fff; }

/* The first sentence cannot start until the server has spoken it. The button says
   so and stays live while it does: a student who changes their mind has to be able
   to press stop, not wait out a spinner, and a request that never lands must not
   leave the control dead. The state is carried by the icon and the word as well as
   the colour, so forced-colors needs nothing extra. */
.ra-play.is-loading { background: #2f6f5e; border-color: #2f6f5e; color: #fff; }
.ra-play.is-loading:hover { background: #2f6f5e; }

.ra-speed { font-weight: 600; color: #5e6a66; min-width: 4.6rem; justify-content: center; }

/* Every sentence is clickable -- a student re-reading one hard sentence should
   not have to sit through the whole passage to reach it. The affordance stays
   quiet until hover so the passage still reads as prose. */
.ra-s { border-radius: 3px; cursor: pointer; transition: background 0.12s ease; }
.ra-s:hover { background: #eef4f1; }

/* Except where the widget owns the click inside its own prose. text-marker drags
   to select and marks on mouseup; shot-reader's strip click places a term. Those
   pass clickToPlay:false, and the prose must not promise a tap it will not honour. */
.ra-plain .ra-s { cursor: auto; }
.ra-plain .ra-s:hover { background: none; }

/* A marked span in text-marker owns its background: the mark colour is the whole
   point of it, and the sentence wrapper inside must not tint over it. */
.tm-mark .ra-s,
.tm-mark .ra-s:hover { background: none; }
.tm-mark .ra-s.is-reading { background: #ffe9a8; }

.ra-s.is-reading {
    background: #ffe9a8;
    box-shadow: 0 0 0 2px #ffe9a8;
}

@media (prefers-reduced-motion: reduce) {
    .ra-s { transition: none; }
    .ra-play.is-loading .fa-spin { animation: none; }
}

/* A high-contrast reader needs the highlight to survive forced colours. */
@media (forced-colors: active) {
    .ra-s.is-reading { background: Highlight; color: HighlightText; box-shadow: none; }
}

/* Neither the control nor the highlight belongs on paper. */
@media print {
    .ra-bar { display: none !important; }
    .ra-s.is-reading { background: none; box-shadow: none; }
}