html{
	scroll-behavior:auto;
}
wordHolder{
	display:contents;
}

.wordinputs {
    border-radius: 2px;
    border-radius: 4px;
    border: thin solid #8b969e;
    padding: 2px 5px;
}

.spelling_holder .spelling_step_heading {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 12px 16px;
	border-bottom: 2px solid #d7e5f1;
	color: #234e70;
	font-size: 21px;
	line-height: 1.3;
	text-align: center;
}
.spelling_step_number {
	padding: 5px 10px;
	border-radius: 5px;
	background: var(--primary_blue, #306693);
	color: white;
	font-size: 13px;
	font-weight: bold;
	white-space: nowrap;
}
.spelling_holder .wordinputs {
	box-sizing: border-box;
	width: min(220px, calc(100vw - 140px));
	max-width: 100%;
	padding: 5px 9px;
	border-radius: 5px;
	background: white;
	border: 1px solid #a9bdcb;
	color: #183b56;
}
.spelling_holder .wordinputs[data-empty="true"] {
	background: #fcfdfe;
	border: 1px dashed #cad4dd;
}
.spelling_holder .wordinputs:focus {
	border: 1px solid #306693;
	outline: 2px solid #bdd8ef;
	outline-offset: 1px;
	background: white;
}
.content:has(.spelling_holder) > .sub_description_holder { margin-bottom: 12px; }
.innercontent:has(> #tosubmit) { padding-top: 0; }
.spelling_step_header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 8px 0 16px;
	padding: 12px 0;
	border-bottom: 2px solid #d7e5f1;
}
.spelling_step_header .spelling_step_heading { margin: 0; padding: 0; border: 0; }
#spelling_word_options { position: relative; flex: 0 0 auto; }
.spelling_word_options_button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	list-style: none;
	cursor: pointer;
	color: #778895;
}
.spelling_word_options_button::-webkit-details-marker { display: none; }
.spelling_word_options_button:hover,
#spelling_word_options[open] .spelling_word_options_button { background: #edf2f6; color: #306693; }
.spelling_word_options_button:focus-visible { outline: 2px solid #306693; outline-offset: 2px; }
.spelling_count_options {
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
}
.spelling_help_option { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: 13px; cursor: pointer; }
#spelling_assist_status { font-size: 12px; color: #72501f; }
.spelling_holder input.spelling_suspect { border-color: #b37332; }
word_holder [word_count] { align-self: flex-start; padding-top: 5px; }
.spelling_input_wrap { position: relative; display: block; min-width: 0; margin: 2px 5px; }
.spelling_word_wrap { width: min(220px, calc(100vw - 140px)); max-width: 100%; }
.spelling_holder .spelling_input_wrap > input { display: block; box-sizing: border-box; width: 100%; margin: 0; }
.spelling_holder .spelling_input_wrap > input.spelling_suspect { padding-right: 34px; }
.spelling_holder .spelling_warning { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; box-sizing: border-box; border: 1px solid #d4ad6f; border-radius: 50%; background: #fff4db; color: #87571d; padding: 0; font: bold 14px/1 Arial, sans-serif; cursor: pointer; }
.spelling_warning:hover, .spelling_warning[aria-expanded="true"] { background: #ffe4ad; border-color: #b37332; }
.spelling_warning_message { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.spelling_holder .spelling_warning[hidden], .spelling_assist_panel[hidden] { display: none; }
.spelling_holder .word_options .sentences content { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.word_options .sentences details { grid-column: 2; grid-row: 1; }
.spelling_assist_panel { position: fixed; z-index: 2000; box-sizing: border-box; max-height: min(340px, calc(100vh - 24px)); overflow-y: auto; padding: 5px; border: 1px solid #a9bdcb; border-radius: 7px; background: white; box-shadow: 0 4px 16px #183b5626; }
.spelling_assist_label { padding: 5px 8px; font: 12px/1.4 Arial, sans-serif; color: #526b7c; }
.spelling_assist_panel button { position: static; top: auto; display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 4px; background: white; color: #234e70; text-align: left; font: 14px/1.3 Arial, sans-serif; cursor: pointer; }
.spelling_assist_panel button[role="option"] { display: flex; align-items: center; gap: 10px; padding: 5px 8px; }
.spelling_suggestion_number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; height: 20px; border: 1px solid #d7e5f1; border-radius: 4px; background: #f3f8fc; color: #426784; font: 12px Arial, sans-serif; }
.spelling_assist_panel button:hover, .spelling_assist_panel button[aria-selected="true"] { background: #e8f1f8; }
.spelling_assist_panel button:focus-visible, .spelling_warning:focus-visible { outline: 2px solid #306693; outline-offset: 1px; }
.spelling_assist_panel .spelling_ignore { border-top: 1px solid #dce4eb; margin-top: 4px; font-size: 12px; }
.spelling_add_words {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 14px 0 0;
}
#add_more_words {
	padding: 8px 16px;
	border: 1px solid #9ab7cf;
	border-radius: 5px;
	background: #edf5fc;
	color: #234e70;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
#add_more_words:hover { background: #dcecf9; }
#add_more_words:focus-visible { outline: 2px solid #306693; outline-offset: 2px; }

.optionsHolder ws_name{
	display:flex;
	align-items:center;
	font-weight:bold;
	font-family:arial;
	letter-spacing:1.5px;
	padding:10px;
	flex:99;
	white-space:nowrap;
	font-size: 13px;
	color:black;
}
.optionsHolder ws_img{
	position:relative;
	left:4px;
	background:white;
	flex:0;
	width:0;
	transition: width 0.15s;
	border-left:1px solid black;
}
.optionsHolder .ws_type_holder{
    overflow: hidden;
    display: flex;
    border: 2px solid white;
    border-left: 15px solid white;
    cursor: pointer;
    width: 100%;
    height: 30px;
    box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 25%);
    background: linear-gradient(45deg, #e6f2ff, #bbcee2);
	position:relative;
	left:0px;
	transition: left 0.1s , border 0.1s , border-left 0s , box-shadow 0.1s , color 0.1s;
}

.optionsHolder input:checked ~ label .ws_type_holder{
	background: linear-gradient(45deg, #1b6592, #2493d7);
	background: linear-gradient(45deg, #2995d6, #83d0ff);
	background: linear-gradient(360deg, #96d1ff, #d5efff);
	box-shadow: unset;
    border: 1px solid black;
	border-left: 15px solid #0f2938;
}

.optionsHolder input:checked ~ label ws_name{
	color:white;
	text-shadow: 1px 1px black;
	color:black;
	text-shadow: unset;

}


.ws_type_holder banner{
	padding:5px; 
	background:yellow; 
	transform:rotate(315deg); 
	position:absolute; 
	width: 75px; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	right: 125px; 
	font-size: 10pt;
}



.options_box label input:checked + text{
	color:black;
}
.options_box label input + text{
	color:gray;
}

.optionsHolder .ws_type_holder:hover{
    border: 1px solid #5b769a;
	border-left: 15px solid #5b769a;
}
input:checked ~ label  .ws_type_holderss:before{
    width: 100%;
    height: 100%;
	box-shadow: -1px 1px 2px 2px rgb(0 0 0 / 25%) inset;
    position: absolute;
    left: 0px;
    top: 0px;
    content: '';
    z-index: 100;
}
.optionsHolder .ws_type_holder:hover ws_img , input:checked ~ label .ws_type_holder ws_img{
	left:0px;
	flex:1;
	width:100%;
	transition: width 0.35s;
}
.optionsHolder .ws_type_holder ws_img{
	left:0px;
	flex:1;
	width:100%;
	transition: width 0.35s;
}

.options_box{
    font-size: 0.85em;
    color: black;
    margin: 0vh 0 0vh 10%;
    display: flex;
    flex-direction: column;
    background: #ebf5ff;
    margin: 0px 5px 0px 40px;
    position: relative;
    top: 0px;
	margin-bottom: 5px;
    max-height: 0px;
    overflow: hidden;
    border: none;
	transition:  opacity 0.1s , max-height:0.1s;
	opacity:0;
}	

input[type="checkbox"]:checked ~ .options_box {
 	margin-bottom: 10px;
	opacity:1;
    display: flex;
	max-height: 10000px;
	padding:5px;
    border: thin solid black;
	transition:  opacity 0.1s , max-height:2s;
}




[name="spelling_word_display"] ~ .spelling_holder label[spelling_word_display]{
	border:thin solid gray;
	border-radius:3px;
	padding:1px 15px;
	cursor:pointer;
}

[name="spelling_word_display"] ~ .spelling_holder label[spelling_word_display]:hover{
	background:gray;
	color:white;
}


[name="spelling_word_display"][value="15"]:checked ~ .spelling_holder label[for="spelling_words_display_15"] ,
[name="spelling_word_display"][value="20"]:checked ~ .spelling_holder label[for="spelling_words_display_20"] , 
[name="spelling_word_display"][value="25"]:checked ~ .spelling_holder label[for="spelling_words_display_25"] , 
[name="spelling_word_display"][value="30"]:checked ~ .spelling_holder label[for="spelling_words_display_30"] , 
[name="spelling_word_display"][value="35"]:checked ~ .spelling_holder label[for="spelling_words_display_35"] { 
	background: #e8f1f8;
	color: #24567c;
	font-weight: bold;
}







.options_box .helper{
	color:red;
	font-size:13px;
	display:flex;
	text-align: center;
    font-weight: bold;
	margin:auto;
	text-transform:capitalize;
	padding:3px;
}
.optionsHolder label{
	cursor:pointer;
	user-select: none; 
}
.optionsHolder label input{
	padding:.1em 0vw;
	user-select: none; 
	pointer-events:initial;
}


.optionsHolder input:checked + img{
	border:thin solid white;
	filter: grayscale(0);
	box-shadow:2px 2px 2px rgba(0,0,0,0.25) inset;
}

.wordListHolder input{
    border-radius: 2px;
    background: var(--secondary_blue);
    border-radius: 4px;
    border: var(--border_around_secondary_blue);
    padding: 5px;
}


.wordListHolder{
	display:grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	grid-row-gap: .7em;
    width: fit-content;
    margin: auto;	
}

 .wordListHolder display{
   display: none;
}
 


[name="wrongSpellingDisplay"]:checked ~ .spellingHolder .wrongSpellingHolder{
	display:flex;
}


[name="wrongSpellingDisplay"] ~ .spellingHolder .wrongSpellingHolder{
/*	display:none;*/
}

.createButtonHolder{
	display:flex;
	align-items:center;
	padding:1vw 1vw;
	order:3;
	margin: 0px 20px;
}

#create_worksheet[inactive]{
	min-width:186px;
}
#create_worksheet[inactive]{
	cursor:not-allowed;
	filter: opacity(0.2);	
}

#create_sheet_alert{
	display:none;
}

#create_sheet_alert[disabled]{
	display:initial;
	z-index:100;
	color:red;
	font-weight:bold;
}
/* Create pressed with nothing ticked: the note pulses so the eye lands on it */
@keyframes create_alert_flash{
	0%, 100%{ transform:scale(1); }
	50%{ transform:scale(1.12); }
}
#create_sheet_alert.flash{
	animation: create_alert_flash 0.45s ease-in-out 3;
}
/* Create pressed for real: the worksheet opened in another tab, say so here */
#create_status{
	display:none;
	margin-top:10px;
	max-width:440px;
	padding:7px 14px;
	border:1px solid #bfe3c8;
	border-radius:6px;
	background:#e9f6ec;
	color:#1f5e2f;
	font-size:10.5pt;
	line-height:1.4;
	text-align:center;
}
#create_status[shown]{
	display:block;
}
#create_status .create_status_or{
	color:#4b6b53;
}
#create_status a.button_type_2{
	display:inline-block;
	margin:6px 4px 4px;
	padding:5px 16px;
	font-size:10.5pt;
	font-weight:bold;
	vertical-align:middle;
	text-decoration:none;
}


.wrongSpelling{
}
.wrongSpelling:invalid {
	box-shadow:none;
	background:linear-gradient(#F7E1E1,#F2D5D5);
	display:none;
}	


details[show_list="0"]{
	display:none;
}




[hideCheck]{
	display:none;
}

.optionsHolder {
}

.worksheetSelectHolder , .sheetOptionsHolder{
	display:flex;
	flex-direction:column;	
    border: thin solid black;
}
.worksheetSelectHolder gridItem{
	display:initial;
}
.sheetOptionsHolder gridItem{
	display:flex;
	flex-direction:column;
	margin-bottom:1vh;
}
wordholder gridItem{
    display: flex;
     align-self: flex-start;
}
wordholder input[type="text"]{
	padding:1px;
}








#options_holder gridLabel.blue {
    background: var(--accent_2);
    color: rgba(115, 110, 110, 1);
    border: thin solid gray;
    border-left: none;
    border-right: none;
}

#options_holder {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.spelling_step_section {
	width: 100%;
	max-width: 100%;
	margin: 28px auto 0;
}
.spelling_holder .spelling_step_section > .spelling_step_heading {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 16px;
	padding: 12px 0;
}
#options_holder .big_box_holder, .spelling_create_box {
	background: var(--accent_4);
	width: 450px;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid #d7e5f1;
	border-radius: 8px;
}
#options_holder .big_box_holder { padding-bottom: 8px; }
.spelling_activity_list { padding: 8px 14px 0; display: flex; flex-direction: column; }
.spelling_create_box { margin: 0 auto; padding-bottom: 16px; }
.generation_help { margin: 8px 0 10px; color: #426784; font-size: 13px; line-height: 1.5; text-align: center; }
.generation_help_message { display: flex; align-items: center; justify-content: center; gap: 7px; }
.generation_spinner { display: none; flex: 0 0 12px; width: 12px; height: 12px; border: 2px solid #c5d9e9; border-top-color: #306693; border-radius: 50%; }
[generate_options][aria-busy="true"] .generation_spinner { display: inline-block; animation: spelling_generate_spin 0.8s linear infinite; }
@keyframes spelling_generate_spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	[generate_options][aria-busy="true"] .generation_spinner { animation: none; }
}
.generation_help a { display: inline-block; color: #24567c; text-decoration: underline; text-underline-offset: 2px; }
.generation_status { font-size: 12px; padding: 6px 0; color: #426784; text-align: center; }
.generation_status:empty { display: none; }
.generation_error { color: #a62c27; }
.generation_dropdown { margin: 4px 0 6px; }
.generation_dropdown > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 9px 10px;
	border: 1px solid #9bbcd5;
	border-radius: 6px;
	background: white;
	color: #24567c;
	font-size: 13px;
	font-weight: 600;
	list-style: none;
}
.generation_dropdown > summary svg { flex: 0 0 auto; }
.generation_dropdown > summary:hover, .generation_dropdown[open] > summary { background: #f3f8fc; border-color: #306693; }
.generation_dropdown > summary:focus-visible { outline: 2px solid #306693; outline-offset: 2px; }
.generation_dropdown > summary::-webkit-details-marker { display: none; }
.generation_dropdown > summary::after { content: '▾'; margin-left: auto; }
.generation_dropdown[open] > summary::after { content: '▴'; }
.generation_settings {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	margin: 4px 0 6px;
	padding: 10px;
	border: 1px solid #c5d9e9;
	border-radius: 5px;
	background: white;
}
.generation_settings label { font-size: 12px; }
.generation_settings select { width: 100%; min-width: 0; }
.generation_settings button { grid-column: 1 / -1; justify-self: start; }
#create_worksheet:disabled { cursor: wait; }


gridRow[nop]{
	display:none;
}







@media only screen and (max-device-width: 480px){
	
	wordHolder{
		display:flex;
		flex-direction:column;
		margin:1vh 1vw;
	}
	.wordListHolder {
		display: flex;
		flex-direction: column;
		padding: 0vh 4vw;
	}
	  
	.optionsHolder{
		display:flex;
		flex-direction:column;
		margin:auto;
		width:100%;
		margin:10vh 0vw;
	}	
	wordholder input[type="text"] {
		padding: 5px;
		font-size: 1.2rem;
		margin: auto;
	}
	.wrongSpellingHolder {
		display: flex;
		flex-direction: column;
	}	
	
	.optionsHolder gridRow > *:nth-of-type(1){ order: 1; }	
	.optionsHolder gridRow > *:nth-of-type(2){ order: 2; }	
}











#normal_word_list{
	border: none;
	min-width: 0;
	padding: 0 12px;
}


#review_word_list{
	border: none;
    margin-top: 30px;
    border-top: 1px solid #e1e7ec;
}
#review_word_list legend{
    margin: 10px auto 10px;
    font-weight: bold;
}


#bonus_word_list{
	border: none;
    margin-top: 30px;
    border-top: 1px solid #e1e7ec;
}
#bonus_word_list legend{
    margin: 10px auto 10px;
    font-weight: bold;
}



			




.spelling_holder{
	display:flex;
	flex-direction:column;
    max-width: 800px;
    width: 100%;	
	margin:auto;
}

.word_list_holder{
	display:flex; 
	flex-direction:column; 
	margin:auto;
}


word_holder [word_count] {
	text-align: end;
}

word_holder [word_count]::before {
	counter-increment: normal_word;
	content: attr(word) " " counter(normal_word) " ";
}

.word_list_content{
	counter-reset: normal_word;
	display:content;
	display:flex; 
	flex-direction:column;
}




[name="fib_display"]:checked ~ .spelling_holder .word_options .sentences{ display:contents;}
[name="definitions_display"]:checked ~ .spelling_holder .word_options .definitions{ display:contents;}
[name="crossword_display"]:checked ~ .spelling_holder .word_options .crossword{ display:contents;}
[name="wrong_spelling_display"]:checked ~ .spelling_holder .word_options .wrong_spelling{ display:contents;}
[name="usage_display"]:checked ~ .spelling_holder .word_options .usage{ display:contents;}
[name="match_image_display"]:checked ~ .spelling_holder .word_options .match_image{ display:contents;}




#inline_bonus_review_display_option{ 
	display: flex;
    justify-content: center;
    font-size: 10pt;
    margin-top: 12px;
	color: #627787;
}
#inline_bonus_review_display_option label:hover { color: #306693; }
#inline_bonus_review_display_option span {
	margin-right: 4px;
	color: white;
	background: #22c55e;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: bold;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	line-height: 1;
}
#review_bonus_display_hide span { background: #c52222; }


[name="review_bonus"] ~ .spelling_holder #review_bonus_display_hide{ 
	display:none;
}
[name="review_bonus"]:checked ~ .spelling_holder #review_bonus_display_show{ 
	display:none;
}
[name="review_bonus"]:checked ~ .spelling_holder #review_bonus_display_hide{ 
	display:initial;
}





