body{
}
body div{
/*    border:solid 1px;*/
}

/* BrainRocket "Rounds" progress bar (replaces the round radio circles). A single
   framed bar of joined segments — 3 "with sound" speakers + 1 muted — that fill
   as each round/tier completes. Segment state classes are set from
   set_study_time_speed(): upcoming (red) -> current (green, active round) -> done
   (filled green). */
/* the rounds bar is its own framed element — drop the default fieldset chrome
   so only the navy rounded bar shows (no square box around it) */
.timing-controls {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.rounds-bar-label {
    font-size: 16px;
    font-weight: bold;
    color: #01004C;
    margin-bottom: 4px;
    text-align: center;             /* centered below the sentence */
}
/* "Q x of y" progress through the review questions still to master, shown with the
   Rounds control. Updated by question_control_panel.js on every study advance. */
.rounds-question-counter {
    font-size: 15px;
    font-weight: bold;
    color: #01004C;
    text-align: center;
    margin: -6px auto 12px;         /* tucks up under the rounds bar, centered */
    letter-spacing: 0.3px;
}
.rounds-bar {
    display: flex;
    border: 3px solid #01004C;      /* navy frame */
    border-radius: 14px;            /* rounded corners */
    overflow: hidden;
    min-width: 220px;
    width: fit-content;
    margin: 12px auto 14px;         /* centered, with space above and below */
}
.round-seg {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 46px;
    padding: 4px 10px;
    border-right: 2px solid #01004C;
    background: #fff;
    color: #A32D2D;                 /* upcoming: red speaker */
    transition: background-color .3s ease, color .3s ease;
}
.round-seg:last-child { border-right: none; }
.round-seg.state-current { background: #EAF3DE; color: #2f6d0f; }   /* active round: green speaker */
.round-seg.state-done    { background: #639922; color: #EAF3DE; }   /* completed: filled green */
/* gently pulse the active round's speaker so the live round stands out */
@keyframes round-current-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}
.round-seg.state-current .round-icon {
    animation: round-current-pulse 0.9s ease-in-out infinite;
}
.main-container{
    background:#f7f7fa;
    display: grid;
    height: 100vh;
    width: 100%;
    overflow: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 45ch auto;
    position:relative;
/*    overflow-x: clip;*/
}
.header{
    background: white;
    background-image: var(--banner-b-image);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: -webkit-fill-available;
    background-position-x: 50%;
    background-position-y: 50%;
    display: grid;
    grid-template-columns: auto 50%;
/*     grid-template-rows: auto 50%; */
    grid-template-rows: 50% 50%;
}
.main-container>div{
    padding:0 2%;
}
.header-content{
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.header-logo-container{
    grid-column: 2;
    grid-row: 1;
}
.header-logo {
/*     background-image: none !important; */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
    margin-left: 50%;
    width: fit-content;
    animation:   launch 3s ease-in forwards;
    animation-delay: 2s;
}
@keyframes launch {
    0%   { transform: translate(0, 0) rotate(45deg) scale(1); }
    100% { transform: translate(100px, -100px) rotate(45deg) scale(1); }
}
.header-logo-rocket {
    width: 3em;
}
.header-logo-rocket.clickable {
    cursor: pointer;
}
.header-logo-tail {
    width: 1.3em;
    aspect-ratio: 1.0 / 2;
    background: linear-gradient(to bottom, #ffffff 0%, #ffeb3b 20%, #ff5722 50%, transparent 100%);
    border-radius: 50% 50% 20% 20% / 100% 100% 10% 10%; /* Taper the bottom */
    filter: blur(2px); /* Soften the exhaust look */
    animation: tail-flicker 0.1s 4s alternate;
}
@keyframes tail-flicker {
  0% { transform: scaleY(1); opacity: 0.9; }
  100% { transform: scaleY(1.05); opacity: 1; }
}

.navigation-controls{
    display: flex;
    justify-content: right;
    align-items:flex-end;
    /* flex-wrap:wrap; */
}
.label-assessment{
    display: flex;
    justify-content: right;
    align-items:flex-end;
    flex-direction: column;
}

.header label,
.test-controls label{
    background: -webkit-linear-gradient(267.34deg, var(--primary-color) 41.22%, var(--primary-alt-color) 113.95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.5em !important;
}
.header label{
    font-weight: bold;
}
.content-container{
}

.test-controls>*{
    margin-right: 5ch;
}
.test-table{
    display: grid;
    grid-template-rows: 5ch auto;
    grid-template-rows: auto auto;
}
.test-table-item,
.test-table-header{
    display: grid;
    grid-template-columns: 70% auto;
}
.test-table-item>*,
.test-table-header>*{
    padding: 0 5%;
    /*border-left: solid 1px #00000024;*/
    display: flex;
    align-items: center;
}
.test-table-header>*{
    min-height:5ch;
    border-left: solid 1px #00000024;
}
.test-table-item>*:first-child,
.test-table-header>*:first-child{
    border-left: unset;
    display: flex;
    justify-content: flex-end;
}

.test-controls{
    position: sticky;
    top: 0;
    display: inline-block;
    padding: 1ch 0ch;
    width: 100%;
    z-index:2;
}
.test-table-header{
    position:sticky;
    top:4ch;
    background: #f7f7fa;
    border-bottom: solid #2f85f3;
    font-weight: bold;
    font-size: 1.5em;
    z-index:2;
}
.test-table-body{
    display: grid;
    grid-template-columns: 1fr;
    /*overflow-y:auto;*/
}
.test-table-item{
    margin: 0.5ch 0;
    padding: 0.5ch 0;
    background: white;
    border-radius: 2ch;
    font-size: 1.7em;
}
.test-table-item:nth-child(2n) {
    background: #458af21c;
}
.test-table-item.selected:nth-child(2n) {
    background:unset;
}

.test-table-item label{
    text-align:right;
    margin-bottom:unset;
}
#print_certicate_button{
    display:none;
}
.option-container{
    display:flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap:wrap;
    align-content: center;
    position:relative;
}
.option-container:after{
    content:'a';
    content: '';
    border-right: solid 1px #00000024;
    position: absolute;
    left: 0;
    min-height: 10ch;
    z-index: 0;
}
.self_evaluation .option-container .close-item-details{
    position: absolute;
    left: -12ch;
    top: 0ch;
    height: auto;
    background: #0663ef!important;
    color: white;
    font-weight: bold;
    padding: 1ch 2ch;
    border-radius: 1.5ch;
    cursor:pointer;

    display:none;
    width: auto;
    font-size: 0.7em;
    z-index:1;
}
.self_evaluation .option-container.selected .close-item-details{
    display:unset;
}
.option-container label{
    margin-right: 3ch;
    margin-left: 1ch;
}
label.assessment-title{
    font-size: 2.1em;
    line-height: 2.3ch;
}
label.assessment-title.long-title{
    font-size: 1.5em;
    & small{
        font-size: 80%;
    }
}
label.assessment-title small{
    font-weight: normal;
    font-size: 95%;
}
#next_page,
#finish{
    display:none;
}

.last-question{
    & #next_page,
    & #finish{
        display:block;
    }
    & .question-navigation-controls #prevPage,
    & .question-navigation-controls .backtoasse{
        display:none!important;
    }
}



@media (orientation: portrait) {
    .header{
/*         grid-template-columns: 1fr; */
/*         display: flex; */
/*         flex-wrap: wrap; */
    }
    .navigation-controls{
/*         justify-content: flex-end; */
    }
    .header-content label{
        text-align: right;
    }
}



















.self_evaluation .test-table-item,
.self_evaluation .test-table-header {
    grid-template-columns: 60% 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    max-width: 100%;
    /*overflow:hidden;*/
}
.self_evaluation .option-container input+label+label,
.self_evaluation .option-container input+label,
.self_evaluation .option-container input{
    display:none;
}
/*.self_evaluation .option-container input:checked,*/
.self_evaluation .option-container input:checked + label{
    display:block;
    pointer-events:none;
    width: 100%;
    text-align: center;
}
.self_evaluation .option-container.selected input:checked + label {
    pointer-events: unset;
    width: unset;
    text-align: right;
}
.self_evaluation .option-container.selected input,
.self_evaluation .option-container.selected input + label,
.self_evaluation .option-container.selected input + label+label{
    display:unset;
    text-align:left;
}
.self_evaluation .option-container.selected{
    grid-row: 2;

    grid-column-start: 1;
    grid-column-end: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: calc(100% - 50vw);
    padding:unset;
    border-right: solid 1px #00000024;
    border-left: unset;
}
.self_evaluation .option-container{
    font-size:0.84em;
}
.self_evaluation .legend-instructions div {
    padding-right: 10ch;
}
.self_evaluation .test-table-header label{
    writing-mode: tb-rl;
    text-align: end;
    position: relative;
    font-weight:bold;
    font-size:0.85em;
}
.self_evaluation .test-table-header .level-title{
    transform: rotate(-45deg);
    transform-origin: bottom left;
    padding-left: 0.8ch;
}
.self_evaluation .test-table-header .level-title[data-title="Competency"],
.self_evaluation .test-table-header .level-title[data-title="Task Risk"]{
    color:red;
    text-transform: uppercase;
}
.self_evaluation .option-container>*{
    width:100%;
    pointer-events:none;
    display: flex;
}
.self_evaluation .option-container.selected>*{
    pointer-events:unset;
    display: grid;
    grid-template-columns: auto 2ch 2ch 3ch;
    padding: 0.5ch 1ch;
}
.self_evaluation .option-container label{
    margin:unset;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.self_evaluation .option-container.selected input.unset,
.self_evaluation .option-container.selected input.unset+label{
    display:none;
}
.self_evaluation .test-table-item>*:nth-child(2n){
/*.self_evaluation .test-table-header>*:nth-child(2n){*/
    background:#2078f108;
    background:unset;
}
.self_evaluation .test-table-item>*:nth-child(2n) .option-container.selected{
    background:unset;
}
.self_evaluation .test-table-header>*{
    /*border-left:unset;*/
}

.self_evaluation .test-table-body.selected .survey-sub-header,
.self_evaluation .test-table-body.selected .test-table-item{
    display:none;
}
.self_evaluation .test-table-body.selected .test-table-item.selected{
    display:grid;
}
.self_evaluation .test-table-item>*,
.self_evaluation .test-table-header>* {
    align-items: flex-end;
}
.self_evaluation .option-description{
    grid-column: 1;
    grid-row: 1;
}
.self_evaluation .option-container.selected>div:nth-child(2n+1) {
    background: #e4ebfa;
}
.self_evaluation .option-container input{
    grid-column-start: 3;
}
.self_evaluation .option-container.selected label.option-value{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
}
.self_evaluation .neta-note{
    grid-column-start: 1;
    grid-column-end: 20;
}
.self_evaluation .test-table-body.selected .neta-header{
    display:none;
}
.test-footer{
    min-height:10ch;
}
.self_evaluation .test-table-body.selected .selected-header{
    display:unset;
}
.self_evaluation .test-table-item .neta-details{
    display:none;
    grid-row:3;
    grid-column:1/20;
    font-size:0.84em;
    margin-top:3ch;
}
.self_evaluation .test-table-item.selected .neta-details{
    display:unset;
    white-space: break-spaces;
}
.welcome-user-label{
    text-transform: capitalize;
}
#test_difficulty_container{
    display:grid;
    grid-template-columns: 1fr 1fr;
}
#test_difficulty_container input{
    margin:auto;
    width:1.5ch;
}
#test_difficulty_container label{
    margin:auto;
    text-align:left;
    width:100%;
}
.skill-good{
    color: #0070ff;
    font-weight: bold;
}
.skill-bad{
    color:#f44336;
    font-weight: bold;
}
.test-title-question-number{
    display:none;
}

