:root {
	--font-size: 1.3rem;
	--word-spacing: 0.3rem;
	--text-color: #2D3436;
	--background-color: #fff;
	--max-width: 1000px;
	--border-radius: 0.7rem;
	/* --color-accent: #69747C; */
	/* --color-accent: #FE5F55; */
	--color-accent: #FF7477;
	--color-ak-answer: #00B828;
	--line-color: #FF5F5C;
	--g_border_color: #ddd;
	--db_summary_bg: #f5f5f5;
	--db_summary_hover_bg: #e5e5e5;
	--db_summary_fg: #000;
	--db_footer_bg: #f0f0f0;
	--db_link_fg: #007bff;

	--color_bg_data_context_relevant: #ffefd6;
	--color_border_data_context_relevant: #fdd699;

	--color_bg_usage_label: #D6E1EB;
	--color_border_usage_label: #BBCDDD;
}

@font-face {
	font-family: 'f4';
	src: url('../fonts/HelveticaNeueLTStd-Blk.otf');
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'f3';
	src: url('../fonts/NeusaNextPro-CompactLight.otf');
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'b';
	src: url('../fonts/GoogleSans-Bold.ttf');
	font-family: 'b';
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'r';
	src: url('../fonts/GoogleSans-Regular.ttf');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'm';
	src: url('../fonts/GoogleSans-Medium.ttf');
	font-display: swap;
}
@font-face {
	font-family: 'i';
	src: url('../fonts/GoogleSans-Italic.ttf');
	font-display: swap;
}

.page_header_image {
	/* 100% of the viewport width */
	width: 100vw;

	/* ADJUSTED CALCULATION:
	   1. 50% - 50vw: Compensates for the body's centering offset.
	   2. - 10px: Compensates for the body's 'padding: 10px' on the left side. */
	margin-left: calc(50% - 50vw - 10px);

	/* Force this element to the very start of the flex container */
	order: -1;

	/* Styling */
	height: 278.356px; /* Matching user's inline style height for testing */
	background-color: #3498db; /* Blue for the header */
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 24px;
	font-weight: bold;
	text-align: center;

	border: 1px dashed white;
}

.no_select {
  /* Prevents text from being highlighted/selected */
  -webkit-user-select: none; /* Safari/Chrome/Android */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
  user-select: none;         /* Standard */

  /* Prevents the blue/gray highlight when an element is tapped on mobile */
  -webkit-tap-highlight-color: transparent; /* iOS/Android */
}


.data-context-relevant {
	background-color: var(--color_bg_data_context_relevant);
	border-radius: 10px;
	border: 1px solid var(--color_border_data_context_relevant);
	padding: 5px;
}

.chem_formula {
	font-family: Arial, Menlo, Monaco, 'Liberation Mono', 'DejaVu Sans Mono', monospace;
}

.usage_label {
	background-color: var(--color_bg_usage_label);
	border: 1px solid var(--color_border_usage_label);
	border-radius: 10px;
	padding: 0 5px;
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
}

.admin-file {
    background-color: #fff3cd; /* Light yellow background */
    border-left: 4px solid #ffc107; /* Yellow left border */
    color: #856404; /* Dark yellow text */
}

/* Optional: Add hover effect */
.admin-file:hover {
    background-color: #ffeaa7;
}

/* Optional: Style the link inside admin files */
.admin-file a {
    color: #856404 !important;
    font-weight: bold;
}











.divider {
	border-bottom: 1px solid #ddd;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.js-script-hidden {
	display: none !important;
}

/* font-family: 'YourCustomWebFont', Arial, Helvetica, sans-serif; */


/* This class applies the highlight */
.js-fragmentHighlighter-highlight-target {
    background-color: yellow !important; /* Use !important to ensure it overrides existing styles */
}

/* This class is used to trigger the fade-out back to the original color */
/* Set this to the default background color you expect, or 'transparent' */
.js-fragmentHighlighter-remove-highlight {
    background-color: transparent !important; /* Or white, #f0f0f0, etc. based on your site's background */
    transition: background-color 3s ease; /* Smooth transition for the fade-out */
}

.i {
	font-family: 'font-i';
}