.word_options{
	display:none;
}
[word_options_display]:checked ~ .spelling_holder .word_options{
	display:grid;
	grid-template-columns: auto 1fr auto;
	row-gap: 4px;
	padding:4px 0px 4px 150px;
}
[word_options_display]:checked{
	background:pink;
}


[word_options_display]:checked ~ .spelling_holder .word_list_holder{
	width: 100%;
}

word_holder{
	display: flex;
    flex-direction: column;
    margin-bottom: 5px;
}

refresh_text_holder{
    justify-content: center;
    align-items: center;
	display: flex;
}

refresh_text_holder img{
	display:none;
	cursor:pointer;
	height:16px;
}
refresh_text_holder[allowed] img{
    justify-content: center;
    align-items: center;
	margin-left:5px;
	display: initial;
}

.word_options .sentences content{
	display:flex;
}

.word_options text{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0px 10px;
	padding:0px 15px;
	border-radius:9px;
	font-size:8.5pt;
    padding: 2px 15px;
    margin: auto 10px;	
}

.word_options input{
	border:none;
	border-radius:0px;
	width:100%;
	padding: 5px 25px 5px 10px;
}







.word_options manual_select{
    position: absolute;
    right: -2px;
    display: flex;
    flex-direction: column;
    background: white;
    border: border:;
    background: white;
    max-width: 500px;
    width: max-content;
    top: calc(100% + 5px);
    row-gap: 6px;
    /* left: 0; */
    border: 2px solid #22659E;
    box-shadow: -4px 4px 6px 2px rgb(0 0 0 / 25%);
}