.question-control-panel{
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    padding-left: 6vw;
    align-items: baseline;
}
.body-study-mode .question-navigation-controls{
    display:none;
}
.body-study-mode .braincCoinControls-placeholder {
    grid-column: 2;
    grid-column-end: 7;
}
.test-time-container .time-controls>*{
    margin:auto;
}
.braincCoinControls-placeholder {
    grid-row: 1;
    grid-column: 1;
    grid-column: 2;
}
.question-navigation-controls{
    grid-column:1;
    grid-column-end: 8;
    grid-row: 2;
    width:max-content;
}

#braincCoinControls{
    position:relative;
    top:unset;
    left:unset;
    display: grid;
    grid-template-columns: max-content auto;
    min-height: 35px;
}
.braincoinsummary{
    position:relative;
    top:unset;
    left:unset;
    width:fit-content;
}
#coinDropContainer{
    transform: scale(0.2);
    transform-origin: top left;
    margin: 0;
    grid-column:1;
    height: 80px;
}
#sumaryBraincoins .sumaryBraincoinsText{
    display: grid;
    grid-template-columns: repeat(8, auto);
    grid-column-gap: 1ch;
    & div{
        width: auto;
    }
}
.test-time-container{
    display:unset;
}
.body-study-mode .test-time-container{
    display:unset;
    width: 100%;
    margin: 0;
}
.question-control-panel .number_question_index {
    padding-right: 0;
}
.voice-type-picker{
	top: -0.3ch;
	position: relative;
    grid-column: 1;
    grid-row: 2;
}
.playback-controls{
    grid-row: 3;
    grid-column: 1;
    margin-top:auto;
    margin-bottom:auto;
}
/* The mobile-only Next block. Hidden on desktop (where the Next paired with
   Pause Audio in the 2x2 is used); the mobile media query reveals it below the
   coins and hides the paired one. */