.hw_status_incomplete {
	font-family: 'r';
	color: red !important;
}
.hw_status_complete {
	font-family: 'r';
}
.hw_status_saving {
	font-family: 'r';
	color: blue;
}
.hw_status_complete::after {
}
.hw_status_incomplete::after {
    content: '';
}
.hw_status_saving::after {
    content: ' (saving ...)';
}

.hw_date {
	font-size: 0.8rem;
	color: #888;
}

.hw_items {
	margin-bottom: 1rem;
}

.tmp_433 {
	margin-top: 2rem;
}

.db_summary_rating {
	color: silver;
}

/* Default Collapsed State */
.db_sec_box {
    border: 1px solid var(--g_border_color);
    max-height: 200px;
    padding: 1rem;
    overflow-y: auto;
	font-size: 1rem;
	line-height: normal;
	word-spacing: normal;
}
.db_sec_box a {
  color: var(--db_link_fg);
  text-decoration: none;
}
.db_sec_box a:hover {
  color: var(--db_link_fg);
  text-decoration: underline;
}
.db_sec_box a:visited {
  color: var(--db_link_fg);
}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.footer {
    border-top: 1px solid var(--g_border_color);
    font-size: 0.8rem;
    width: 100vw;
    padding: 0.5rem;
    text-align: center;
    margin: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: var(--db_footer_bg);
    z-index: 1000;
}
.footer a {
  color: var(--db_link_fg);
  text-decoration: none;
}
.footer a:hover {
  color: var(--db_link_fg);
  text-decoration: underline;
}
.footer a:visited {
  color: var(--db_link_fg);
}

.db_details {
  border: 1px solid var(--g_border_color);
  border-radius: 0px;
  overflow: hidden; /* Ensures content is clipped during animation */
  transition: max-height 0.5s ease, border-color 0.5s ease;
  max-height: 2.5rem; /* Default height when collapsed */
}

.db_details[open] {
  max-height: 500px; /* Large enough to fit expanded content */
  transition: max-height 0.5s ease, border-color 0.5s ease;
}

.db_summary {
  border-radius: 0px;
  font-family: 'b';
  font-size: 1rem;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--db_summary_fg);
  background-color: var(--db_summary_bg);
}

.db_summary:hover {
  background-color: var(--db_summary_hover_bg);
}