.word_options manual_select select_option:before{
	content: '\2022  ';
}

.word_options select_option{
	border: thin solid transparent;
    padding: 1px 10px;
    font-size: 11pt;
	cursor:pointer;
}

.word_options select_option:hover{
	border:thin solid gray;
	background:rgba(0,0,0,0.1);
}

/* Which meaning of the word this option is written for - "the heavy grey metal" against a
   sentence for lead. Generated content, deliberately: script.js copies a clicked option with
   $(this).html(), so anything that is a real child element would end up in the teacher's
   sentence. An option with no meaning attached (anything written before the bank knew about
   meanings) simply shows nothing. */
/* An option is a line of text with a refresh control at its right: "write me another one for
   this meaning". Clicking it adds a sentence rather than replacing one, and the new sentence
   goes into the bank, so the list grows as teachers use it. */
.word_options select_option{
	display: flex;
	align-items: flex-start;
	column-gap: 6px;
}

.word_options select_option opt_text{
	flex: 1;
}

.word_options select_option opt_refresh{
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	cursor: pointer;
	opacity: 0;
	background: no-repeat center / 13px url("/code_site/icons/svg_car_cat_caf/refresh_icon.svg");
}

.word_options select_option:hover opt_refresh{
	opacity: 0.55;
}

.word_options select_option opt_refresh:hover{
	opacity: 1;
	background-color: rgba(34,101,158,0.15);
}