.cp-next-placeholder{ display: none; }
.highlight-control {
	& span {
	margin-right: 1ch;
	}
	display: flex;
	align-items: center;
/* 	margin-right: 0.5ch; */
/* 	margin-left: 0.5ch; */
	grid-column: 2;
	grid-row-start: 2;
    grid-row-end: span 2;
/*     line-height: 1.2em; */
}
.text-color-picker{
/* 	height: unset; */
    line-height: 1em;
}
.highlight-mode{
	display: flex;
	line-height: 1em;
	align-items: baseline;
	margin-top: -10px;
/* 	height: unset; */
}
.highlight-ball {
	margin-left: 1em;
}
#highlight-ball-checkbox {
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    margin-left: 5px;
}
.speed-controls{
/* 	display: flex; */
/* 	align-items: center; */
/* 	width: 100%; */
	grid-column: 2;
    grid-row: 1;
}

.braincCoinControls-placeholder{
    grid-row-start: 1;
    grid-column-start: 4;
    grid-column-end: 8;
    grid-row-end: 3;
}
.test-time-container, .test-time-container .options-container {
    width: auto;
    max-width: 65vw;
}
.container-question{
    width:90vw;
}
.improvement-results{
    grid-row: 3;
    grid-column: 1;
    grid-column-end: 8;
    display: grid;
    grid-template-columns: repeat(4, auto);
    width: 100%;
    display: flex;
    justify-content: center;
}
.test-question-container{
    width: 80vw;
    margin: auto;
}
.read-highlight{
    background:unset;
    font-style: italic;
    font-weight:bold;
    color: var(--highlight-text-color);
    font-size: 0.97em;
    &:has(.syllable-highlight){
        color:unset;
    }
}
.syllable-highlight{
    color: var(--highlight-text-color);
}