.db_details[open] summary {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.db_details+div {
  padding: 0.5rem;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.db_details[open] div {
  opacity: 1;
  transform: translateY(0);
}







.db_summary_date {
	font-family: 'b';
}
.summary_date + div {
}

.hw_header {
    font-family: 'b';
	margin-top: 1rem;
}

.dashboard_summary_paragraph_spacing {
	margin-top: 0.5rem;
}

#ex_ol ol li, #ex_ol ul li {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

li::marker {
    color: silver;
    font-family: 'b';
}

.blank {
}

.center {
	text-align: center;
}

.c710_chapter_title {
  text-align: center;
  font-size: 2rem;
  font-family: 'f4';
  margin-bottom: 1rem;
  font-family: 'b';
}

.listen {
	width: 1rem;
	height: 1rem;
	vertical-align: 0.5rem;
	fill: silver;
	cursor: pointer;
	transition: fill 0.2s ease;
}
.listen:hover {
	border-radius: 3px;
	fill: #000;
}


.mt1 {
	margin-top: 1rem;
}
.mb1 {
	margin-bottom: 1rem;
}

body {
    color: var(--text-color); /* Use a CSS variable for dynamic font color */
	background-color: var(--background-color);
    font-family: 'r'; /* Use a font with a fallback */
    margin: 0; /* Reset body margins */
    padding: 10px; /* Add consistent padding to the body */
    max-width: 1000px; /* Constrain body content */
    margin-left: auto; /* Center the body horizontally */
    margin-right: auto; /* Center the body horizontally */
    margin-bottom: 200px;
    padding-bottom: 4rem; /* Add space at the bottom for the fixed footer */
	font-size: var(--font-size);
	line-height: 1.4;
	word-spacing: 0.2rem;

	display: flex;
	flex-direction: column;
}

.db_material_subitems {
}
.db_material_title {
	font-family: 'b';
	width: fit-content;
}
.db_material_id {
    color: silver;
}

.rb {
	border: 1px solid red;
}
.db_material_frame {
	margin-bottom: 1rem;
}

.single_col div {
	margin-bottom: 1rem;
}

.code {
	background-color: #E6F7FF;
	font-family: Arial, monospace;
}



.audible {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-style: dotted;
}

/* ==================== tooltip ==================== */
.tooltip {
    position: fixed;
    background-color: #36454F; /* Charcoal background */
    color: #eee; /* White foreground (text) */
    padding: 10px 15px;
    border-radius: 10px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: auto;
    text-align: left;
    /* Outer Glow Effect: A soft, subtle glow (can be slightly lighter charcoal or a very dark grey) */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* A soft black/dark grey glow for depth */
}

.tooltip-content {
    max-width: 250px;
    word-wrap: break-word;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    z-index: 1;
}

/* Arrow when tooltip is above the trigger (points down) */
.tooltip-arrow.bottom {
    border-top: 10px solid #36454F; /* Matches the tooltip background color (Charcoal) */
    bottom: -11px; /* Overlap to hide seam */
    /* Dark grayish drop shadow for the arrow */
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
}

/* Arrow when tooltip is below the trigger (points up) */
.tooltip-arrow.top {
    border-bottom: 10px solid #36454F; /* Matches the tooltip background color (Charcoal) */
    top: -11px; /* Overlap to hide seam */
    /* Dark grayish drop shadow for the arrow */
    filter: drop-shadow(0 -3px 3px rgba(0, 0, 0, 0.4));
}

/* Tooltip Trigger Styles */
/* Assuming a light page background, let's make the trigger subtle */
.tooltip-trigger {
	cursor: pointer;
	position: relative;
 	background-color: #E0E0E0; /* A very light grey for the default trigger state */
    color: #333333; /* Dark text for contrast on light background */
}
.tooltip-trigger:hover,
.tooltip-trigger.tooltip-active {
 	background-color: #36454F; /* Charcoal, same color as the tooltip when hovered or active */
    color: #eee; /* White text when hovered/active */
}
/* ==================== */

.ex_example {
	border: 1px dashed silver;
	background-color: #F5FFFA;
	padding: 1rem;
}

.separator {
		border: none;
		border-top: 1px solid #ccc; /* Light gray line */
		margin: 20px 0; /* Adds space above and below */
		width: 100%; /* Full width */
}

.content_image_container {
	text-align: left;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.content-image {
	display: block;
	width: 100%;
}

.content-image-caption {
	font-size: 0.8rem;
}

.ex_frame {
	margin-top: 1rem;
	border: 1px dashed silver;
	background-color: #fffff1;
	padding: 1rem;
	font-family: 'r';
	page-break-inside: avoid;
	margin-bottom: 1.5em;
}
.ex_title {
	text-align: center;
	font-size: 1.5rem;
	font-family: 'b';
	margin-top: 0.5em;
}
.ex_type {
	text-align: center;
	font-size: 0.8rem;
	margin-bottom: 1.5em;
}
.ex_cue {
	font-family: 'b';
}

.c756_ex_li_li {
	margin-left: 2em;
}
.ex_type {
	text-align: center;
	margin-bottom: 1rem;
}
.c755_ex_nr {
	font-family: 'b';
	font-family: 'b';
}

.b {
	font-family: 'b';
}






.toc_sub_item {
    width: fit-content;
    display: flex;
    align-items: baseline;
    list-style: none; /* Crucial: Remove the default list style */
    padding-left: 0px; /* Add space for the custom bullet */
    position: relative; /* Needed for absolute positioning of the ::before */
}

.toc_sub_item::before {
    content: "\2022"; /* Unicode for a bullet point (•) */
    color: var(--g_border_color); /* Color of your bullet */
    font-weight: bold; /* Make the bullet stand out */
    display: inline-block; /* Treat it as an inline block */
    width: 1em; /* Control the width of the bullet area */
    margin-right: 0.1em; /* Space between bullet and text */
    /* If you want absolute positioning for finer control: */
    /* position: absolute; */
    /* left: 0; */
    /* top: 0; */ /* Adjust as needed with align-items: baseline */
}

.toc_sub_item a {
    display: inline;
    word-wrap: break-word;
    overflow-wrap: break-word;
}












/*	Prevents the text within the li from wrapping
	Or 'auto' or 'max-content' might also be tested here
	'fit-content' with nowrap will act like 'max-content'
	Optional: if you want to handle cases where it still might be too wide for its container */
li.toc_sub_item {
    white-space: normal;
    width: fit-content;
}

/*	If the text is inside an <a> tag and that's what's wrapping, you might target it too,
	though white-space: nowrap on the <li> should often suffice if the <a> is inline.
	Usually not needed if on the li, but can be tested
	Can be tested if you need the 'a' to have block-like properties but flow inline */
li.toc_sub_item a {
     white-space: nowrap;
     display: inline-block;
}

.db_mat_toc {
	display: grid;
	grid-template-columns: minmax(3ch, auto) 1fr; /* Left column auto-sizes, but ensures a minimum width */
	column-gap: 1rem; /* Adjust horizontal spacing between columns */
	row-gap: 0rem; /* Adjust vertical spacing between rows */
	align-items: start;
	padding: 1rem;
}

.db_mat_toc > span:nth-child(2n-1) {
	text-align: right; /* Align numbers to the right for consistent alignment */
}

.db_mat_toc > span:nth-child(2n) {
	width: fit-content; /* Ensure the content in the second column has fit-content width */
}

.db_mat_spacer {
	margin-bottom: 1rem;
}


.wl {
    font-family: 'b';
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em;
    align-items: start;
    padding: 1rem;
}
.wl > span:nth-child(1) {
	color: silver;
    padding-right: 0.5rem; /* Optional: Add spacing to separate the border visually */
}
.wl > span:nth-child(2) {
    border-left: 2px solid silver; /* Add a left border */
    padding-left: 1rem; /* Optional: Add spacing to separate the border visually */
}





.custom-list-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em 1em; /* row-gap column-gap */
    align-items: start;
}
.custom-list-item > span:nth-of-type(odd) {
    color: silver;
    text-align: right; /* Align left content to the right if desired */
    white-space: nowrap; /* Prevent wrapping in the left column */
	font-family: 'b';
}





.tst {
	color: red !important;
}

.u {
	text-decoration: underline;
}

.c751_avoid_break {
	page-break-inside: avoid;
}

.c747_breakBefore {
	page-break-before: always;
}

.chapter_title {
	text-decoration: none !important;
	text-align: center;
	font-size: 2rem;
	font-family: 'f4';
	margin: 1rem;
}
.chapter_title a:link,.chapter_title a:visited,.chapter_title a:hover,.chapter_title a:active, .ex_title a:link,.ex_title a:visited,.ex_title a:hover,.ex_title a:active {
	text-decoration: none !important;
	color: var(--text-color);
}

.title_sub {
	text-align: center;
	margin-bottom: 2rem;
	font-family: 'r';
}

.parag_header {
	margin-top: 2rem;
	font-size: 1.5rem;
	font-family: 'b';
	page-break-after: avoid;
}

.c723_parag_header_sub {
	margin-top: 2rem;
	font-family: 'b';
	font-size: 1rem;
	font-family: 'b';
	page-break-after: avoid;
}

.css_chapter_cover_img {
	vertical-align: baseline;
	width: 80%;
}

#nugget_read {
	width: 95%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}

#nugget_image_container {
	box-shadow: 0px 5px 8px -3px var(--box-shadow-color);
}

#nugget_read_title {
	font-family: 'b';
	font-size: 2rem;
	text-align: left;
	width: 100%;
}

@media (prefers-color-scheme: dark) {
  :root {
	--dictionary_word_fg: #EE4266;
	--background-color: #333;
	--text-color: #D9D9D9;
	--border-color: #555;
	--box-shadow-color: rgba(255, 255, 255, 0.25);
	--g_border_color: #555;
	--db_summary_bg: #555;
	--db_summary_fg: #D9D9D9;
	--db_summary_hover_bg: #000;
	--db_footer_bg: #000;
	--db_link_fg: #00A8E0;

	--color_bg_data_context_relevant: #000;
	--color_border_data_context_relevant: #000;

	--color_bg_usage_label: #e5e5e5;
	--color_border_usage_label: transparent;
  }
	.ex_example, .ex_frame {
		border: 1px dashed #555;
		background-color: #222;
	}
	.code {
		background-color: #736559;
	}
}

@media (max-width: 768px) {
  .db_summary:hover {
    background-color: var(--db_summary_bg);
  }
  .db_summary { border-radius: 0px;}

	#nugget_read {
		padding: 10px;
	}
}