/* One rewrite at a time - every other control is dead while one is in flight. */
body[option_refresh_busy] .word_options select_option:not([busy]) opt_refresh{
	pointer-events: none;
	opacity: 0.15;
}

.word_options select_option[busy] opt_refresh{
	opacity: 1;
	animation: spelling_option_spin 0.8s linear infinite;
}

@keyframes spelling_option_spin{ to{ transform: rotate(360deg); } }

.word_options select_option[meaning]:after{
	content: attr(meaning);
	display: block;
	font-size: 9pt;
	font-style: italic;
	color: #22659E;
	padding-left: 2px;
}


.word_options input{
	border-radius: 6px;
	background:transparent;
}





.sentencesarea[type="text"]:placeholder-shown , .definitionsarea[type="text"]:placeholder-shown , .wrongSpelling:placeholder-shown , .crosswordInput[type="text"]:placeholder-shown{
	box-shadow:none;
}



.word_options .sentences text{
	background:#CCE0F1;
	color:#22659E;
}

.word_options .sentences content{
	background:#f5faff;
	border: 1px solid #22659E;
}

.word_options .sentences input::-webkit-input-placeholder{
	color:rgb(34 101 158 / 50%);
}

.word_options .sentences manual_select{
    border: 2px solid #22659E;
}