.body-study-mode:not(.capitals-test){
    .multipleChoiceLabel.label-below-answer {
        font-size: 45px;
        .read-highlight{
            background:#ffffffc2;
        }
    }
    .multipleChoiceLabel.label-below {
        font-size: 45px;
    }
}
:root {
    --highlight-text-color: #d99410;
}
.text-color-picker input[type='radio']{
    &+label{
        font-weight: bold;
        margin-top: unset;
    }
    &[value="5"]+label{
        color: black;
        &::after{
            content: "Black";
        }
    }
    &[value="4"]+label{
        color: blue;
        &::after{
            content: "Blue";
        }
    }
    &[value="3"]+label{
        color: hsl(180 100% 35% / 1);
        &::after{
            content: "Blue";
        }
    }
    &[value="2"]+label{
        color: hsl(120 100% 35% / 1);
        &::after{
            content: "Green";
        }
    }
    &[value="1"]+label{
        color: red;
        &::after{
            content: "Red";
        }
    }
}
.highlight-mode-picker input[type='radio']{
    &+label{
        margin-top: unset;
    }
	&[value="word"]+label{
        &::after{
            content: "word";
        }
    }
    &[value="syllable"]+label{
        &::after{
            content: "syllable";
        }
    }
}
.playback-controls{
    display: flex !important;
}
.time-controls-placeholder .options-container{
    font-size: 20px;
    display: flex;
    flex-direction: row;
    max-width: 70vw;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;
    padding-right: 6vw;
    text-transform: uppercase;
    display: grid;
    grid-template-columns: 1fr 1fr;
    & nobr{
        min-width: 50%;
        display: flex;
        align-items: baseline;
        justify-content: space-evenly;
        flex-direction: row;
    }
}
.time-controls-placeholder nobr.timing-controls{
    display: none;
}
.speed-controls{
    display: none;
}
.time-controls-placeholder .speed-controls{
    display: unset;
}
.time-controls-placeholder .speed-controls{
    grid-column: 1/3;
    width: min-content;
    margin: auto;
    display: flex !important;
}

.speed-controls span{
    margin-right: 2ch;
}
/* don't show the question feedback panel if questions are not showing */
.questions-container[disabled] ~ .feedback-panel {
  display: none;
}
.feedback-panel{
    font-size: 20px;
    display: flex;
    flex-direction: column;
    margin: 3ch 8vw 0px 8vw;
    & fieldset{
        display: flex;
        align-items: baseline;
    }
    & input{
        margin-left: 7ch;
        margin-right: 2ch;
    }
}
.time-controls-placeholder {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 8;
}
.header-coin{
    display:none;
}
.know-america-body, .know-africa-body, .know-europe-body{
    & .main-container{
        grid-template-rows: 45ch 50vh
    }
    & dialog::backdrop{
        background: #01004c94;
    }
    .back-menu{
        visibility: hidden;
    }
    .header-coin-logo{
        width: 32ch;
        width: 880px;
        height: 250px;
        max-width: 40vw;
        display: block;
        position:absolute;
        top:0%;
    }
    .welcome-to-test-dialog{
        text-align: center;
        font-size: 20px;
        /* & h2 {
            font-size: 42px;
        }
        & p {
            font-size: xx-large;
        } */
    }
    .welcome-to-test{
        padding: 100px 20px;
    }
}
.know-america-body.results-body, .know-africa-body.results-body, .know-europe-body.results-body{
    & .back-menu{
        visibility: visible;
    }
}
.header-page-description{
    font-size: 32px;
    display:flex;
    justify-content: left;
}
.know-america-container, .know-africa-container, .know-europe-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 2ch;
    .user-first-name{
        font-weight: bold;
    }
    .video-container{
        max-width: 50vw;
        margin: auto;
        padding: 5vh 5vw;
        & img,
        & video{
            width: 100%;
        }
    }
    & dialog{
        border-radius: 2ch;
        & .info-dump{
            display: block;
            /* padding:2ch; */
            margin: 0;
            & p{
                margin-bottom: 1ch;
            }
        }
    }
    .info-dump{
        grid-column: 1/-1;
        background: #f7f7fa;
        padding: 9vh 5vw;
        border-radius: 2ch;
        margin-top: 3ch;
        display:none;
    }
    .navigation-bar{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2ch;
        background: #f7f7fa;
        border-radius: 2ch;
        .buttonLook{
            padding: 2ch 4ch;
            height: auto;
            /* width: fit-content; */
            width: 540px;
            text-align: center;
            font-size: 30px;
            animation: callToAction 1s infinite;
        }
    }
    .button-container {
        display: flex;
        flex-direction: column;
        gap: 10px; /* Add space between buttons */
    }
    .video-dialog {
        width: 90%;
        max-width: 800px;
        max-height: 90%;
        overflow: auto;
        padding: 20px;
        border-radius: 4px;
        background-color: #fff;
    }
    .video-dialog-container {
        padding: 10px;
        padding-top: 15px;
        position: relative;
    }
    .close-video-dialog {
        position: absolute;
        top: 0;
        right: 0;
        padding: 10px;
        font-size: 24px;
        background-color: transparent;
        border: none;
        cursor: pointer;
    }
    .close-video-dialog:hover {
        color: #f00;
    }
    /* block video and action buttons from showing - Dave's request */
    .video-container, .navigation-bar {
    	display: none;
    }
    @keyframes callToAction {
        0%{
            transform: scale(1);
        }
        50%{
            transform: scale(1.3);
        }
        100%{
            transform: scale(1);
        }
    }
}