word_holder[hidden] {
	display:none;
}


#review_word_list , #bonus_word_list{
	display:none;
}

[name="review_bonus"]:checked ~ .spelling_holder :is( #review_word_list , #bonus_word_list ) {
	display:revert;
}



#spelling_words_extra_options{
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	box-sizing: border-box;
	width: 310px;
	max-width: calc(100vw - 32px);
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 18px;
	border: 1px solid #dce4eb;
	border-radius: 8px;
	background: white;
	color: #334d60;
	font-size: 13px;
	box-shadow: 0 6px 24px rgba(24, 59, 86, 0.12);
}

#spelling_words_extra_options fieldset{
	margin: 0;
	padding: 0;
	min-width: 0;
	border: none;
}

#spelling_words_extra_options fieldset content{
	padding: 8px 0 0;
	display: block;
}

#spelling_words_extra_options fieldset legend{
	font-size: 12px;
	font-weight: bold;
	margin: 0;
	padding: 0;
	text-align:left;
	white-space:nowrap;
}

 #spelling_words_extra_options fieldset label{
	display: flex;
	align-items: center;
	white-space: nowrap;
}
#spelling_words_extra_options .spelling_count_options { gap: 5px; justify-content: flex-start; }
#spelling_words_extra_options label[spelling_word_display] { padding: 5px 12px; border-color: #dce4eb; }
#spelling_words_extra_options label[spelling_word_display]:hover { background: #edf2f6; color: #306693; }
#spelling_words_extra_options toggle { background: #c5cfd7; }
#spelling_words_extra_options input:checked ~ toggle { background: #306693; }
#list_of_words_for_paste {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 10px;
	padding: 8px;
	resize: vertical;
	border: 1px solid #cad4dd;
	border-radius: 5px;
	font: inherit;
}
.spelling_paste_separators { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.spelling_paste_button {
	align-self: flex-start;
	border: 0;
	border-radius: 5px;
	padding: 8px 12px;
	background: #306693;
	color: white;
	font: inherit;
	cursor: pointer;
}
.spelling_paste_button:hover { background: #234e70; }





.word_options .wrong_spelling text{
	background:#F8C3C3;
	color:#B91414;
}

.word_options .wrong_spelling content{
	column-gap: 10px;
}

.word_options .wrong_spelling input::-webkit-input-placeholder{
	color:rgb(185 20 20 / 50%);
}

.word_options .wrong_spelling input{
	border-radius: 6px;
	border: 1px solid #B91414;
	background:#fff3f3;
}

.word_options .wrong_spelling manual_select{
	border: 2px solid #B91414;
}




.word_options .definitions text{
	background:#D8CCF1;
	color:#52378A;
}

.word_options .definitions content{
	background:#f6f1ff;
	border: 1px solid #52378A;
}

.word_options .definitions input::-webkit-input-placeholder{
	color:rgb(82 55 138 / 50%);
}

.word_options .definitions manual_select{
	border: 2px solid #52378A;
}




.word_options .crossword text{
	background:#F2E5B7;
	color:#796006;
}

.word_options .crossword content{
	background:#fbf8f2;
	border: 1px solid #796006;
}

.word_options .crossword input::-webkit-input-placeholder{
	color:rgb(121 96 6 / 50%);
}

.word_options .crossword manual_select{
	border: 2px solid #796006;
}





.word_options .usage text{
	background:#efefef;
	color:#9d9d9d;
}

.word_options .usage content{
	column-gap: 10px;
}

.word_options .usage input::-webkit-input-placeholder{
	color:#9d9d9d;
}

.word_options .usage input{
	border-radius: 6px;
	border: 1px solid #9d9d9d;
	background:#efefef;
}

.usage input[usage_type="correct"]{
	border-left:6px solid #96d096;
}
.usage input[usage_type="wrong"]{
	border-left:6px solid #ef7373;
}
.word_options .usage manual_select{
	border: 2px solid #9d9d9d;
}




.word_options .match_image text{
	background:#C8E6C9;
	color:#1B5E20;
}

.word_options .match_image content{
	background:#f4fbf4;
	border: 1px solid #1B5E20;
}

.image_picker{
	display:flex;
	align-items:center;
	width:100%;
	min-height:52px;
	padding:4px 10px;
}

.image_picker_thumbs{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:6px;
}

.image_picker .image_choice{
	height:48px;
	width:48px;
	object-fit:contain;
	background:white;
	border:2px solid #ccc;
	border-radius:6px;
	cursor:pointer;
	padding:2px;
}

.image_picker .image_choice:hover{
	border-color:#1B5E20;
}

.image_picker .image_choice[selected]{
	border:3px solid #1B5E20;
	background:#dff3df;
}

.image_picker .image_picker_none{
	font-size:8.5pt;
	color:#9d9d9d;
	padding:2px 8px;
	border:1px dashed #ccc;
	border-radius:6px;
	cursor:pointer;
	user-select:none;
}

.image_picker .image_picker_none:hover{
	color:#B91414;
	border-color:#B91414;
}

.image_picker .image_picker_empty{
	font-size:8.5pt;
	color:#9d9d9d;
}

#image_preview_popout{
	position:fixed;
	z-index:2000;
	width:280px;
	background:white;
	border:2px solid #1B5E20;
	border-radius:10px;
	box-shadow:0 4px 16px rgba(0,0,0,0.25);
	padding:8px;
	pointer-events:none;
	display:none;
}

#image_preview_popout img{
	width:100%;
	height:230px;
	object-fit:contain;
	display:block;
}