/* ---- Mobile control-panel tidy-up --------------------------------------- */
/* On phones the desktop layout squeezed the audio/highlight controls and the
   BrainCoins counter, and the counter's single-row layout truncated
   "In Vault". Stack the pieces and lay the counter out as label:value rows. */
@media (max-width: 768px) {
    /* The logout button overlaps the header banner "wave" on mobile, and its
       white backing pill (.button-border:before) sits at z-index:-1, so the
       navy banner hides it and the wave shows through the button. Give it an
       opaque pill that sits ABOVE the banner with solid text. Light mode only —
       dark mode drops the banner and styles the button itself. */
    html:not(.dark-mode) .navigation-controls .button-logout {
        position: relative;
        z-index: 2;
        background: #ffffff;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        color: var(--button-outline-color);
        -webkit-text-fill-color: var(--button-outline-color);
        border-radius: 22px;
    }
    html:not(.dark-mode) .navigation-controls .button-logout:before { display: none; }
    .question-control-panel {
        grid-template-columns: 1fr;
        padding-left: 0;
        justify-items: center;
        row-gap: 10px;
    }
    .braincCoinControls-placeholder,
    .time-controls-placeholder,
    .question-navigation-controls,
    .cp-next-placeholder {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100%;
        max-width: 100%;
    }
    /* show the mobile Next (below the coins), hide the desktop one paired with
       Pause Audio so it doesn't appear twice */
    .cp-next-placeholder { display: flex; justify-content: center; }
    .cp-next-placeholder .next-assessment { width: 100%; }
    .playback-controls .next-assessment { display: none; }
    /* Stack order within the control panel (which sits directly above the
       question). Standard assessments navigate with Next — original audio/coins
       order kept, with the Next block moved DOWN to sit directly above the
       question:  audio controls -> coins -> Next -> [question]. */
    .time-controls-placeholder      { order: 1; }  /* audio controls (incl. Pause Audio) on top */
    .braincCoinControls-placeholder { order: 2; }  /* coins */
    .question-navigation-controls   { order: 3; }  /* prev / go-to (if shown) */
    .cp-next-placeholder            { order: 4; }  /* Next — directly above the question */

    /* Capitals tests (the capitals_multiple_choice question type — whether reached
       via the KNOW landing pages OR a standalone assessment) auto-advance with no
       Next button, so it's fine for the coins to sit directly above the question
       (audio above the coins):  audio -> coins -> [question].
       body carries `capitals-test` (and `know-*-body` for the KNOW flow). */
    body.capitals-test .question-navigation-controls,
    body[class*="know"] .question-navigation-controls   { order: 0; }
    body.capitals-test .time-controls-placeholder,
    body[class*="know"] .time-controls-placeholder      { order: 1; }
    body.capitals-test .braincCoinControls-placeholder,
    body[class*="know"] .braincCoinControls-placeholder { order: 2; }
    /* capitals keep Pause Audio + Next bundled in the audio block (coins stay
       directly above the question) — the split is for standard tests only, so
       hide the standalone mobile Next and restore the paired one for capitals. */
    body.capitals-test .cp-next-placeholder,
    body[class*="know"] .cp-next-placeholder { display: none; }
    body.capitals-test .playback-controls .next-assessment,
    body[class*="know"] .playback-controls .next-assessment { display: inline-block; }
    .test-time-container,
    .test-time-container .options-container {
        max-width: 100%;
        width: 100%;
    }
    .test-time-container .options-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    /* within the audio block, drop Learn More / Why below the highlight options
       and just above Pause Audio:
       speed -> voice -> highlight -> Learn More/Why -> Pause Audio */
    .options-container .lesson-buttons    { order: 4; }
    .options-container .playback-controls { order: 5; }
    .voice-type-picker,
    .speed-controls,
    .highlight-control,
    .playback-controls {
        grid-column: auto;
        grid-row: auto;
        top: unset;
    }
    .highlight-control {
        flex-wrap: wrap;
        justify-content: center;
    }
    /* Put "Voice Selection:" on its own line so Father/Mother don't wrap. */
    .voice-type-picker {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 0.5ch;
    }
    .voice-type-picker > span {
        flex-basis: 100%;
        text-align: center;
    }
    /* Stack the Syllable/Word picker above the Ball control so "Word" and
       "Ball" stop wrapping into each other. */
    .highlight-mode {
        flex-direction: column;
        align-items: center;
        margin-top: 0;
    }
    .highlight-ball {
        margin-left: 0;
    }
    /* BrainCoins counter: compact, centred label:value rows (no truncation). */
    #braincCoinControls {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 4px;
    }
    /* (Coin-stack centering is handled in JS — standard_braincoin.js — because the
       group is absolutely positioned with a width that varies by coin count.) */
    #coinDropContainer { position: relative; }
    #sumaryBraincoins .sumaryBraincoinsText {
        grid-template-columns: auto auto;
        justify-content: center;
        column-gap: 0.75ch;
        row-gap: 2px;
        white-space: nowrap;
    }
    #sumaryBraincoins .sumaryBraincoinsText br {
        display: none;
    }
}