#image_preview_popout .preview_caption{
	font-size:8.5pt;
	color:#444;
	text-align:center;
	padding-top:4px;
	max-height:60px;
	overflow:hidden;
}





word_holder [word_count]{
	width:80px;
}

.word_options content_holder{
	display:none;	
}

.word_options content{
	display:flex;
	width:100%;
	border-radius: 6px;
}

.word_options details{
	display:flex;
}

.word_options summary{
	cursor:pointer; 
	font-size:.8em; 
	height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.word_options details content{
	background:#e9f5ff; 
	position:absolute; 
	top:100%; 
	padding:2px; 
	border:thin solid black; 
	width: 100%; 
	left: 0px; 
	display:flex; 
	flex-direction:column;
}



/* ============================================
   AUTOSAVE RECOVERY BANNER 
   ============================================ */
#autosave_recovery {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	background: linear-gradient(135deg, #fff3cd, #ffeeba);
	border-bottom: 2px solid #f0c040;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	padding: 10px 20px;
	animation: autosave_slide_down 0.3s ease-out;
}

@keyframes autosave_slide_down {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

.autosave_recovery_inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
	max-width: 800px;
	margin: auto;
	font-size: 11pt;
	color: #664d03;
	font-weight: 500;
}


/* ============================================
   SAVE SECTION 
   ============================================ */
.save_section {
	margin-bottom: 15px;
}

.save_section details summary {
	list-style: none;
}
.save_section details summary::-webkit-details-marker {
	display: none;
}
.save_section details summary:hover {
	color: #333;
	text-decoration: underline;
}

.save_section fieldset {
	border: none;
	margin-bottom: 8px;
}
.save_section fieldset legend {
	font-size: 9pt;
	font-weight: bold;
	margin-bottom: 3px;
}
.save_section fieldset content {
	display: block;
}

#save_status_message a {
	color: #1a6fb5;
	text-decoration: underline;
}
/* Content previews share one compact presentation inside activity options. */
.word_forms_preview { padding: 0 10px 10px; font-size: 0.9rem; line-height: 1.45; }
.word_forms_status { margin: 8px 0; }
.word_forms_status:empty { display: none; }
.activity_preview { margin: 8px 0; font-size: 0.9rem; line-height: 1.45; }
.activity_preview[hidden] { display: none; }
.activity_preview summary { cursor: pointer; color: #245c85; }
.activity_preview_answers { max-height: 230px; overflow-y: auto; overflow-wrap: anywhere; text-align: left; margin-top: 8px; }
.activity_preview_row { padding: 7px 0; border-bottom: 1px solid #e0e5e9; }
.activity_preview_row:last-child { border-bottom: 0; }
.activity_preview_row p { margin: 2px 0; }
.activity_preview_word { appearance: none; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; margin: 0; color: #245c85; font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.activity_preview_word:hover { color: #153a56; background: none; }
.activity_preview_word:focus-visible { outline: 2px solid #306693; outline-offset: 2px; }
.standalone_preview { padding: 0 10px 10px; }
.word_forms_error { color: #a32b21; }
.spanish_status:empty { display: none; }
.translation_language_control { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.translation_language_control select { flex: 1; min-width: 0; }
.activity_preview .activity_preview_arrow { color: #59636b; }
.activity_preview .activity_preview_answer { color: #222; font-weight: 600; }