/* ---- Smaller phones (<=600px): the take/study screens had oversized text that
   overflowed the viewport — the header assessment title (2.1em, clipped right) and
   the read-along "...read along with The BrainRocket." label (2em, clipped left and
   shoved by .time-controls' padding-right:6vw). Shrink + centre them to fit. ---- */
@media (max-width: 600px) {
    .header-content {
        /* The header is a grid and this cell defaults to column 2 (the right 50%),
           so text-align:center only centred WITHIN the right half. Span the full
           width so the welcome/title actually centre on screen (matching the
           full-width speed slider below). */
        grid-column: 1 / -1 !important;
        align-items: center !important;
        text-align: center;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 6px;
        padding-right: 6px;
    }
    .header-logo-container {
        grid-column: 1 / -1 !important;
        justify-self: center;
    }
    .navigation-controls {
        align-items: center !important;
        align-self: center;
    }
    .button-logout {
        width: auto !important;
        max-width: 92vw;
    }
    .welcome-user-label,
    label.assessment-title,
    label.assessment-title.long-title {
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
        white-space: normal;
        overflow-wrap: break-word;
        padding-left: 6px;
        padding-right: 6px;
    }
    /* the title is 2.1em (1.5em "long") on desktop — too wide for a phone */
    label.assessment-title { font-size: 1.3em !important; line-height: 1.25 !important; }
    label.assessment-title.long-title { font-size: 1.1em !important; }

    /* Read-along study panel: drop the 6vw right padding that pushed the text off
       the left edge, and shrink the 2em label so it fits and stays centred. */
    .time-controls { padding-right: 0 !important; }
    .time-controls .info-label,
    .test-time-container .info-label {
        font-size: 1.45em !important;
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
        overflow-wrap: break-word;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* "Not sure of the answers? Stop the test..." — its 2ch left margin + 20px
       text overran the left edge. Centre it and keep it within the viewport. */
    .skip-test-container {
        margin: 2ch 0 0 0 !important;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
        text-align: center;
        font-size: 16px !important;
        overflow-wrap: break-word;
    }

    /* Put "Slower" / "Faster" on their own line (Slower left, Faster right) with
       the slider full-width on the line below — the single Slower [slider] Faster
       row was too wide for small phones and clipped "Slower". */
    /* Use the high-specificity selector so it beats the base rule's
       width:-webkit-fill-available + grid-column:2, which were pushing the row
       wider than the screen and clipping "Slower". */
    .time-controls-placeholder .speed-controls,
    .speed-controls {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        column-gap: 8px;
        row-gap: 4px;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
        padding: 0 12px;
    }
    .speed-controls > span {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .speed-controls > span:first-child { order: 0; }  /* Slower — left */
    .speed-controls > span:last-child  { order: 1; }  /* Faster — right */
    .time-controls-placeholder .speed-controls input[type='range'] {
        order: 2;            /* drop to its own line below the labels */
        flex: 1 1 100%;      /* claim the line so it wraps below Slower/Faster */
        width: auto !important;
        max-width: 85% !important;      /* a little narrower than edge-to-edge */
        min-width: 0 !important;
        margin: 6px auto 0 !important;  /* center it on its own line */
    }
}

/* Larger screens: enlarge the "Ride the BrainRocket" study view - the question/answer
   read-along text and every control around it (remaining count, voice + highlight
   pickers, Rounds bar, Start/Pause button, Q-of-N counter) - for readability. This is a
   read-along learning view, so on a roomy screen the extra space is better spent on
   bigger text. Mobile keeps its own (smaller) sizes from the max-width blocks above.
   Everything here is scoped to body.study-ride (set in general_assessment.php only in
   study mode) so the normal test view is untouched. */
@media (min-width: 1200px) {
    /* Question + answer read-along text. The ride renders .question-body (question) and
       .question-choice.correct-answer (answer); capitals rides use .study-question-text /
       .study-answer-container. */
    .study-ride .question-body,
    .study-ride .question-choice,
    .study-ride .study-question-text,
    .study-ride .study-answer-container,
    .study-ride .answer-state {
        font-size: 4.25rem !important;
        line-height: 1.22;
    }
    /* Remaining count ("N / M remaining") */
    .study-ride .number_question_index,
    .study-ride .number_question_index .qus-message,
    .study-ride .number_question_index .qus-sub {
        font-size: 26px;
    }
    /* Voice Selection + Highlight pickers */
    .study-ride .voice-type-picker { font-size: 25px; }
    .study-ride .highlight-control { font-size: 25px; }
    /* Rounds controls (these elements exist only in the study ride) */
    .study-ride .rounds-bar-label { font-size: 30px; }
    .study-ride .round-seg { min-width: 86px; min-height: 76px; }
    .study-ride .round-seg .round-icon { width: 48px; height: 48px; }
    /* Start / Pause button - grow it so the bigger label fits (base is a fixed 34px-tall
       pill; drop the fixed height and let padding size it, keeping the pill shape). */
    .study-ride #general-start-study-button,
    .study-ride #study-mode-pause-resume {
        font-size: 27px;
        height: auto;
        min-height: 0;
        line-height: 1.1;
        padding: 14px 44px;
        border-radius: 999px;
        width: auto;
    }
    /* Q x of y counter */
    .study-ride .rounds-question-counter { font-size: 30px; }
}

/* ---- Per-test Fonts button + picker (session-only override of the test font) ----
   Styled to match the storybook font list: a card of font-preview pills, each shown
   in its own typeface; the active/hovered one fills navy with gold text. */
.font-control { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.test-font-picker {
    border: none;
    border-radius: 16px;
    padding: 20px;
    max-width: 90vw;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.test-font-picker::backdrop { background: rgba(0, 0, 0, 0.45); }
.test-font-picker .font-picker-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #01004C;
}
.test-font-picker .font-option-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(340px, calc(90vw - 40px));
    max-height: 70vh;
    overflow-y: auto;
}
.test-font-picker .font-option-btn {
    width: 100%;
    text-align: center;
    cursor: pointer;
    padding: 12px 20px;
    border: 2px solid #01004C;
    border-radius: 12px;
    background: #fff;
    color: #01004C;
    font-size: 1.25rem;
    line-height: 1.3;
    transition: background .12s ease, color .12s ease;
}
.test-font-picker .font-option-btn:hover,
.test-font-picker .font-option-btn:focus-visible,
.test-font-picker .font-option-btn.active {
    background: #01004C;
    color: #FFD902;
}
.test-font-picker .font-option-btn:focus-visible { outline: 3px solid #0576fb; outline-offset: 2px; }
.test-font-picker .font-picker-close { margin-top: 16px; }