:root {
        --font: Geologica;
        --alt-font: Geologica;
        --accent-color: #151b43;
        --secondary-color: #3946a0;
        --link-color: #ffffff;
        --accent-highlight-color: #151b43;
        --accent-highlight-background-color: #e1e4f6;
        --accent-tinted-color-70: #b9bbc7;
        --accent-tinted-color-80: #d0d1d9;
        --accent-tinted-color-90: #e8e8ec;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #212b6a;
        --secondary-hover-color: #4d5bbf;
        --secondary-contrast-color: #fff;
        --link-hover-color: #cccccc;
      }
      
body { background: url('https://media.thoughtindustries.com/thoughtindustries/image/upload/v1/course-uploads/eeb2821f-539d-403f-b876-176bf31018f6/du6jp9h5xn2v-mario-galaxy-background.jpg'); background-attachment: fixed; background-size: cover; }
.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/eeb2821f-539d-403f-b876-176bf31018f6/ckhpxd4o6iwq-nintendo-edge-logo.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
/*********************************************************
***                   Full Mines CSS                   ***
*********************************************************/

/***** GLOBAL CHANGES *****/
/* Paragraph with no spacing */
p.mines-no-margin {
	margin-bottom: 0;
}

p.expanded {
line-height: 1.8;
}

/* Login Modal */
    .session__container {
		background: #00234b;
		color: white;
}

.session__forgot > .btn {
	color: white;
}

.session__form .mb-1 {
	color: white;
}

.session__form .field--show-floating-label > .btn {
	background: #044CC8;
}

/* Account Not Validated Page */
.session__container {
	padding: 2rem;
}

.session__container .verification-pending {
	text-align: center;
}

.session__container .verification-pending h2 {
	color: white;
	margin-top: 1.5rem;
}

/* Homepage Header */
.header--microsite, .header--dashboard {
	background: #00234b;
}

.top-bar {
	background: #00234b;
}

.top-bar-section .has-dropdown>a:after {
	border-top-color: white;
}

.top-bar-section ul li {
    background: none;
}

#cart-button {
	color: white;
}

.dashboard-header__name {
	font-size: 1rem;
	color: white;
}

.header--dashboard > .header__inner > .row {
	display: flex;
	align-items: center;
}

.dashboard-header__arrow > .icon {
	color: white;
}

/* Email Footer */
	.widget--one-column.widget--one-column_standard.mines.mines-email-footer {
		padding: 0 !important;
	}

	.home.catalog .widget--one-column.widget--one-column_standard.mines.mines-email-footer > .ember-view:first-of-type {
	margin: 0 calc(-2.5% - 2px);
}

.home.catalog .widget--one-column.widget--one-column_standard.mines.mines-email-footer {
	margin-bottom: -1rem;
}

.home.support .widget--one-column.widget--one-column_standard.mines.mines-email-footer > .ember-view > .row > .medium-12.columns {
	padding: 0;
}

.home.page .widget--one-column.widget--one-column_standard.mines.mines-email-footer > .ember-view > .row > .medium-12.columns {
	padding: 0;
}
	
	.widget--one-column.widget--one-column_standard.mines.mines-email-footer p {
		margin-bottom: 0;
	}
	
#mc_embed_signup {
	display: inline-block;
	background-color: #C5D0DC;
    padding: 2rem 10% !important;
	margin-top: 1.5rem;
}

#mc_embed_signup .mc-field-group {
    margin-bottom: 10px;
}

.mc-field-group > .row > .large-8 {
min-height: 50px;
}

#mc_embed_signup input[type="email"] {
	margin-bottom: 10px;
	min-height: 50px;
}

#mc_embed_shell * {
	max-width: initial !important;
}

#mc_embed_signup h2 {
	font-family: Helvetica-Bold;
    font-size: 35px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
}

#mc_embed_signup {
    width: 100%;
    max-width: 100%;
}

#mc_embed_signup a {
	color: #023769;
}

#mc_embed_signup p.promo {
font-family: Helvetica-Bold;
font-size: 20px;
font-weight: 700;
}

#mc_embed_signup .mc-field-group label {
    display: block;
    margin: 0 0 4px;
	color: #333333;
}

#mc_embed_signup p.disclaimer { 
font-family: Helvetica-Regular, sans-serif;
font-size: 13px;
font-weight: 400;
	font-style: normal;
}

@media (min-width: 1200px) {
    #mc_embed_signup {
        max-width: 100%;
    }
}

@media (min-width: 64em) {
.mc-field-group > .row > .large-8 {
	padding-right: 0;
	}
}


/* Audio Button */
.audio-player__play-arrow {
    border-bottom: 5px solid transparent !important;
    border-left: 10px solid;
    border-top: 5px solid transparent !important;
	border-color: white;
	margin-left: 2px;
}

.audio__player {
	margin-right: 1.5rem;
}

.btn.audio-player__play-button {
    background-color: #f15a2a;
    font-size: 1rem;
    height: 30px;
    width: 30px;
	margin-bottom: 0;
}

.audio-player__play, .audio-player__playing {
    font-size: 0.85rem;
	margin-top: .4em;
}

.audio-player__time-counter {
    font-size: .875rem;
	margin-top: 3px;
}

.audio-player__controls .presentation__controls__loader {
    background-color: #00234b;
}

/* Left and Right Padding */
.layout__content .widget {
    padding: 1rem 6rem !Important;
}

/* Video Embed */
iframe[src*="player.vimeo.com/video/"]{
  border: 1px solid #bdbdbd !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  border-radius: 8px;
  overflow: hidden; /* harmless here */
  background: #f7f7f7;
}

.videoWrapper {
	position: relative;
  	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	border: none;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#iframe {
    border: 5px solid #d8d8d8;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.20);
}

/* List Roll Formatting */
.list-roll__sidebar {
    width: 27%;
    margin-top: 1rem;
    }

.list-roll__content {
    width: 73%;
    }
	
.topic__list__title .h3 {
    color: #333333;
    font-weight: 300;
}

.topic__list__item--expanded .topic__list__title  .h3 {
color: #09396C;
}

.topic__list__info .btn--link {
font-weight: 300;
}

  .topic__container__list-roll  .topic__content.topic__content--pre-text-block {
        margin-bottom: -0.5rem;
    }

.topic__container__list-roll .icon-navigatedown {
    color: #F15a2a;
}

.topic__container__list-roll .icon-navigateup {
    color: #F15a2a;
}

.list-roll__container {
    margin: 0;
}

.list-roll__content.list-roll__content--full-width {
margin-bottom: -1.5rem;
}

.topic__list__item {
    border-color: #dedede;
    margin-bottom: 10px !important;
    padding: 0.75rem 0;
    border-left: solid 5px #F15a2a; 
}

.topic__list__item.topic__list__item--expanded {
    border-left-color: #F15a2a;
}

/* Slideshow Formatting */
.category-slideshow {
  position: relative;
}

.category-slideshow .mySlides {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.category-slideshow .mySlides.dimoveactive {
  opacity: 1;
  transform: translateY(0);
}

.category-slideshow .slideshownav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1rem;
}

.category-slideshow .slideshow-button {
  background-color: #81848A;
  border: 1px solid #81848A;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.45rem 0.75rem;
}

.category-slideshow .slideshow-button:hover,
.category-slideshow .slideshow-button:focus {
  background-color: #6f7278;
  border-color: #6f7278;
}

.category-slideshow .mySlides-selector {
  width: 12px;
  height: 12px;
  border: 1px solid #81848A;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  display: inline-block;
  padding: 0;
}

.category-slideshow .mySlides-selector.selected {
  background-color: #81848A;
}

.category-slideshow img {
  max-width: 100%;
  height: auto;
}

/* Footer */
.footer {
	padding: 2rem;
	background-color: #00234B;
}

.footer__inner {
	border-top: none;
	color: white;
}

.footer__company__info {
	color: white;
}

.footer__inner a {
	color: white;
	text-decoration: none !important;
}
/* Bullets */
.editor-content ol, .editor-content ul {
	padding-left: 1rem;
}

.editor-content ul {
	list-style: square;
}

.editor-content li::marker {
	color: #f15a2a;
}

/* NAVIGATION */
/* Disable our Courses Link for Drop Down Priority */
.top-bar-section > .left > .has-dropdown > a {
	pointer-events: auto;
	cursor: default;
}

/* Hide School name and divider */
.company__school-name {
	display: none;
}

.company__school-name__divider {
	display: none;
}
@media only screen and (min-width: 90.063em) {
/* Formatting and placement of navigation */
.top-bar {
	border-top: none;
}

.top-bar-section ul li>a {
	color: black;
}

.header--microsite, .header--dashboard { 
	position: relative; 
	top: 0; 
	left: 0; 
	width: 100%; 
	padding: 0 2%; 
	z-index: 2; 
	}
.header--microsite .company__beta-logo { 
	position: absolute; 
	top: 1.25rem; 
	left: 4%; 
	}
	
.header .company__beta-logo {
	max-width: 250px;
	}

	.header .company__beta-logo .company-logo__container img {
		padding-top: 4px;
		padding-bottom: 10px;
	}

.header--microsite .top-bar { 
	border: 0; 
	display: inline-block; 
	width: calc(100% - 160px - 450px);
	margin-left: 300px; 
	background: none; 
	padding: 0px 0; 
	margin-top: 1.75rem;
	margin-bottom: 1rem;
	}

.nav--top {
	margin-top: 12px;
	}

.header--microsite .top-bar .top-bar-section {  
	display: block; 
	text-align: center; 
	width: 100%; }

.header--microsite .top-bar .top-bar-section ul { 
	display: block; 
	width: 100%; 
	text-align: left;
	margin-left: 2rem; 
	}

.header--microsite .top-bar .top-bar-section::after { 
	content: ''; 
	display: block; 
	clear: both; }

.header--microsite .top-bar .top-bar-section li { 
	display: inline-block; 
	float: none; 
	padding: 0; 
	background: none; 
	}
}

@media only screen and (max-width: 90em) {
	.top-bar {
		border-top: none;
	}
}

.header--microsite .top-bar .top-bar-section li:not(.has-form) a:not(.button) {
color: white; 
background: none;
}

.header--microsite .top-bar .top-bar-section .dropdown > li:not(.has-form) a:not(.button) {
    color: black;
}

/* Dropdown */
.top-bar-section .has-dropdown > .dropdown {
	background-color: rgba(236, 236, 236, 0.95);
	border-top: solid 3px #f15a2a;
	margin-left: 1rem !important;
	padding-right: 0.5rem;
	padding-bottom: 0.5rem;
}

.top-bar-section .has-dropdown > .dropdown > .back {
	display: none;
}

/* Making navigation sticky */
.header--microsite, .header--dashboard {
	position: sticky;
	top: 0;
	z-index: 99;
}

/* Formatting for Login Modal */
.session__form-sso-dark {
	background-color: #94caf8;
	display: block;
	padding: 1rem 2rem;
	width: 100%;
	border-radius: 5px;
	margin-bottom: 2.5rem;
	color: black;
	font-size: 1.1rem;
}

.session__form h2 {
	margin-top: 2rem;
}

/* Formatting for Login Button */
.header > .header__inner > .nav--top > ul li:first-child {
	background: white;
	border-radius: 8px;
	padding: 0.5rem 2rem;
	border: solid 1.5px #f15a2a;
}

.header > .header__inner > .nav--top > ul li:first-child a {
	color: #00234b;
}

.header > .header__inner > .nav--top > ul li a {
	padding: 0;
}

.header > .header__inner > .nav--top > ul button {
	padding-top: 0.5rem;
}

.header > .header__inner > .nav--top {
	margin-top: 2rem;
}

/***** Formatting for Create Password Page *****/
.session__form h2 {
	color: white;
}

.terms__checkbox__wrapper > .row > .small-11 p {
	color: white;
}

.terms__checkbox__wrapper > .row > .small-11 p > a {
	color: #94caf8;
}

.session__form > p > a {
	color: #94caf8;
}

/***** HOMEPAGE WIDGETS *****/
/* STATIC HERO */
.mines.static-hero {
	margin-top: 2.5rem;
}

.mines.static-hero h1 {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.mines.static-hero p {
	font-size: 1.1rem;
	line-height: 1.7;
	margin-bottom: 1rem;
}

.mines.static-hero button.mines-btn--dark-blue {
	min-width: 20%;
	font-size: 1rem;
	margin-top: 1.5rem;
}

.mines.static-hero img {
	float: right;
	width: 50%;
	max-width: 500px;
	margin-left: 1.5rem;
	margin-bottom: 1rem;
}

/* HERO IMAGE */
/* Force image to go all the way across */
.mines.widget--hero-image_standard {
	padding: 0 !important;
}

/* Bottom Spacing */
.mines.widget--hero-image_standard > .hero {
	margin-bottom: 0;
}

/* SLIDESHOW */
.mines.category-slideshow.widget--one-column_standard {
	padding-top: 0 !important;
	margin-top: 1rem;
}

.mines.category-slideshow.widget--one-column_standard img {
	animation: heroslide 1s linear;
	animation-fill-mode: forwards;
}

.mines.category-slideshow.widget--one-column_standard h1 {
	font-size: 3rem;
}

.mines.category-slideshow.widget--one-column_standard p {
	line-height: 1.75;
	margin-bottom: 3rem;
	padding-right: 1rem;
}

.disclaimer {
	font-weight: 200;
	font-size: 0.85rem;
	font-style: italic;
	margin-bottom: 0 !important;
}

.mines.category-slideshow.widget--one-column_standard .btn--primary {
	background-color: #00234B;
	border-color: #00234B;
	border-radius: 8px;
	padding: 0.75rem 3rem;
	margin-bottom: 3rem;
}

.mines.category-slideshow.widget--one-column_standard .w3-display-container > button {
	background-color: #75757D;
    border: 1px solid #75757D;
    border-radius: 3px;
    color: white;
	font-size: 1rem;
	padding: 0.45rem 0.75rem;	
}

.mines.category-slideshow.widget--one-column_standard .w3-display-container > .w3-display-left {
	margin-right: 20px;
}

.mines.category-slideshow.widget--one-column_standard .w3-display-container > .w3-display-right {
	margin-left: 20px;
}

/* Hides Slideshow Images on Mobile */
@media (max-width: 768px) {
  .w3-display-container .mySlides img {
    display: none !important;
  }
}

/* Slideshow Functionality */
.mySlides-selector {
        background: white;
		border-radius: 100px;
		border: solid 2px #81848A;
		display: inline-block;
		width: 20px;
		height: 20px;
		margin: -5px 0.15em;
  }

  .mySlides-selector:hover {
    color:#75757D;
    cursor: pointer;
  }

  .mySlides-selector.selected {
    background: #75757D;
	transition: 0.5s ease-in-out;
  }

  .mySlides-selector.selected:hover {
    color: initial;
    border-bottom: none;
    cursor: default;
  }

  .mySlides h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}

.slideshownav {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}



/* CUSTOM TITLES */
/* Change size color and formatting of title */
.mines.custom-heading.widget--title_standard .widget__title {
	color: black;
	text-align: left;
	font-size: 1.75rem;
	font-weight: 600;
	margin-bottom: 2.25rem;
	letter-spacing: 1.22px;
}

/* Add underline */
.mines.custom-heading.widget--title_standard > h1::after {
	position: absolute;
	display: block;
    content: "";
    height: 4px;
    background-color: #F15A2A;
    width: 11%;
    margin-left: 0;
    margin-top: 0.75rem;
}

/* Change size color and formatting of subtitle */
.mines.custom-heading.widget--title_standard .widget__subtitle {
	text-align: left;
	color: #333333;
}

/* CUSTOM TITLES WITH BUTTON */
/* Change size color and formatting of title */
.mines.custom-heading-button.widget--title_standard .widget__title {
	color: black;
	text-align: left;
	font-size: 1.75rem;
	font-weight: 600;
	margin-bottom: 2.25rem;
	letter-spacing: 1.22px;
	width: 75%;
}

/* Add underline */
.mines.custom-heading-button.widget--title_standard > h1::after {
	position: absolute;
	display: block;
    content: "";
    height: 4px;
    background-color: #F15A2A;
    width: 11%;
    margin-left: 0;
    margin-top: 0.75rem;
}

/* Change size color and formatting of subtitle */
.mines.custom-heading-button.widget--title_standard .widget__subtitle {
	text-align: left;
	color: #333333;
	width: 75%;
}


/* WHY MINES AND OUR MODALITIES WIDGET */
/* Adding Spacing */
.mines.why--modal.widget--two-column {
	margin-bottom: 2rem;

}

/* Titles */
.mines.why--modal.widget--two-column h2 {
	color: black;
	font-size: 1.75rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	letter-spacing: 1.22px;
}

/* Underline of Titles */
.mines.why--modal.widget--two-column hr {
	border: solid 2px #f15a2a;
	width: 22%;
	margin-bottom: 1.5rem;
}

/* Making First Column 50% wide */
.mines.why--modal.widget--two-column > .ember-view > .row >.medium-6:first-of-type {
	width: 50%;
	padding-right: 2rem;
}

/* Making First Column 50% wide */
.mines.why--modal.widget--two-column > .ember-view > .row >.medium-6:last-of-type {
	width: 50%;
}

/* Modalities Boxes */
.modalities {
	background-color: #f2f2f2;
	border-radius: 5px;
	padding: 1.1rem 1.1rem;
	margin-bottom: 10px;
}

.mines.why--modal .modalities > .row > .large-3 img {
	margin-top: 5px;
}

.modalities:hover img {
	transition: .75s;
	transition-timing-function: cubic-bezier(0,0,.2,1);
	scale: 1.05;
}

.modalities:last-of-type {
	margin-bottom: 0;
}

.modalities h3 {
	margin-bottom: 0.5em;
}

.modalities p {
	font-size: 0.95rem;
	margin-bottom: 0;
}

/* FEATURED CONTENT WIDGET - STANDARD LAYOUT */
/* Hide Default Title */
.mines.widget--featured-content > .row > .columns > .ember-view .widget__alt-title__container--with-cta > h3 {
	display: none;
}

/* Hide Horizontal Line */
.mines.widget--featured-content > .row > .columns > .ember-view .hr__accent {
	display: none;
}

/* Formatting of CTA Button */
.mines.widget--featured-content .widget__title-cta {
	margin-top: -4.5rem;
	color: white;
	background-color: #00234B;
	border: 1px solid #00234B;
	border-radius: 8px;
	padding: 0.5rem 3.5rem;
}

/* Move Button Up */
.mines.widget--featured-content {
	padding-top: 0.5rem;
}

/* Formatting Course Tiles */
.mines.widget--featured-content p.catalog-grid-item__title {
	color: #00234B;
	font-size: 1.1rem;
}

/* Making Background Gray */
.mines.widget--featured-content .catalog-grid-item {
	border: 1px solid #F7F7F7;
    background-color: #F7F7F7;
	cursor: pointer;
}

.catalog-grid-item__cta-container {
	height: fit-content !important;
}


.catalog-grid-item__cta-container > .grid-cols-3 > .col-span-2 > .grid-rows-3 {
    grid-template-rows: auto;
}

.catalog-grid-item__asset-container {
	overflow: hidden;
}

.mines.widget--featured-content .catalog-grid-item__asset-container img:hover {
	transition: 1.5s;
	transition-timing-function: cubic-bezier(0,0,.2,1);
	scale: 1.1;
}

.mines.widget--featured-content .catalog-grid-item__cta-container .grid-rows-3 {
	grid-template-rows: none;
}

/* Adding Padding above and below horizontal line */
.mines.widget--featured-content .catalog-grid-item__hr {
	margin-bottom: 1.25rem;
	margin-top: 1.25rem;
}

/* Adding Padding above CTA */
.mines.widget--featured-content .catalog-grid-item__cta-container {
	margin-bottom: 0.5rem;
}

/* Adding Padding overall to left and right */
.mines.widget--featured-content .catalog-grid-item__body {
    padding: .75em 1em;
}

/* Add Spacing Below */
.mines.widget--featured-content {
	margin-bottom: 1rem;
}

/* Change Color for Text in Tile */
.catalog-grid-item__description {
    color: #505050;
}

.featured-content-item__authors {
	color: #505050;
}

.catalog-grid-item__source {
	color: #505050;
}

/* Disable Link */
.mines.widget--featured-content .catalog-item {
	/* pointer-events: none; */
	cursor: default;
}

/* OUR SKILLED INSTRUCTORS WIDGET */
/* Removing Background */
.mines.featured-instructors.widget--featured-content_multi-carousel .featured-content-multi-carousel-item {
	background: white;
}

.mines.featured-instructors.widget--featured-content_multi-carousel .featured-content-multi-carousel-item img:hover {
	scale: 1.02;
	transition: 0.75s;
	transition-timing-function: cubic-bezier(0,0,.2,1);
}

/* Formatting Name */
.mines.featured-instructors.widget--featured-content_multi-carousel .featured-content-multi-carousel-item__body {
    padding: .75em .75em;
    text-align: left;
}

/* Formatting Title */
.mines.featured-instructors.widget--featured-content_multi-carousel .featured-content-multi-carousel-item__description {
	padding: 10px 0;
	font-weight: 200;
	font-size: 0.8rem;
}

/* Adding Line Under Name */
.mines.featured-instructors.widget--featured-content_multi-carousel .featured-content-multi-carousel-item__body > h4::after {
    position: absolute;
	display: block;
    content: "";
    height: 2px;
    background-color: #1269FA;
    width: 2%;
    margin-left: 0;
    margin-top: 5px;
}

/* Overrride padding of overall widget */
.mines.featured-instructors.widget--featured-content_multi-carousel {
	padding-top: 0 !important;
	margin-bottom: 0.5rem;
}

.mines.featured-instructors.widget--featured-content_multi-carousel .featured-content-multi-carousel-item img {
	padding: 0;
	border: solid 2px #00234B;
	border-radius: 200px;
}

.mines.featured-instructors.widget--featured-content_multi-carousel .catalog-grid-item__asset-container {
    padding: .75em .75em 0;
}


/* WHAT MAKES MINES PROED DIFFERENT WIDGET */
/* Background color and padding */
.mines.whyproed.widget--four-column_standard {
	background-color: #00234B;
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
	margin-bottom: 3rem;
}

/* Override image size */
.mines.whyproed.widget--four-column_standard img{
	max-width: 25%;
}

/* Title Headings */
.mines.whyproed.widget--four-column_standard h3 {
	color: white;
	font-weight: 800;
	font-size: 1.5rem;
	padding-top: 30%;
	padding-bottom: 30%;
}

/* Reason Headings */
.mines.whyproed.widget--four-column_standard h4 {
	color: white;
	font-weight: 800;
	font-size: 1.1rem;
}

/* Body Text Formatting */
.mines.whyproed.widget--four-column_standard p {
	color: white;
	font-weight: 200;
	font-size: 0.85rem;
	line-height: 1.65;
}

/* Heading Column Formatting */
.mines.whyproed.widget--four-column_standard .row > .columns:first-of-type {
	width: 24%;
	padding-right: 4rem;
	margin-right: 4%;
	border-right: solid 1px #AEB3B8;
}

/* Body Column Formatting */
.mines.whyproed.widget--four-column_standard .row > .columns {
	width: 24%;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
}

/* TESTIMONIAL WIDGET */
/* Widget Spacing */
.mines.custom-testimonial.widget--one-column_standard {
	margin-top: -1.5rem;
	margin-bottom: 2.5rem;
}

/* Quote Formatting */
.mines.custom-testimonial.widget--one-column_standard p {
	font-size: 1.3rem;
	line-height: 1.75;
	color: black;
}

/* Name Formatting */
.mines.custom-testimonial.widget--one-column_standard p.name {
	font-size: 1rem;
	color: black;
	text-align: right;
	margin-bottom: 0;
}

/* Title Formatting */
.mines.custom-testimonial.widget--one-column_standard p.title {
	font-size: 1rem;
	color: black;
	text-align: right;
	font-weight: 200;
}

/* FREQUENTLY ASKED QUESTIONS WIDGET */
.accordion {
	font-size: 1rem;
	width: 100%;
	margin: 0 auto;
	border-radius: 5px;
	margin-top: -10px;
}

.accordion-header,
.accordion-body {
  background: #f2f2f2;
}

.accordion-header {
  padding: 1.5em 1.5em;
  background: #F2F2F2;
  color: black;
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: .1em;
  transition: all .3s;
  font-weight:600;
  margin-top: 10px;
  border-radius: 5px;
}


.accordion-header:hover {
  background: #d9d9d9;
  position: relative;
  z-index: 5;
}

.accordion-body {
  background: #F2F2F2;
  color: black;
  display: none;
	border-radius: 0 0 5px 5px;
}

.accordion-body__contents {
  padding: 0em 2em 1.5em 4em;
  font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

.accordion__item.active .accordion-header {
  border-radius: 5px 5px 0 0 !important;
}

.accordion__item.js-accordion-item.active {
    padding-bottom: 0;
}

.accordion__item.js-accordion-item {
    padding-bottom: 0;
}


.accordion__item > .accordion-header:before {
  content: url(https://d36ai2hkxl16us.cloudfront.net/course-uploads/33ad1c28-1334-4e16-9666-068721a08190/6f68d2phvrwr-SmallCarot.png);
  float: left;
  position: relative;
  transition: .3s all;
  transform: rotate(0deg);
  margin-right: 15px;
  color: #1269FA;
  font-weight: 900;
}

.accordion__item.active > .accordion-header:before {
  transform: rotate(90deg);
}

.accordion__item.active .accordion-header {
  background: #f2f2f2;
}

.accordion__item .accordion__item .accordion-header {
  background: #f2f2f2;
  color: black;
}


/******** ANIMATIONS ********/
.mySlides {
  display: none;
}

.mySlides.dimove {
  opacity: 0;
  transform: translateY(20px);
}

.mySlides.dimoveactive {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.mySlides-selector.selected {
  /* Adjust this styling as needed */
  opacity: 1;
}


/***** RESPONSIVENESS *****/
@media only screen and (max-width: 64.063em) {
	.mines.widget--featured-content .widget__title-cta {
		max-width: 100%;
		margin: -4.5rem 0 0 4rem;
		width: 90%;
	}
	
	.mines.custom-heading-button.widget--title_standard .widget__subtitle {
		width: 100%;
		margin-bottom: 4.5rem;
	}
}

@media only screen and (max-width: 64.063em) {
		.mines.category-slideshow.widget--one-column_standard h1 {
		width: 100%;
		padding-top: 0;
	}

		.mines.category-slideshow.widget--one-column_standard .slideshownav {
		display: inline;
	}
	
	.mines.category-slideshow.widget--one-column_standard p {
		width: 100%;
		margin-bottom: 2rem;
	}
	
	.mines.category-slideshow.widget--one-column_standard .btn--primary {
		margin-bottom: 0.5rem;
	}
	
	.mines.why--modal.widget--two-column > .ember-view > .row >.medium-6:first-of-type {
		width: 100%;
	}
	
	.mines.why--modal.widget--two-column > .ember-view > .row >.medium-6:last-of-type {
		width: 100%;
		margin-top: 2rem;
	}
	
	.mines.whyproed.widget--four-column_standard .row > .columns:first-of-type {
		width: 100%;
		border-right: none;
		margin-right: 0;
		padding: 0 1rem;
	}
	
	.mines.why--modal.widget--two-column_standard .modalities > .row > .large-3 {
		width: 15%;
	}
	
	.mines.why--modal.widget--two-column_standard .modalities > .row > .large-9 {
		width: 85%;
		padding-top: 1rem;
		padding-left: 0;
	}
	
	.mines.whyproed.widget--four-column_standard h3 {
		padding-top: 0;
		padding-bottom: 1rem;
	}
	
	.mines.whyproed.widget--four-column_standard .row > .columns {
		width: 100%;
		padding: 0 1.5rem 0.5rem 1.5rem;
		text-align: center;
	}
	
	    .mines.whyproed.widget--four-column_standard img {
			max-width: 25%;
	}
	
	.layout__content .widget {
    padding: 1rem 4rem !important;
}
	
	.mines.minesfaq.widget--one-column_standard .large-4 {
		display: none;
	}
	
	.mines.minesfaq.widget--one-column_standard .large-8 {
		width: 100%;
	}
	
	.mines.minesfaq.widget--one-column_standard {
		margin-bottom: 2rem;
	}
	
	.mines.widget--hero-image_standard {
    padding: 0 !important;
	}
}

@media only screen and (max-width: 40.063em) {	
	.layout__content .widget {
    padding: 0.5rem 4rem 1rem !important;
}
	
	.header > .header__inner > .nav--top {
    margin-top: 0.5rem;
}
	
	.mines.why--modal.widget--two-column_standard .modalities > .row > .large-3 {
		width: 20%;
	}
	
	.mines.why--modal.widget--two-column_standard .modalities > .row > .large-9 {
		width: 80%;
		padding-left: 1rem;
		padding-top: 0;
	}
	
	.mines.whyproed.widget--four-column_standard img {
    max-width: 25%;
}
	
	.header__inner {
		padding: 1rem 0.5rem;
	}
	
	.top-bar .toggle-topbar.menu-icon {
margin-top: -10px;
	}
	
	.top-bar .toggle-topbar button {
	color: black;
	}
	
	.top-bar .toggle-topbar.menu-icon button span:after {
    box-shadow: 0 0 0 1px black, 0 7px 0 1px black, 0 14px 0 1px black;
		right: 0.75rem;
	}
	
	.top-bar {
    border-bottom: none;
	}
	
	.mines.widget--hero-image_standard .hero img {
		scale: 1.3;
	}
	
	.mines.widget--hero-image_standard {
    padding: 0!important;
	}

	.mines.category-slideshow .large-5 {
		display: none;
	}
}

@media only screen and (max-width: 40.063em) and (orientation: landscape) {
	.header--microsite {
    position: relative;
	}
	
	.mines.category-slideshow.widget--one-column_standard .large-5.columns {
		display: none;
	}
	
	    .mines.whyproed.widget--four-column_standard img {
        max-width: 10%;
	}
	
	.catalog-grid-item__asset-container {
		width: 50%;
		margin: 0 auto;
	}
}

@media only screen and (max-width: 24em) {
	.layout__content .widget {
    padding: 1rem 2rem !important;
}
	
	.top-bar .button, .top-bar button {
    top: 1.5rem;
    float: left;
		margin-left: -3rem;
	}
	
	.mines.why--modal.widget--two-column_standard .modalities > .row > .large-3 {
		display: none;
	}
	
	.mines.why--modal.widget--two-column_standard .modalities > .row > .large-9 {
		width: 100%;
		padding-left: 1rem;
	}
	
	.mines.whyproed.widget--four-column_standard .row > .columns {
    width: 100%;
}
	
	.mines.whyproed.widget--four-column_standard img {
		display: none;
	}
	
	.mines.widget--featured-content .widget__title-cta {
		margin-top: 0;
		position: inherit;
		display: block;
		max-width: fit-content;
		margin-bottom: 1.5rem;
	}
	
	.mines.custom-heading-button.widget--title_standard .widget__title {
		width: 100%;
	}
	
	.mines.custom-heading-button.widget--title_standard .widget__subtitle {
		width: 100%;
		margin-bottom: 0;
	}
	
	.header > .header__inner > .nav--top {
		margin-top: 1rem;
		float: left;
		padding-bottom: 0;
		margin-left: 1rem;
	}
	
	.top-bar .toggle-topbar.menu-icon {
    margin-top: -16px;
    top: 0;
    float: right;
    margin-right: -3rem;
}
	
	.mines.widget--hero-image_standard > .hero img {
		scale: 1.3;
	}
	
	.mines.widget--hero-image_standard {
    padding: 0!important;
}
	
	.mines.featured-instructors.widget--featured-content_multi-carousel {
		margin-bottom: 0;
	}
	
}

@media only screen and (max-width: 24em) and (orientation: landscape) {
	.mines.custom-heading-button.widget--title_standard .widget__subtitle {
		margin-bottom: 4.5rem;
	}
}

/* Turn hamburger menu white for mobile */
@media only screen and (max-width: 40.063em) {
    .top-bar .toggle-topbar button {
        color: white;
    }
}

@media only screen and (max-width: 40.063em) {
    .top-bar .toggle-topbar.menu-icon button span:after {
        box-shadow: 0 0 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
        right: 0.75rem;
    }
	
	.top-bar.expanded .title-area {
    background: transparent;
}
	
	.top-bar.expanded .toggle-topbar.menu-icon button {
    color: white;
}
	
	.top-bar.expanded .toggle-topbar.menu-icon button span:after {
    -webkit-box-shadow: 0 0 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
    box-shadow: 0 0 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
	}
}


/***** COURSE TILES *****/
.mines.widget--featured-content_standard .catalog-grid-item__asset-container {
	display: none;
}

.mines.widget--featured-content_standard .catalog-grid-item__body {
    padding: 2.5em 2em 2em 2em;
    background-color: #f7f7f7;
	border: solid 1px #f7f7f7;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #ececec;
}

.mines.widget--featured-content_standard .catalog-grid-item {
	border: none;
}

.mines.widget--featured-content .catalog-grid-item {
	background-color: transparent;
}

.mines.widget--featured-content_standard .catalog-grid-item__title {
	font-size: 1.1rem;
	margin-bottom: 0.75em;
}

.mines.widget--featured-content_standard .featured-content-item__authors {
font-weight: 200;
	font-size: 0.9rem;
}

.mines.widget--featured-content_standard .catalog-grid-item__source {
	font-weight: 200;
	font-size: 0.9rem;
}

.mines.widget--featured-content_standard .catalog-grid-item__source strong {
	font-weight: 200;
}

.mines.widget--featured-content_standard .catalog-grid-item__hr {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

.catalog__ribbon {
	padding: .75em 3em;
	letter-spacing: 1px;
	max-width: fit-content;
	border-radius: 4px 4px 0 4px;
}


/***** CATALOG PAGE *****/
.mines.widget--catalog_standard .catalog-grid-item__asset-container {
/*	display: none;*/
	border-radius: 10px 10px 0 0;
}

.mines.widget--catalog_standard .catalog-grid-item__body {
    padding: 1em;
}

.mines.widget--catalog_standard .catalog-grid-item {
/*	border: none;*/
	border-radius: 10px;
	box-shadow: 5px 5px 5px #ececec;
	border: solid 1px #ececec;
}

.mines.widget--featured-content .catalog-grid-item {
	background-color: transparent;
}

.mines.widget--catalog_standard .catalog-grid-item__title {
	font-size: 1.1rem;
	margin-bottom: 0.75em;
}

.mines.widget--catalog_standard .featured-content-item__authors {
font-weight: 200;
	font-size: 0.9rem;
}

.mines.widget--catalog_standard .catalog-grid-item__source {
	font-weight: 200;
	font-size: 0.9rem;
}

.mines.widget--catalog_standard .catalog-grid-item__source strong {
	font-weight: 200;
}

.mines.widget--catalog_standard .catalog-grid-item__hr {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}


/* Hide Default Browse Heading */
.catalog-header {
	visibility: hidden;
	height: 10px;
}

/* Border Radius for Search Bar*/
.catalog-filters {
		border-radius: 10px;
}

.catalog-search-bar .columns {
	border-radius: 10px;
}

.bg-white {
	border-radius: 10px;
}

/* Category Heading Size and Color */
.catalog-aggregation__header--label {
	font-size: 1.2rem;
	color: #4d4f53;
}

.catalog-aggregation__header--label:active, .catalog-aggregation__header--label:hover {
    color: #4d4f53;
}

/* Spacing and Formatting for Categories */
.btn.catalog-aggregation__value {
	padding-left: 1.5rem;
	color: #21314d;
	font-size: 1rem;
}

.catalog-aggregation__count {
	color: #21314d;
	font-size: 1rem;
	font-weight: 200;
}

/* General Design for Category Sidebar */
.catalog-aggregation {
    border-bottom: 1px solid #cbcbcb;
	border-top: none;
	border-bottom-style: dashed;
}

.catalog-aggregation--expanded {
    background-color: white;
	margin-bottom: 0.5em;
	border-bottom-style: dashed;
}

.catalog-aggregation__expander i {
    color: #4d4f53;
    font-weight: 900;
}

@charset "UTF-8";
/* CSS Document */

/* Banner Formatting Update 4-15-26 */
.widget--hero-image.mines.catalog-hero .hero {
	display: flex;
	align-items: center;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}

.widget--hero-image.mines.catalog-hero .hero__caption {
	background: transparent;
	width: 60%;
	flex: 0 0 60%;
	position: absolute;
	left: 2rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.widget--hero-image.mines.catalog-hero img {
	display: block;
	width: 100%;
	height: auto;
}

.widget--hero-image.mines.catalog-hero .hero__title {
	color: #ffffff;
	font-size: 3.1rem;
	font-weight: 400;
	line-height: 1.1;
	margin: 0;
	max-width: none;
}

/* Optional overlay for desktop readability */
.widget--hero-image.mines.catalog-hero .hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 35, 75, 0.35);
	z-index: 1;
	pointer-events: none;
}

/* Mobile */
@media only screen and (max-width: 40.063em) {
	.widget--hero-image.mines.catalog-hero img {
		display: none;
	}

	.widget--hero-image.mines.catalog-hero .hero {
		display: block;
		background: #00234b;
		padding: 1rem 1.25rem;
		min-height: auto;
	}

	.widget--hero-image.mines.catalog-hero .hero::before {
		display: none;
	}

	.widget--hero-image.mines.catalog-hero .hero__caption {
		width: 100%;
		flex: none;
		position: static;
		left: auto;
		top: auto;
		transform: none;
		padding: 0;
	}

	.widget--hero-image.mines.catalog-hero .hero__title {
		font-size: 3rem;
		line-height: 1.02;
		letter-spacing: -0.02em;
		width: 100%;
		max-width: none;
	}
}

/* Tablet */
@media only screen and (min-width: 40.064em) and (max-width: 64.063em) {
	.widget--hero-image.mines.catalog-hero img {
		display: none;
	}

	.widget--hero-image.mines.catalog-hero .hero {
		background: #00234b;
		display: flex;
		align-items: center;
		padding: 1.25rem 1.5rem;
		min-height: 140px;
	}

	.widget--hero-image.mines.catalog-hero .hero::before {
		display: none;
	}

	.widget--hero-image.mines.catalog-hero .hero__caption {
		width: 100%;
		flex: none;
		position: static;
		left: auto;
		top: auto;
		transform: none;
		padding: 0;
		display: flex;
		align-items: center;
	}

	.widget--hero-image.mines.catalog-hero .hero__title {
		font-size: 3.1rem;
		line-height: 1.05;
		letter-spacing: -0.02em;
		width: 100%;
		max-width: none;
	}
}

/* Desktop and larger: FIXED height, NO cutoff */
@media only screen and (min-width: 64.064em) {
	.widget--hero-image.mines.catalog-hero .hero {
		height: 160px;
		align-items: stretch;
	}

	.widget--hero-image.mines.catalog-hero img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.widget--hero-image.mines.catalog-hero .hero__caption {
		width: 72%;
		flex: 0 0 72%;
		position: absolute;
		left: 2rem;
		top: 35%;
		transform: translateY(-50%);
		display: block;
		text-align: left;
		z-index: 2;
	}

	.widget--hero-image.mines.catalog-hero .hero__title {
		font-size: 3.25rem;
		line-height: 0.98;
		max-width: none;
		word-break: normal;
		overflow-wrap: break-word;
	}
}

.hero {
	border-radius: 10px;
}

/* COURSE DETAIL PAGE */
/* Social Sharing Widget */
.course__detail__social p {
	font-size: .875rem;
	text-transform: none;
	font-weight: 400;
	margin-bottom: 0;
	margin-top: 2px;
}

/* Recommended Courses Widget */
.course__related__list img {
	display: none;
}

.course__related__title {
    background: #09396C;
    color: white;
    font-size: 1.1rem;
    font-weight: 400;
    text-transform: none;
    text-align: center;
    border-radius: 10px 10px 0 0;
}

.course__detail__sidebar .panel {
    border: none;
	border-bottom: solid 3px #09396c;
}

.course__related__list p {
	text-align: center;
	font-size: 0.95rem;
}

/* Width of Sidebar */
.course__detail__sidebar .layout__content .widget {
	padding: 1rem 2rem !important;
}

/* Image border radius and width */
.course__detail__asset img {
    max-width: 100%;
    border-radius: 10px;
    width: 100%;
}

/* Tabs Formatting */
.tabs {
        border-bottom: 2px solid #F15A2A;
		margin-bottom: 0.75rem !important;
    }

.tabs .tab-title {
	margin-right: 1.5px;
}

.tabs .tab-title>a {
	background-color: #f7f7f7;
	border-radius: 10px 10px 0 0;
	border: solid 1px #dedede;
	border-bottom: none;
}

.tabs .tab-title>a {
    color: black;
}

.course__instructor {
	margin-top: 0.75rem;
}

.course__instructor img {
	border: solid 2px #00234b;
	border-radius: 100px;
}

.course__instructor h4 {
	margin-bottom: 0;
}

/* Start Course Button */
.widget--course-purchase_standard .btn--alt.btn--primary {
	background-color: #cc4628;
		border-color: #cc4628;
		color: white;
		border-radius: 10px;
	font-size: 1rem;
}

/* Tabs Content Formatting */
.tabs-content {
	padding-top: 0;
}

.tabs-content>.content {
	padding: 0 1rem 0 0.5rem;
}

/* Course Purchase Button */
.widget--course-purchase_standard .enroll__buy > .btn.btn--disabled {
	background-color: #F15A2A;
	border-color: #F15A2A;
	color: white;
	font-size: 0.85rem;
	text-transform: uppercase;
	padding: 0.75rem 2rem;
	letter-spacing: 0.5px;
	border-radius: 10px;
}

/* Pathway Purchase Button */
.widget--learning-path-purchase_standard .enroll__buy > .btn.btn--primary {
	background-color: #F15A2A;
	border-color: #F15A2A;
	color: white;
	font-size: 0.85rem;
	text-transform: uppercase;
	padding: 0.75rem 2rem;
	letter-spacing: 0.5px;
	border-radius: 10px;
}

.enroll__buy .btn {
	margin-top: -10px;
}

.widget--course-purchase > .ember-view > .panel {
	background: #f7f7f7;
}

/* Pathway Remove Start Date from Panel */
.enroll--learning-path .course__detail__runs {
	display:none;
}

/* SOCIAL WIDGET */
.share__container {
    justify-content: center;
	margin: 0;
}

.course__detail__social {
	border-radius: 10px;
}

.course__detail__social p {
	color: #656565;
	font-size: 1rem;
}

.btn--linkedin i {
    font-size: 1.75rem !important;
    color: #1269fa;
}

/* COURSE DETAIL PAGE */
/* Image border radius and width */
.course__detail__asset img {
    max-width: 100%;
    border-radius: 10px;
    width: 100%;
}

/* Tabs Formatting */
.tabs {
        border-bottom: 2px solid #F15A2A;
    }

.tabs .tab-title {
	margin-right: 1.5px;
}

.tabs .tab-title>a {
	background-color: #f7f7f7;
	border-radius: 10px 10px 0 0;
	border: solid 1px #dedede;
	border-bottom: none;
}

.tabs .tab-title>a {
    color: black;
}

/* Gifting Button */
.widget--course-purchase_standard .btn--alt.btn--secondary {
	background-color: #ffffff;
		border-color: #09396C;
		color: #09396C;
		border-radius: 10px;
	font-size: 0.85rem;
}

.enroll__buy .btn {
	margin-top: -10px;
}

.widget--course-purchase > .ember-view > .panel {
	background: #f7f7f7;
}

/* Tabs Content Formatting */
.tabs-content {
	padding-top: 0;
}

.tabs-content>.content {
	padding: 0 1rem 0 0.5rem;
}

/***** ARTICLE GENERAL DESIGN CHANGES *****/
/* Student Header Bar */
.header--article {
	background: #00234b;
}

/***** COURSE VIEW GENERAL DESIGN CHANGES *****/
/* Un-Hyperlink the Course Title */
.course__container .header__left__copy a.course-title {
	pointer-events: none;
}

.course__container .header__left__copy a:hover {
    color: #fff;
}

/* Student Header Bar */
.header--student {
	background: #00234b;
}

.course-title {
color: white;
}

/* Background Color */
.learner__content {
background-color: #efefef;
}

.learner__container {
background-color: #efefef;
}

/* Home Button */
.header--student .header__left__icon {
    background: white;
    color: #00234b;
}

/* SECTION SIDEBAR POP-OUT */
/* Hiding Social Icons Except LinkedIn */
.btn--facebook {
	display: none;
}

.btn--twitter {
	display: none;
}

.btn--pinterest {
	display: none;
}

/* Formatting for Sidebar*/
.share__container > hr {
	display: none;
}

.share__container > .share__title {
	display: inline;
	float: left;
}

.share__container {
	display: flex;
	align-items: center;
}

.btn--social.btn--linkedin {
	margin: 0 0 0 .5em;
}

.btn--linkedin i {
	font-size: 1.5rem;
}

/* Reflection Heading */
.topic__container__workbook .heading.heading--primary {
	display: none;
}

/* Discussion Board Layout */
.items__list--comments .comment:nth-child(1) {
    background-color: #f7f7f7;
    margin-bottom: 1rem;
    padding: 0 1.5rem 1rem 0;
    border-radius: 0 0 5px 5px;
}

.comment__container > .comment > .comment__editor > .thread__header > .row > .columns.medium-12 {
    display: none;
}

.comment__container > .comment > .comment__editor > .thread__header > .hr__accent {
display: none;
}

.thread__header {
    padding: 0.5em 0;
}

.items__list--comments .comment.highlight {
border-radius: 5px !Important;
padding: 1.5rem 0.5rem 1rem 0 !Important;
}

.topic__container__discussion-board .mb-4 {
display: none;
}

.comment__options__container .columns.small-6.small-offset-6.medium-4.medium-offset-8 {
	margin-top: 10px;
}

.items__list--comments .comment-form-header {
    padding-top: 2.5em;
}

/*************************
***  SNIPPET CSS CODE  ***
**************************/
/***** HEADINGS *****/
/* H1 Page Titles */
h1.mines-custom-header {
	font-size: 2.25rem;
	font-weight: 900;
	color: #09396C;
	letter-spacing: 0.5px;
	margin-bottom: 1rem;
}

/* TAKE NOTES REMINDER SNIPPETS */
/* General */
.note-box {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 6px 10px;
  margin: 6px 0;
}

/* ===== Variants ===== */
.note-orange {
  border-top: 3px solid #f15a2a;
}

.note-blue {
  border-top: 3px solid #09396C;
}

/* ===== Icon and text ===== */
.note-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.note-icon img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.note-text {
  color: #333;
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}

/* Underline Heading */
h2.mines-custom-subheading {
	font-size: 1.75rem;
	font-weight: 600;
	color: #09396C;
	letter-spacing: 0.5px;
	margin-top: 0.75rem;
	margin-bottom: 1rem;
	padding-bottom: 0.4rem;
}

.popup__caption h2.mines-custom-subheading {
	margin-top: 0;
}

h2.mines-custom-subheading::after {
	position: absolute;
    display: block;
    content: "";
    height: 3px;
    background-color: #F15A2A;
    width: 8%;
    margin-left: 0;
    margin-top: 0.3rem;
}

h2.mines-custom-subheading-long {
	font-size: 1.75rem;
	font-weight: 600;
	color: #09396C;
	letter-spacing: 0.5px;
	margin-top: 0.75rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid #F15A2A;
	padding-bottom: 0.3rem;
}

/* Gray Sub-Heading */
h3.gray-heading {
	font-weight: 800;
	text-transform: uppercase;
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
	margin-top: 2rem;
	font-family: inherit !Important;
	color: #656565;
}

/* Blue Sub-Heading */
h3.blue-heading {
	font-weight: 600;
	color: #09396C;
	text-transform: uppercase;
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
	margin-top: 2rem;
	letter-spacing: .8px;
}

/* Red Sub-Heading */
h3.red-heading {
	font-weight: 600;
	color: #cc4628;
	text-transform: uppercase;
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
	margin-top: 2rem;
	letter-spacing: .8px;
}

/* Key Takeaways Heading */
h3.key-takeaways {
	font-weight: bold;
	font-size: 1rem;
	color: #656565;
}

.colorado-red {
  color: #CC4628;
}

.blaster-blue {
  color: #09396C;
}

/***** BUTTONS *****/
/* Dark Blue Button */
button.mines-btn--dark-blue {
	background-color: var(--accent-color);
	border: solid 1px var(--accent-color);
	border-radius: 5px;
	padding: .75em 1.5em;
}

button.mines-btn--dark-blue a {
	color: white !important;
}

/* Light Blue Button */
button.mines-btn--light-blue {
	background-color: #94CAF8;
	border: solid 1px #94CAF8;
	border-radius: 5px;
	padding: .75em 1.5em;	
}

button.mines-btn--light-blue a {
	color: black !important;
}

/* Red Button */
.mines-btn--red {
  background-color: #cc4628;
  border: solid 1px #cc4628;
  border-radius: 5px;
  padding: 0.5em 1.5em;
  display: inline-block;
  cursor: pointer;
  color: white !important;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
}

/* Dark Blue Button - Expanded */
button.mines-btn--dark-blue-expanded {
	background-color: var(--accent-color);
	border: solid 1px var(--accent-color);
	border-radius: 5px;
	padding: .75em 1.5em;
	width: 100%;
}

button.mines-btn--dark-blue-expanded a {
	color: white !important;
}

/* Light Blue Button - Expanded */
button.mines-btn--light-blue-expanded {
	background-color: #94CAF8;
	border: solid 1px #94CAF8;
	border-radius: 5px;
	padding: .75em 1.5em;
	width: 100%;
}

button.mines-btn--light-blue-expanded a{
	color: black !important;
}

/* Red Button - Expanded */
.mines-btn--red-expanded {
  background-color: #cc4628;
  border: solid 1px #cc4628;
  border-radius: 5px;
  padding: 0.75em 1.5em;
  display: inline-block;
  cursor: pointer;
  color: white !important;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  width: 100%;
}

/***** VIDEOS EMBEDS *****/
/* Custom Wistia Video */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	border: none;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* YouTube Video */
.youtube-video-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}

.youtube-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/***** ELEMENTS *****/
/* Gray Background */
.call-out-gray-background {
background-color: #f7f7f7;
padding: 1.5rem 1.5rem 0.25rem;
}

/* HORIZONTAL LINES */
/* Thin Red Line */
hr.thin-red-line {
	border-color: #cc4628;
}

hr.thick-red-line {
	border-color: #cc4628;
	border-width: 1px;
}

hr.thin-dark-blue-line {
	border-color: #09396C;
}

hr.thick-dark-blue-line {
	border-color: #09396C;
	border-width: 1px;
}

hr.thin-light-blue-line {
	border-color: #0272DE;
}

hr.thick-light-blue-line {
	border-color: #0272DE;
	border-width: 1px;
}

/* BOTTOM OF PAGE CITATIONS */
/* General Citation Spacing */
.mines-citation {
font-size: 0.8rem;
margin-top: 2.5rem;
}

/* Source Text Wrapping Formatting */
.mines-citation > p {
margin-bottom: 5px;
}

.mines-citation p.source {
position: relative;
padding-left: calc(1.4ch + 0.4ch);
line-height: 1.4;
}

.mines-citation sup {
position: absolute;
inset-inline-start: 0;
inset-block-start: 0;
width: 1.4ch;
text-align: right;
line-height: 1;
}

/* STYLED TABLE */
/* General */
.editor-content table {
margin: 25px 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
font-size: 0.9em;	
}

.editor-content table thead th {
	background-color: #09396C;
	border-color: #09396C;
	text-transform: none;
}

.editor-content tbody tr {
	border-bottom: 1px solid #dddddd;
}

.editor-content tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.editor-content tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

.editor-content tbody tr:last-of-type {
    border-bottom: 2px solid #09396C;
}

/* REFLECTION PAGE - ARCHIVE */
/* Heading */
.mines-reflection-heading {
	display: flex;
	gap: 1.5rem;
	border-bottom: solid 4.5px #f15a2a;
	padding: 0.5em 1em 0.5em;
	align-items: center;
	min-height: 3.5rem;
	margin-bottom: 1.5rem;
	margin-top: -1rem;
	background: none;
	border-radius: 5px;
}

.mines-reflection-icon {
	background: url("https://d36ai2hkxl16us.cloudfront.net/course-uploads/b5e49625-11d2-4a57-98c5-eae4e71188be/myliplcxjnjj-MinesPenUpdatedAsset52x.png");
	background-size: contain;
	height: 3.5rem;
	width: 2.5rem;
	background-repeat: no-repeat;
}

.mines-reflection-title h1 {
	color: #00234B;
	font-size: 2.2rem;
	margin-left: -0.5rem;
	font-weight: 600;
	letter-spacing: 1.5px;
	line-height: 2.2rem;
	margin-bottom: 0;
	font-family: inherit !Important;
}

/* Text Formatting */
p.reflection-question {
	font-size: 1.2rem;
	font-weight: 400 !important;
}

p.reflection-question-blue {
	font-size: 1.2rem;
	font-weight: 400 !important;
	color: #00234b;
}

p.private-disclaimer {
	text-align: right;
	font-size: 0.95rem;
	font-style: italic;
}

/* ASSESSMENT PAGE */
/* Heading */
.mines-assessment-heading {
	display: flex;
	gap: 1.5rem;
	border-bottom: solid 4.5px #f15a2a;
	padding: 0.5em 0;
	align-items: center;
	min-height: 3.5rem;
	margin-left: -0.75rem;
	margin-bottom: 1.5rem;
	margin-top: -1rem;
	background-color: transparent;
	border-radius: 0px;
}

.mines-assessment-title h1 {
	color: #09396c;
	font-size: 2.2rem;
	margin-left: 0;
	font-weight: 600;
	letter-spacing: 1.5px;
	line-height: 2.2rem;
	margin-bottom: 0;
	font-family: inherit !important;
}

/* General Spacing */
.topic__container__workbook .quiz__container--assessment .question__container, .quiz__container--learner .question__container {
    padding: 1rem 0 0 0;
}

/* Table Question Formatting */
.topic__container__workbook .table__container thead {
    background-color: #00234b;
}

.topic__container__workbook .quiz__container--learner .question__container .question-table thead.question-table__header .question-table__header-cell {
	color: white;
	text-transform: none;
	font-size: 1rem;
}

.topic__container__workbook .question-table__header-cell > strong {
	font-weight: 400;
}

/* DISCUSSION BOARD PAGE */
/* Heading */
.mines-discussion {
	display: flex;
	gap: 1.125rem;
	background: #00234B;
	padding: 1em 2em;
	border-radius: 5px 5px 0 0;
	align-items: center;
	justify-content: space-between;
	min-height: 5.5rem;
}

.mines-discussion-icon {
	background: url("https://d36ai2hkxl16us.cloudfront.net/course-uploads/b5e49625-11d2-4a57-98c5-eae4e71188be/q58milrtpqpj-MinesConvoBubbleAsset12x.png");
	background-size: contain;
	height: 4.5rem;
	width: 7rem;
	background-repeat: no-repeat;
}

.mines-discussion-title h1 {
	color: white;
	font-size: 2.2rem;
	margin-left: -0.5rem;
	font-weight: 600;
	letter-spacing: 1.5px;
	line-height: 2.2rem;
	margin-bottom: 0;
	font-family: inherit !Important;
}

.mines-discussion-content {
	padding: 1.5rem 1.5rem 1rem;
	background: #f7f7f7;
}

.mines-discussion-content::after {
    position: absolute;
    display: block;
    content: "";
    height: 3px;
    width: 4%;
    margin-left: 0;
    margin-top: 0.25rem;
}


p.discussion-question {
	font-size: 1.2rem;
	margin-bottom: 0;
}

/* SCENARIO */
/* General Formatting */
.scenario-box {
	background: #f7f7f7;
	padding: 1rem 2rem;
	box-shadow: 0px 0px 5px #aeb3b8;
	margin-bottom: 2rem;
}

.scenario-box .mines-custom-subheading {
	margin-bottom: 1.75rem;
	color: black !important;
}

.scenario-box img {
	margin: 0.75em 0;
}

/* Dark Blue Call Out Text */
p.mines-blue-callout {
	font-size: 1.5rem;
	color: #00234B;
	font-weight: 400;
	margin-bottom: 1.5rem;
	line-height: 1.3;
}

blockquote.mines-blue-callout {
	font-size: 1.5rem;
	color: #00234B;
	font-weight: 400;
	margin-bottom: 1.5rem;
	line-height: 1.3;
	border: none;
	padding: inherit;
}

h2.mines-blue-callout {
	font-size: 1.5rem;
	color: #00234B;
	font-weight: 400;
	margin-bottom: 1.5rem;
	line-height: 1.3;
	border: none;
	padding: inherit;
}

h3.mines-blue-callout {
	font-size: 1.5rem;
	color: #00234B;
	font-weight: 400;
	margin-bottom: 1.5rem;
	line-height: 1.3;
	border: none;
	padding: inherit;
}

h4.mines-blue-callout {
	font-size: 1.5rem;
	color: #00234B;
	font-weight: 400;
	margin-bottom: 1.5rem;
	line-height: 1.3;
	border: none;
	padding: inherit;
}

/* Red Call Out Text */
p.mines-red-callout {
	font-size: 1.5rem;
	color: #CC4628;
	font-weight: 400;
	margin-bottom: 1.5rem;
	line-height: 1.3;
}

blockquote.mines-red-callout {
	font-size: 1.5rem;
	color: #CC4628;
	font-weight: 400;
	margin-bottom: 1.5rem;
	line-height: 1.3;
	border: none;
	padding: inherit;
}

h2.mines-red-callout {
	font-size: 1.5rem;
	color: #CC4628;
	font-weight: 400;
	margin-bottom: 1.5rem;
	line-height: 1.3;
	border: none;
	padding: inherit;
}

h3.mines-red-callout {
	font-size: 1.5rem;
	color: #CC4628;
	font-weight: 400;
	margin-bottom: 1.5rem;
	line-height: 1.3;
	border: none;
	padding: inherit;
}

h4.mines-red-callout {
	font-size: 1.5rem;
	color: #CC4628;
	font-weight: 400;
	margin-bottom: 1.5rem;
	line-height: 1.3;
	border: none;
	padding: inherit;
}

/* UNORDERED LIST */
ul.mines-unordered-list-widget {
padding-left: 1.6rem;
margin-bottom: 1.5rem;
}

ul.mines-unordered-list-widget li {
    list-style-type: none;
    position: relative;
	margin-bottom: 0.75rem;
}

ul.mines-unordered-list-widget.mines-marker-red li::before {
    content: "";
    position: absolute;
    left: -0.8em;          
    font-size: 3rem;
    background-color: #f15a2a; 
	height: 0.75rem;
	min-width: 0.75rem;
	top: 5px;
}

ul.mines-unordered-list-widget.mines-marker-blue li::before {
    content: "";
    position: absolute;
    left: -0.8em;          
    font-size: 3rem;
    background-color: #00234b; 
	height: 0.75rem;
	min-width: 0.75rem;
	top: 5px;
}

/* ORDERED LIST */
ol.mines-ordered-list-widget.mines-number-blue li::marker {
color: #00234b;
font-size: 1.3rem;
line-height: 1.4rem;
font-weight: 700;
}


ol.mines-ordered-list-widget.mines-number-red li::marker {
color: #f15a2a;
font-size: 1.3rem;
line-height: 1.4rem;
font-weight: 700;
}

ol.mines-ordered-list-widget li {
padding-left: 0.5rem;
margin-bottom: 0.75rem;
}

ol.mines-ordered-list-widget {
padding-left: 1.25rem;
margin-bottom: 1.5rem;
}

/* CASE STUDY */
img.case-study-page {
border: 1px solid #aeb3b8;
	padding: 1rem;
	float: right;
	margin-bottom: 1rem;
	margin-left: 1.5rem;
	width: 33%;
}

/* BORDER IMAGE FLOAT RIGHT */
img.border-image-right {
	border: 1px solid #aeb3b8;
	padding: 1rem;
	float: right;
	margin-bottom: 1rem;
	margin-left: 1.5rem;
	width: 33%;
}

/* BORDER IMAGE FLOAT LEFT */
img.border-image-left {
	border: 1px solid #aeb3b8;
	padding: 1rem;
	float: left;
	margin-bottom: 1rem;
	margin-right: 1.5rem;
	width: 33%;
}

/* IMAGE FLOAT RIGHT */
img.image-right {
	padding: 1rem;
	float: right;
	margin-bottom: 1rem;
	margin-left: 1.5rem;
	width: 33%;
}

/* IMAGE FLOAT LEFT */
img.image-left {
	padding: 1rem;
	float: left;
	margin-bottom: 1rem;
	margin-right: 1.5rem;
	width: 33%;
}

/* URGENT CALL OUT BOX */
.urgent-call-out-box {
	padding: 1em 1.5em;
	display: flex;
	align-items: center;
	margin-top: 1rem;
}

.urgent-call-out-box img {
	max-width: 10px;
	float: left;
	margin-bottom: 0;
	
}

.urgent-call-out-box p:not(:first-of-type) {
	padding-left: 15px;
}

.urgent-call-out-box p {
	margin-bottom: 0;
}

.urgent-call-out-box-blue {
	color: white;
	background: #00234b;
}

blockquote.urgent-call-out-box-blue p {
	color: white !important;
	font-style: normal;
}

blockquote.urgent-call-out-box-blue strong {
	font-weight: 500;
}

.urgent-call-out-box-gray {
	color: black;
	background: #f7f7f7;
}

blockquote.urgent-call-out-box-gray p {
	color: black !important;
	font-style: normal;
}

blockquote.urgent-call-out-box-gray strong {
	font-weight: 500;
}

/* CALL OUT GENERAL */
.mines-call-out-box {
	background: #f7f7f7;
	padding: 1em 1.5em;
	margin-bottom: 1em;
	border-top: solid 4px;
}

.mines-call-out-box h4 {
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-size: 0.9rem;
	color: #4d4f53;
	font-weight: 700;
	border-bottom: none;
	padding-bottom: 0;
}
	
.mines-call-out-box-blue {
		border-top-color: #00234B;
	}

.mines-call-out-box-red {
	border-top-color: #F15a2a;
}

/* FEEDBACK CALL OUT */
.mines-call-out-box-feedback {
	background: #f7f7f7;
	padding: 1em 1.5em;
	margin: 1.5em 0 1em; /* Adds space before the callout */
	border-top: solid 4px #F15a2a;
}

.mines-call-out-box-feedback h4 {
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-size: 18px;
	color: rgb(9, 57, 108);
	font-weight: 700;
	border-bottom: none;
	padding-bottom: 0;
}

/***** FOLDED FLAG CALL OUT BOX *****/
/* Global CSS for Folded Flag */
.di-callout-folded-flag-main {
    background-color: #f7f7f7;
    padding: 1rem 1.25rem 0.5rem 0;
    margin-left: -1rem;
	color: #333333;
	margin-top: 2.5rem;
}

.di-callout-folded-flag-title {
    font-weight: 600;
    letter-spacing: 0.36px;
    transform: translateX(-1rem) translateY(-2rem);
}

.di-callout-folded-flag-content {
    color: #656565;
    line-height: 1.5rem;
	margin-top: -1.5rem;
}

.di-callout-folded-flag-main-97FRTp > .di-callout-folded-flag-content {
    margin-left: 1rem;
}


h3.di-callout-folded-flag-title-text {
    white-space: nowrap;
    padding: 0.5rem 1.5rem 0.5rem 2rem;
    width: fit-content;
	font-size: 1.25rem;
	margin-bottom: inherit;
	margin-top: inherit;
}

.di-callout-folded-flag-title-doodad {
    height: 0.5rem;
    width: 1rem;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
}

/* ORANGE FLAG */
.di-folded-flag-title-text-orange {
	color: black;
	background-color: #F15A2A;
}

.di-folded-flag-doodad-orange {
	    background-color: #90371B;	
}

/* BLUE FLAG */
.di-folded-flag-title-text-blue {
	color: white;
	background-color: #00234b;
}

.di-folded-flag-doodad-blue {
	    background-color: #001125;	
}

/* TABS WIDGET */
/* ── ADA CODE ── */
.di-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.di-tabs input[type="radio"]:focus-visible + label {
  outline: 2px solid Highlight;
  outline-offset: 2px;
}

/* General CSS */
.di-tabs {
  display: flex;
  position: relative;
  left: 0px;
  top: 0px;
  flex-flow: row wrap;
  font-size: 1em;
  line-height: initial;
}

.di-tabs .di-tab-container {
  float: left;
}

.di-tab-content-container {
  width: 100%;
  border-bottom: solid 2px #879EC3;
  color: #333333;
}

.di-tabs label {
  font-size: 0.9em;
  line-height: inherit;
  position: relative;
  display: block;
  padding: .6rem 1.25rem;
  box-sizing: content-box;
  min-width: 6.25em;
  text-align: center;
  margin-left: -2px !important;
  margin-top: -2px !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  cursor: pointer;
  color: #333333;
  background-color: white;
  flex-grow: 1;
  flex-shrink: 0;
  width: min-content;
  border-radius: 10px 10px 0 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 900;
  align-content: center;
}

.di-tabs .di-tab-content {
  padding: 1rem 0;
  position: relative;
  display: none;
  margin-left: -2px;
  background-color: white;
  font-size: 1rem;
}

.di-tabs input[type="radio"] {
  /* removed display:none; see above */
}

/* Mines Specific CSS */
.di-tabs label {
  border: solid 1.5px #879EC3;
  z-index: 3;
  color: black;
}

.di-tabs .di-tab-content {
  border-top: 4px solid #879EC3;
  margin-top: -2px;
  background-color: white;
  padding: 1rem;
  z-index: 3;
}

.di-tabs .di-tab-content::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  height: 100%;
  width: 100%;
  background-color: #f7f7f7;
  z-index: -1;
}

.di-tabs label {
  border-bottom: none;
}

.di-tabs .di-tab-content {
  border-top: 2px solid #879EC3;
}

/* ── RADIO CHECKED: SHOW PANEL & STYLE TAB ── */
.di-tabs #di-tab-selector--1:checked ~ .di-tab-content-container > .di-tab--1-content {
  display: block;
}
.di-tabs #di-tab-selector--1:checked ~ label.di-tab--1 {
  z-index: 2;
  position: relative;
  left: 0px;
  top: 0px;
  background-color: #879EC3;
  font-weight: 900;
  color: #000000;
  cursor: initial;
  border-radius: 10px 10px 0 0;
}

/* Repeat for tabs 2–5 */
.di-tabs #di-tab-selector--2:checked ~ .di-tab-content-container > .di-tab--2-content {
  display: block;
}
.di-tabs #di-tab-selector--2:checked ~ label.di-tab--2 {
  z-index: 2; position: relative; left: 0; top: 0;
  background-color: #879EC3; font-weight: 900; color: #000000; cursor: initial;
  border-radius: 10px 10px 0 0;
}

.di-tabs #di-tab-selector--3:checked ~ .di-tab-content-container > .di-tab--3-content {
  display: block;
}
.di-tabs #di-tab-selector--3:checked ~ label.di-tab--3 {
  z-index: 2; position: relative; left: 0; top: 0;
  background-color: #879EC3; font-weight: 900; color: #000000; cursor: initial;
  border-radius: 10px 10px 0 0;
}

.di-tabs #di-tab-selector--4:checked ~ .di-tab-content-container > .di-tab--4-content {
  display: block;
}
.di-tabs #di-tab-selector--4:checked ~ label.di-tab--4 {
  z-index: 2; position: relative; left: 0; top: 0;
  background-color: #879EC3; font-weight: 900; color: #000000; cursor: initial;
  border-radius: 10px 10px 0 0;
}

.di-tabs #di-tab-selector--5:checked ~ .di-tab-content-container > .di-tab--5-content {
  display: block;
}
.di-tabs #di-tab-selector--5:checked ~ label.di-tab--5 {
  z-index: 2; position: relative; left: 0; top: 0;
  background-color: #879EC3; font-weight: 900; color: #000000; cursor: initial;
  border-radius: 10px 10px 0 0;
}

/* LEARNING PATHWAY SNIPPET */
/* General */
    .mines-pathway-snippet {
      position: relative;
      background: #ffffff;
      border: 1px solid #949494;
      border-radius: 18px;
      padding: 1rem 2.25rem 1.75rem;
      text-align: center;
      box-sizing: border-box;
    }

    .mines-pathway-image {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%); 
      max-width: 200px; 
      height: auto;
      display: block;
    }

    .mines-pathway-snippet h2 {
      font-size: 1.6rem;
      color: #09396C;
      margin: 0 0 1rem;
      line-height: 1.25;
		font-weight: 900;
		letter-spacing: 0.52px;		
    }

    .mines-pathway-snippet .btn--primary {
      margin-top: 0.75rem;
		margin-bottom: 0;
		font-size: 1rem;
		letter-spacing: 0.19px;
		border-radius: 8px;
		width: 80%;
		padding: 0.75rem;
		
    }
	
/***** MISC CODE *****/
/* Classes for Custom Tables */
.hrt-table-question {
font-size: 1.2rem;
color: #00234b;
	vertical-align: top;
	padding-top: 0.75em;;
}

.hrt-table-response {
font-size: 1rem;
	vertical-align: top;
	padding-top: 0.75em;
}

.hrt-table-score {
	padding-top: 0.75rem;
	font-size: 1rem;
	vertical-align: top;
	background: #f7f7f7;
}

.hrt-table-score-heading {
	color: #00234b;
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

/* Formatting for Matching Activity */
/*
.match-pair__list .match-pair__card--incorrect .match-pair__card__message .match-pair__card__message__inner {
	position: relative;
}
*/
.match-pair__set {
	margin-bottom: 2.5rem;
}

.match-pair__list .match-pair__card--incorrect .match-pair__card__message {
	border-radius: 10px;
}

.match-pair__set .match-pair__card-clue {
	display: flex;
	align-items: stretch;
}

.match-pair__set .match-pair__card-clue img {
	border-radius: 10px;
	width: 100%;
}

.match-pair__set .resource__title {
	background-color: transparent;
	top: 0;
	color: #333333;
	display: grid;
	font-size: 1.4rem;
	line-height: 1.2;
	padding: 1.5em;
	border-radius: 10px;
	height: 100%;
	overflow: scroll;
}

.match-pair__set .resource__title span {
	align-self: center;
	justify-self: center;
	text-align: center;
}

.match-pair__set .card__label__button {
	background: #00234b;
	color: white;
	border-radius: 5px;
	font-size: 0.95em;
}

.match-pair__set .match-quiz__overlay {
	background: transparent;
	height: 1%;
	top: 100%;
}

.match-pair__set .match-quiz__overlay .match-quiz__overlay__message h1 {
	margin-top: 20px;
}

.match-pair__set .match-quiz__overlay .match-quiz__overlay__message {
	top: 100%;
}

.match-pair__set .match-quiz__overlay .match-quiz__icon {
	display: none;
}

.match-pair__set .match-pair__list .match-pair__card--correct .match-pair__card-answer {
	text-align: left;
}

.match-pair__set .match-pair__list .match-pair__card--correct .match-pair__card-answer ol {
	padding-left: 1em;
}

.match-pair__list .match-pair__card--correct {
    border-radius: 10px;
}

/***** FULL PAGES *****/
/* TECHNICAL COURSE INTRO PAGE */
/* Columns border and spacing */
.row.techcourseintro > .large-8.columns {
border-right: solid 1px #ececec;
}

.row.techcourseintro > .large-4.columns {
padding-left: 1.5rem;
padding-top: 0;
}

/* h2 formatting */
h2.techcourseintro {
font-size: 2rem;
font-weight: 100 !Important;
margin-bottom: 0.75rem;
font-family: inherit;
}

/* Gray Heading */
h3.gray-heading {
font-weight: 800;
text-transform: uppercase;
font-size: 1.1rem;
margin-bottom: 0.5rem;
margin-top: 2rem;
font-family: inherit !Important;
	color: #656565;
}

/* STOP SIGN */
p.stop-sign {
	font-size: 1.5rem;
	font-weight: 200;
	color: #00234b;
}

/* Remove TI's default list padding */
ol.no-bullet-padding, ul.no-bullet-padding {
padding-left: 0;
}

/* Special Check Mark Bullets */
ul.techcourseintro {
padding-left: 1rem;
list-style-image: url("https://d36ai2hkxl16us.cloudfront.net/course-uploads/b5e49625-11d2-4a57-98c5-eae4e71188be/44374x52axjt-DoubleCheckMark.png");
}

.techcourseintro ul li {
margin-bottom: .75rem;
}

/* SME Call out */
.sme-callout {
background: #00234B;
color: white;
padding: 1.5rem 2rem;
margin-top: 2rem;
margin-left: -2rem;
margin-right: -1rem;
border: inset 3px #00234b;
border-radius: 5px;
}

.sme-callout h4 {
color: white;
font-size: 1.3rem;
	font-family: inherit !Important;
}

.sme-callout img {
	border-radius: 500px;
}

/* Course Format Details */
p.format-details {
color: #A32E0A;
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 0.5rem;
}

/* Light Blue Button */
.btn.btn-light-blue {
background-color: #044CC8;
border-color: #044CC8;
color: white;
border-radius: 5px;
font-size: 1rem;
line-height: 1.3;
padding: .75em 1.5em;
margin-top: 1rem;
}


/* Heading Design */
.di-titles-offset-title {
    position: relative;
    width: 100%;
    margin: 0 auto 4.25rem auto;
    line-height: 1rem;
}

.di-titles-offset-image {
    box-sizing: content-box;
}

.di-titles-offset-image img {
    display: block;
    position: relative;
    width: 100%;
    object-fit: cover;
    max-height: 200px;
border-radius: 5px;
}

.di-titles-offset-text {
    display: inline-block;
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    padding: 2.0625rem 4.8125rem;
    background: #00234B;
    border: .25rem solid white;
    color: rgba(255,255,255,1);
    font-size: 3rem;
    line-height: 1;
    font-weight: 500 !important;
	font-family: inherit !important;
    font-style: normal;
    letter-spacing: 1.88px;
    text-align: center;
    width: max-content;
    height: fit-content;
    max-width: 90%;
    border-radius: 5px;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .di-titles-offset-text {
        white-space: initial;
    }
}

@media only screen and (max-width: 64.063em) {
	.di-titles-offset-title {
		margin-bottom: 7rem;
}
}

@media only screen and (max-width: 50em) {
	.di-titles-offset-title {
		margin-bottom: 6rem;
}
}

@media only screen and (max-width: 40.063em) {
	.di-titles-offset-title {
		margin-bottom: 5rem;
}
}

@media (max-width: 600px) {
    .di-titles-offset-title {
        background-color: var(--accent-color);
        margin-bottom: 2rem; /* 3rem */
		/* margin-top: 1rem; */
        min-height: 22vw;
    }

    .di-titles-offset-text {
        display: block;
        position: absolute;
        left: initial;
        top: 50%;
        width: 100%;
        padding: 1rem 0;
        transform: translateY(-50%); /* maybe none */
        background: transparent;
        border: none;
        white-space: unset;
        max-width: unset;
    }

    .di-titles-offset-image {
/*        position: absolute;*/
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-size: cover;
        background-position: center;
    }

    .di-titles-offset-image img {
        display: none;
    }

    .di-titles-offset-image::after {
		display: none;
    }
}

/****** SECTION INTRODUCTION PAGE *****/
/* Heading Banner */
.mines-section-title-main {
    line-height: unset;
    background: white;
    padding: 0 0 1rem;
}

.mines-section-title-inner {
    border-bottom: 6px solid #F15A2A;
    background-color: #00234B;
    padding: 1.25rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
}

.mines-section-title-text {
    color: white;
    line-height: 1.4375rem;
}

h1.mines-section-title-text-title{
    color: white;
    font-size: 1.75rem;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.03125rem;
	margin-bottom: 0;
}

.mines-section-title-text > .row {
	display: flex;
	width: 100%;
}

.mines-section-title-text > .row > .large-10.columns {
	float: none;
	width: 100%;
}

.mines-section-title-text > .row > .large-2.columns {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	float: none;
	width: fit-content;
	padding-right: 0;
	padding-left: 50px;
}

.mines-section-title-text > .row > .large-2.columns img {
    min-width: 28px;
}

.mines-section-title-text > .row > .large-2.columns img {
    width: 35px;
}

.mines-section-title-text > .row > .large-2.columns figure {
	margin: 0;
}

.mines-section-title-text > .row > .large-2.columns p {
	margin-bottom: 0;
	min-width: fit-content;
}

/* Content Area */
.mines-section-page h2 {
	color: #00234B;
	margin-top: 1rem;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1.25rem;
	letter-spacing: 0.25px;
	margin-bottom: 10px;
	line-height: 1;
}

.mines-section-page h2:not(:first-of-type) {
	margin-top: 1.75rem;
}

.mines-section-page .mines-section-video h3.gray-heading {
	font-size: 0.85rem;
	font-weight: 400;
	margin-top: 1rem;
}

.mines-section-page .mines-section-video figure {
	padding: 56.25% 0 0 0;
	position: relative;
	margin: 0;
}

.mines-section-page .mines-section-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mines-section-content img {
	float: right;
	width: 50%;
	max-width: 500px;
	padding-left: 1.5rem;
}

/* COMPLETION PAGE */
.completion-page .completion-page-heading {
	padding: 0 0 0.5em;
	border-bottom: solid 4px #00234b;
	margin-bottom: 0;
}

.completion-page .completion-page-heading img {
	float: left;
	max-width: 60px;
	margin-right: 0.75em;
}

.completion-page .completion-page-heading h1 {
	margin-bottom: 0;
	font-size: 2.2em;
	color: #00234b;
}

.completion-page .completion-page-heading p:first-of-type {
	margin-bottom: 0;
}

.completion-page h2 {
	margin-bottom: 0.5em;
	font-size: 1.5em;
	color: #333333;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.completion-page .large-4.columns {
	text-align: left;
	padding: 1.5rem 1.75rem 1rem;
	background: #00234b;
	color: white;
	border-radius: 0 0 5px 5px;
}

.completion-page .row {
	margin: 0;
}

.completion-page .large-4.columns h3 {
font-size: 1.2em;
	letter-spacing: 1px;
	color: white;
	font-weight: 400;
	line-height: 1.45;
	margin-bottom: 0.5rem;
}

.completion-page .large-8.columns {
	padding-top: 1.5rem;
	padding-left: 0;
}


.completion-page .mines-btn {
	background-color: #034ece;
	color: white !important;
	border: solid 1px #034ece;
	border-radius: 5px;
	padding: 0.75em 1.5em;
	width: fit-content;
	font-size: 0.95rem;
	margin-top: 0.5rem;
}


/***** CUSTOMIZATIONS *****/
/* QUIZ START BLOCK */
.mines-quiz-welcome h1 {
	font-size: 2rem;
	margin-bottom: 0.25rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.mines-quiz-welcome hr.quiz-start {
	border: solid 3px #f15a2a;
	width: 10%;
	margin: 0 auto;
	margin-bottom: 1.5rem;
	display: block;
}

.quiz-start__text .editor-content {
    text-align: center;
}

.quiz-start__content {
	background-color: white;
	border-radius: 10px;
	border: double 5px #00234b;
}

.quiz-start__text {
	padding: 3em 5em;
}

.quiz-start__text h2.sub-title {
	font-size: 1rem;
	letter-spacing: 2px;
	margin-bottom: 0.25rem;
	color: #58585F;
	text-transform: uppercase;
	font-weight: 400;
}

.quiz-start__text h1 {
	margin-bottom: 0.75rem;
}

.quiz-start__text hr.quiz-start {
	border: solid 3px #f15a2a;
	width: 10%;
	margin: 0 auto;
	margin-bottom: 1.5rem;
	display: block;
}

.quiz-start__text p {
	font-size: 1.1rem;
}

.quiz-start__text .quiz-start__sub-text {
    margin-top: 2em;
}

.sub-page-gray {
	background-color: #F0F0F0;
	font-size: 1.2rem;
}

/* QUIZ RESULTS */

/* Correct */
.chart-bar--correct {
  background-color: #5BB65C !important;
}

.label-circle--correct {
  background-color: #5BB65C !important;
}

/* Incorrect */
.chart-bar--incorrect {
  background-color: #DC2626 !important; 
}

.label-circle--incorrect {
  background-color: #DC2626 !important;
}

/* Bars */

.chart-bar--total {
  background-color: #21314d !important; 
}

.label-circle--total {
  background-color: #21314d !important;
}

.label-circle--answered {
  background-color: #09396C !important;
}

.chart-bar--answered {
  background-color: #09396C !important; 
}

/* FLIP CARDS */
.flip-card {
    border: 2px solid #879EC3;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-top-width: 8px;
}

.flip-card__front {
    border-radius: 5px;
}

.flip-card__front .front__content {
    text-align: left;
}

.flip-card__front .front__content .resource__title {
	border-radius: 0 0 3px 3px;
}

.flip-card__front .front__content > .editor-content {
	padding: 4rem 2rem 2rem;
}

button.flip-card__icon {
    background-color: #00234B;
    color: white;
}

.flip-card__front p.sub-title {
	letter-spacing: 2px;
	color: #58585F;
	text-transform: uppercase;
	font-size: 1rem;
}

.flip-card__back .back__content .description > .editor-content {
	padding: 2rem 1rem 1rem;
	
}

.flip-card.flipped .flip-card__back .description {
	text-align: left;
	font-size: 1rem;
}

.flip-card.flipped .flip-card__back .description p.sub-title {
	letter-spacing: 1px;
	color: #44444B;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

.flip-card.flipped .flip-card__back .description h2.mines-flip-card {
	font-size: 2rem;
	color: white;
	background-color: #00234B;
	padding: 5px;
}

.flip-card.flipped .flip-card__back .description p.rejoinder {
	font-size: 1rem;
}

/* TABLES WITHIN ASSESSMENTS */
table.zebra thead th:nth-of-type(odd) {
    background: #09396C;
    color: white;
    text-align: center;
}

table.zebra thead th {
    background: #00234b;
    border: none;
    color: white;
    text-align: center !important;
}

table.zebra tbody td, table.zebra tbody th {
    border: 1px solid #e9e9e9;
}

table.zebra tr:nth-of-type(2n) {
    background: #f3f3f3;
}

table.zebra td:nth-of-type(2n) {
    background: rgba(0, 35, 75, .1);
}

/* REFLECTION WITHOUT HEADING */
.quiz__container--learner .question__container textarea {
    border-top: solid 1.5px #F15a2a;
}

/* FORMATTING OF ESSAY QUESTION TYPE */
.quiz__container.quiz__container--learner.quiz__container--survey #question-pretext {
	margin-bottom: 0.5rem;
}

.quiz__container.quiz__container--learner.quiz__container--survey .panel--alt {
    background: none;
    border: 0px;
    padding: 0;
}

.quiz__container.quiz__container--learner.quiz__container--survey .panel {
    background: none;
    border: 0px;
    padding: 0;
}

.row.essay-widget__question-container .large-6 {
	width: 100%;
	margin-bottom: 10px;
}

.question__container .large-6 > .bordered__header:first-child {
	display: none;
}

.essay-widget__question-container .large-6:first-of-type .essay-widget {
    border: 0px;
    padding: 0;
	background: white;
}

.question__container .panel .large-6 .essay-widget p {
	font-size: 0.9rem;
}

.question__container .panel .large-6:first-of-type .essay-widget p {
	font-weight: 700;
	color: #333;
	margin-bottom: 0.5rem;
	font-size: 1rem;
}

.question__container .panel .small-12.columns .bordered__header {
	background: #00234b;
	color: white;
}

.question__container .bordered__header {
	padding: .5em 1em;
}

.quiz__container--learner hr {
	display: none;
}

.quiz__container--learner hr[class*="-line"] {
	display: block;
}

/* QUIZ FORMATTING */
.quiz__container--learner .choices__list {
	padding-left: 1rem;
}

.quiz__container--learner .choice__index {
    max-width: fit-content;
    padding-right: 0;
	font-size: 1rem;
}

.quiz__container--learner .leading-loose {
    font-size: 1rem;
}

.quiz__container--learner .choices__list li.choice--multiple {
    margin-bottom: 0.25rem;
    padding-left: 1rem;
}

.quiz__container--learner .choices__list li .choice__response {
	padding-left: 1.9rem;
	padding-right: 1rem;
}

.quiz__container--learner .choices__list li .choice__response p:first-of-type {
    margin-bottom: 2px;
}

.quiz__container--learner .choice__review {
	padding-right: 1rem;
	float: right;
}

.quiz__container--quiz .panel--alt {
    background: none;
    border: 0;
    padding: 0;
}

.question__container .panel .large-6:first-of-type .essay-widget p.essay-directions {
	font-weight: 200;
	font-size: 0.9rem;
}

/***** INTERACTIVE PAGE TYPE *****/
/* Formatting of Pop-Up and Image */
.topic__container .topic__image {
    width: 85%;
    margin: 0 auto;
}

.image-tag__popup .popup__caption {
padding: 1.5em 2em;
}

.popup__caption p {
margin-bottom: 0.75em;
}

/***** CUSTOM STYLES *****/

/* Homepage Call to Action Box */

.bg-dark-blue-action {
  background-color: #00234b;
  padding: 30px;
  margin-bottom: 30px;
  color: white;
  text-align: center;
  width: 100%;
  min-height: 125px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  font-size: 2rem;
  box-sizing: border-box;
}

/* Homepage Stay in the Loop Form  */

.outline-action {
  width: 100%;
  margin: 0;
  padding: 20px 0;
  border: 2px solid #00234b;
  border-radius: 0;
  background: #fff;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
  box-sizing: border-box;
  overflow-x: visible;
}

.outline-action > #mc_embed_shell {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: block;
  align-self: center;
  justify-self: center;
}

/* On wider screens, shrink to half width but keep it centered */
@media (min-width: 992px) {
  .outline-action {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== Mailchimp form base ===== */
#mc_embed_shell * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#mc_embed_signup {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

#mc_embed_signup h2 { margin: 0 0 8px; }
#mc_embed_signup p  { margin: 0 0 12px; }

#mc_embed_signup .mc-field-group {
  margin-bottom: 8px;   /* reduced from 12px */
}
#mc_embed_signup .mc-field-group label {
  display: block;
  margin: 0 0 4px;     /* tighter label spacing */
}

#mc_embed_signup input[type="email"],
#mc_embed_signup input[type="text"],
#mc_embed_signup select {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
}

#mc_embed_signup .clear,
#mc-embedded-subscribe { width: 100%; }

#mc_embed_signup .mc-disclaimer {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-top: 8px; /* give breathing room above disclaimer */
}

/* Small-screen refinements */
@media (max-width: 480px) {
  .outline-action { padding: 16px; }
  #mc_embed_signup h2 { font-size: 1.25rem; }
  #mc_embed_signup p  { font-size: 0.95rem; }
}

/* ===== Tablet/desktop layout ===== */
@media (min-width: 640px) {
  #mc_embed_signup_scroll {
    display: block;  /* stack all fields vertically */
  }

  /* Make sure Email, First, Last all span full width */
  #mc_embed_signup_scroll .mc-field-group {
    width: 100%;
  }

  /* Reduce padding slightly on larger screens */
  #mc_embed_signup_scroll input[type="email"],
  #mc_embed_signup_scroll input[type="text"],
  #mc_embed_signup_scroll select {
    padding: 8px 10px;
    font-size: 0.95rem;
  }

  /* Submit button full width for consistency */
  #mc_embed_signup_scroll .clear {
    width: 100%;
  }
}

/* ===== Subscribe button styling ===== */
#mc-embedded-subscribe.mines-btn--red-expanded {
  border-radius: 6px;
  padding: 14px 28px;   /* bigger button */
  font-size: 1.1rem;    /* larger text */
  font-weight: normal;  /* no bold */
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

#mc-embedded-subscribe.mines-btn--red-expanded:hover {
  opacity: 0.9;
}

/* Optional: tighten very large screens */
@media (min-width: 1200px) {
  #mc_embed_signup { max-width: 560px; }
}

/* =====================================================
   MINES PROED – UI OVERRIDES
   Custom fixes for platform styling conflicts
   ===================================================== */

/* -----------------------------------------------------
   TEXT PAGES – BULLETED LIST ACCESSIBILITY
   Improves spacing/visibility of bullet lists to ensure
   proper readability and accessibility compliance.
----------------------------------------------------- */

.results__list ul li {
    color: #333333;
    font-size: 16px;
    padding: .25em .5em .3em 0;
}

/* -----------------------------------------------------
   HEADER / TOP NAVIGATION
   ----------------------------------------------------- */

/* Learner Login Name
   Issue: Default color (#333333) is unreadable on the
   dark blue header background.
   Fix: Force text color to white for accessibility. */

.ml-auto button > div.flex.items-center > span:first-child {
  color: #fff;
}

.ml-auto button:hover > div.flex.items-center > span:first-child {
  color: inherit;
}

/* -----------------------------------------------------
   HEADER / TOP NAVIGATION / Panorama
   ----------------------------------------------------- */
/* 
   Issue: IF not using a logo text default to color (#333333) is unreadable on  
   the dark blue header background.
   Fix: Force text color to white for accessibility. */

.header--dashboard .company-logo__container span.h4 {
  color: #fff;
}

/* Learner Login Name for Panorama
   Issue: Default color (#333333) is unreadable on the
   dark blue header background.
   Fix: Force text color to white for accessibility. */

.header--dashboard span.truncate.font-semibold {
  color: #ffffff;
}

.header--dashboard button:hover span.truncate.font-semibold {
  color: inherit;
}


/* #region GLOBAL VARIABLES ======================================= */

/* ============================================================
   COLORADO SCHOOL OF MINES — GLOBAL VARIABLES
   ============================================================
   Naming convention:
     -1  = Theme 1 only
     -2  = Theme 2 only
     -A, -B, -C, -D = Shared across both themes
     -contrast = ADA AAA compliant text color for that background
   ============================================================ */

:root {

  /* --- Main Colors --- */
  --mines-primary:               #09396C; /* Text, Backgrounds, Elements and Borders */
  --mines-primary-contrast:      white;
  --mines-secondary-1:           #00234B; /* Text, Backgrounds, Elements and Borders — Theme 1 Only */
  --mines-secondary-1-contrast:  white;
  --mines-secondary-2:           #21314D; /* Text, Backgrounds, Elements and Borders — Theme 2 Only */
  --mines-secondary-2-contrast:  white;
  --mines-gray:                  #595959; /* Text, Backgrounds, Elements and Borders */
  --mines-gray-contrast:         white;

  /* --- Accent Colors --- */
  --mines-accent-1:              #F15A2A; /* Elements and Borders Only — Theme 1 */
  --mines-accent-1-ADA:          #F36D44; /* Backgrounds Only — Theme 1 (ADA Compliant) */
  --mines-accent-1-ADA-contrast: black;
  --mines-accent-2:              #7B95BC; /* Elements and Borders Only — Theme 2 */
  --mines-accent-2-ADA:          #8299C0; /* Backgrounds Only — Theme 2 (ADA Compliant) */
  --mines-accent-2-ADA-contrast: black;

  /* --- Text Callout Colors --- */
  --mines-callout-A:             #465366; /* Text Only — Theme 2 */
  --mines-callout-B:             #0B396D; /* Text Only — Theme 2 */

 /* --- Background & Border Colors Only --- */
  --mines-background-1:          #F6F7FB; /* Large Backgrounds and Borders Only — Theme 1 */
  --mines-background-1-contrast: #333333;
  --mines-background-2:          #F6F9FB; /* Large Backgrounds and Borders Only — Theme 2 */
  --mines-background-2-contrast: #333333;
  --mines-background-A:          #879ECE; /* Small Backgrounds and Borders Only */
  --mines-background-A-contrast: black;
  --mines-background-B:          #F7F7F7; /* Small Backgrounds and Borders Only */
  --mines-background-B-contrast: #333333;
  --mines-background-C:          #CEDCE9; /* Small Backgrounds and Borders Only */
  --mines-background-C-contrast: #333333;
  --mines-background-D:          #96969C; /* Small Backgrounds and Borders Only */
  --mines-background-D-contrast: black;
 
  /* --- Margin Sizes --- */
  --mines-margin-sm: 0.5rem;
  --mines-margin-md: 1rem;
  --mines-margin-lg: 1.5rem;
  --mines-margin-xl: 2rem;

  /* --- Padding Sizes --- */
  --mines-padding-sm: 0.5rem;
  --mines-padding-md: 1rem;
  --mines-padding-lg: 1.5rem;
  --mines-padding-xl: 2rem;

  /* --- Derived Colors --- */
  --mines-primary-dark: color-mix(in srgb, var(--mines-primary) 68%, black); /* darkened primary for gradients and deep backgrounds */

  /* --- Icon URLs --- */
  --mines-icon-alert:        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12.8659%203.00017L22.3922%2019.5002C22.6684%2019.9785%2022.5045%2020.5901%2022.0262%2020.8662C21.8742%2020.954%2021.7017%2021.0002%2021.5262%2021.0002H2.47363C1.92135%2021.0002%201.47363%2020.5525%201.47363%2020.0002C1.47363%2019.8246%201.51984%2019.6522%201.60761%2019.5002L11.1339%203.00017C11.41%202.52187%2012.0216%202.358%2012.4999%202.63414C12.6519%202.72191%2012.7782%202.84815%2012.8659%203.00017ZM4.20568%2019.0002H19.7941L11.9999%205.50017L4.20568%2019.0002ZM10.9999%2016.0002H12.9999V18.0002H10.9999V16.0002ZM10.9999%209.00017H12.9999V14.0002H10.9999V9.00017Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-book-1:       url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M3%2018.5V5C3%203.34315%204.34315%202%206%202H20C20.5523%202%2021%202.44772%2021%203V21C21%2021.5523%2020.5523%2022%2020%2022H6.5C4.567%2022%203%2020.433%203%2018.5ZM19%2020V17H6.5C5.67157%2017%205%2017.6716%205%2018.5C5%2019.3284%205.67157%2020%206.5%2020H19ZM5%2015.3368C5.45463%2015.1208%205.9632%2015%206.5%2015H19V4H6C5.44772%204%205%204.44772%205%205V15.3368Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-book-2:       url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M21%2018H6C5.44772%2018%205%2018.4477%205%2019C5%2019.5523%205.44772%2020%206%2020H21V22H6C4.34315%2022%203%2020.6569%203%2019V4C3%202.89543%203.89543%202%205%202H21V18ZM5%2016.05C5.16156%2016.0172%205.32877%2016%205.5%2016H19V4H5V16.05ZM16%209H8V7H16V9Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-book-3:       url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M21%204H7C5.89543%204%205%204.89543%205%206C5%207.10457%205.89543%208%207%208H21V21C21%2021.5523%2020.5523%2022%2020%2022H7C4.79086%2022%203%2020.2091%203%2018V6C3%203.79086%204.79086%202%207%202H20C20.5523%202%2021%202.44772%2021%203V4ZM5%2018C5%2019.1046%205.89543%2020%207%2020H19V10H7C6.27143%2010%205.58835%209.80521%205%209.46487V18ZM20%207H7C6.44772%207%206%206.55228%206%206C6%205.44772%206.44772%205%207%205H20V7Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-bookmark:     url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M5%202H19C19.5523%202%2020%202.44772%2020%203V22.1433C20%2022.4194%2019.7761%2022.6434%2019.5%2022.6434C19.4061%2022.6434%2019.314%2022.6168%2019.2344%2022.5669L12%2018.0313L4.76559%2022.5669C4.53163%2022.7136%204.22306%2022.6429%204.07637%2022.4089C4.02647%2022.3293%204%2022.2373%204%2022.1433V3C4%202.44772%204.44772%202%205%202ZM18%204H6V19.4324L12%2015.6707L18%2019.4324V4Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-bubble:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 2C2.9 2 2 2.9 2 4v11c0 1.1.9 2 2 2h5l3 4 3-4h5c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2H4z M8 10m-1.5 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0-3 0 M12 10m-1.5 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0-3 0 M16 10m-1.5 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0-3 0' fill='black'/%3E%3C/svg%3E");
  --mines-icon-check:        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M9.9997%2015.1709L19.1921%205.97852L20.6063%207.39273L9.9997%2017.9993L3.63574%2011.6354L5.04996%2010.2212L9.9997%2015.1709Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-clock:        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12%2022C6.47715%2022%202%2017.5228%202%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012C22%2017.5228%2017.5228%2022%2012%2022ZM12%2020C16.4183%2020%2020%2016.4183%2020%2012C20%207.58172%2016.4183%204%2012%204C7.58172%204%204%207.58172%204%2012C4%2016.4183%207.58172%2020%2012%2020ZM13%2012H17V14H11V7H13V12Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-code:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M23%2012L15.9289%2019.0711L14.5147%2017.6569L20.1716%2012L14.5147%206.34317L15.9289%204.92896L23%2012ZM3.82843%2012L9.48528%2017.6569L8.07107%2019.0711L1%2012L8.07107%204.92896L9.48528%206.34317L3.82843%2012Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-discuss:      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M14%2022.5L11.2%2019H6C5.44772%2019%205%2018.5523%205%2018V7.10256C5%206.55028%205.44772%206.10256%206%206.10256H22C22.5523%206.10256%2023%206.55028%2023%207.10256V18C23%2018.5523%2022.5523%2019%2022%2019H16.8L14%2022.5ZM15.8387%2017H21V8.10256H7V17H11.2H12.1613L14%2019.2984L15.8387%2017ZM2%202H19V4H3V15H1V3C1%202.44772%201.44772%202%202%202Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-draft:        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M20%202C20.5523%202%2021%202.44772%2021%203V6.757L19%208.757V4H5V20H19V17.242L21%2015.242V21C21%2021.5523%2020.5523%2022%2020%2022H4C3.44772%2022%203%2021.5523%203%2021V3C3%202.44772%203.44772%202%204%202H20ZM21.7782%208.80761L23.1924%2010.2218L15.4142%2018L13.9979%2017.9979L14%2016.5858L21.7782%208.80761ZM13%2012V14H8V12H13ZM16%208V10H8V8H16Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-earth:        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M6.23509%206.45329C4.85101%207.89148%204%209.84636%204%2012C4%2016.4183%207.58172%2020%2012%2020C13.0808%2020%2014.1116%2019.7857%2015.0521%2019.3972C15.1671%2018.6467%2014.9148%2017.9266%2014.8116%2017.6746C14.582%2017.115%2013.8241%2016.1582%2012.5589%2014.8308C12.2212%2014.4758%2012.2429%2014.2035%2012.3636%2013.3943L12.3775%2013.3029C12.4595%2012.7486%2012.5971%2012.4209%2014.4622%2012.1248C15.4097%2011.9746%2015.6589%2012.3533%2016.0043%2012.8777C16.0425%2012.9358%2016.0807%2012.9928%2016.1198%2013.0499C16.4479%2013.5297%2016.691%2013.6394%2017.0582%2013.8064C17.2227%2013.881%2017.428%2013.9751%2017.7031%2014.1314C18.3551%2014.504%2018.3551%2014.9247%2018.3551%2015.8472V15.9518C18.3551%2016.3434%2018.3168%2016.6872%2018.2566%2016.9859C19.3478%2015.6185%2020%2013.8854%2020%2012C20%208.70089%2018.003%205.8682%2015.1519%204.64482C14.5987%205.01813%2013.8398%205.54726%2013.575%205.91C13.4396%206.09538%2013.2482%207.04166%2012.6257%207.11976C12.4626%207.14023%2012.2438%207.12589%2012.012%207.11097C11.3905%207.07058%2010.5402%207.01606%2010.268%207.75495C10.0952%208.2232%2010.0648%209.49445%2010.6239%2010.1543C10.7134%2010.2597%2010.7307%2010.4547%2010.6699%2010.6735C10.59%2010.9608%2010.4286%2011.1356%2010.3783%2011.1717C10.2819%2011.1163%2010.0896%2010.8931%209.95938%2010.7412C9.64554%2010.3765%209.25405%209.92233%208.74797%209.78176C8.56395%209.73083%208.36166%209.68867%208.16548%209.64736C7.6164%209.53227%206.99443%209.40134%206.84992%209.09302C6.74442%208.8672%206.74488%208.55621%206.74529%208.22764C6.74529%207.8112%206.74529%207.34029%206.54129%206.88256C6.46246%206.70541%206.35689%206.56446%206.23509%206.45329ZM12%2022C6.47715%2022%202%2017.5228%202%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012C22%2017.5228%2017.5228%2022%2012%2022Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-file:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M6.9998%206V3C6.9998%202.44772%207.44752%202%207.9998%202H19.9998C20.5521%202%2020.9998%202.44772%2020.9998%203V17C20.9998%2017.5523%2020.5521%2018%2019.9998%2018H16.9998V20.9991C16.9998%2021.5519%2016.5499%2022%2015.993%2022H4.00666C3.45059%2022%203%2021.5554%203%2020.9991L3.0026%207.00087C3.0027%206.44811%203.45264%206%204.00942%206H6.9998ZM5.00242%208L5.00019%2020H14.9998V8H5.00242ZM8.9998%206H16.9998V16H18.9998V4H8.9998V6ZM7%2011H13V13H7V11ZM7%2015H13V17H7V15Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-folder:       url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M2%204C2%203.44772%202.44772%203%203%203H10.4142L12.4142%205H21C21.5523%205%2022%205.44772%2022%206V20C22%2020.5523%2021.5523%2021%2021%2021L3%2021C2.45%2021%202%2020.55%202%2020V4ZM10.5858%206L9.58579%205H4V7H9.58579L10.5858%206ZM4%209V19L20%2019V7H12.4142L10.4142%209H4Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-info:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12%2022C6.47715%2022%202%2017.5228%202%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012C22%2017.5228%2017.5228%2022%2012%2022ZM12%2020C16.4183%2020%2020%2016.4183%2020%2012C20%207.58172%2016.4183%204%2012%204C7.58172%204%204%207.58172%204%2012C4%2016.4183%207.58172%2020%2012%2020ZM11%207H13V9H11V7ZM11%2011H13V17H11V11Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-lightbulb:    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M9.97308%2018H11V13H13V18H14.0269C14.1589%2016.7984%2014.7721%2015.8065%2015.7676%2014.7226C15.8797%2014.6006%2016.5988%2013.8564%2016.6841%2013.7501C17.5318%2012.6931%2018%2011.385%2018%2010C18%206.68629%2015.3137%204%2012%204C8.68629%204%206%206.68629%206%2010C6%2011.3843%206.46774%2012.6917%207.31462%2013.7484C7.40004%2013.855%208.12081%2014.6012%208.23154%2014.7218C9.22766%2015.8064%209.84103%2016.7984%209.97308%2018ZM10%2020V21H14V20H10ZM5.75395%2014.9992C4.65645%2013.6297%204%2011.8915%204%2010C4%205.58172%207.58172%202%2012%202C16.4183%202%2020%205.58172%2020%2010C20%2011.8925%2019.3428%2013.6315%2018.2443%2015.0014C17.624%2015.7748%2016%2017%2016%2018.5V21C16%2022.1046%2015.1046%2023%2014%2023H10C8.89543%2023%208%2022.1046%208%2021V18.5C8%2017%206.37458%2015.7736%205.75395%2014.9992Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-link:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M18.3638%2015.5355L16.9496%2014.1213L18.3638%2012.7071C20.3164%2010.7545%2020.3164%207.58866%2018.3638%205.63604C16.4112%203.68341%2013.2453%203.68341%2011.2927%205.63604L9.87849%207.05025L8.46428%205.63604L9.87849%204.22182C12.6122%201.48815%2017.0443%201.48815%2019.778%204.22182C22.5117%206.95549%2022.5117%2011.3876%2019.778%2014.1213L18.3638%2015.5355ZM15.5353%2018.364L14.1211%2019.7782C11.3875%2022.5118%206.95531%2022.5118%204.22164%2019.7782C1.48797%2017.0445%201.48797%2012.6123%204.22164%209.87868L5.63585%208.46446L7.05007%209.87868L5.63585%2011.2929C3.68323%2013.2455%203.68323%2016.4113%205.63585%2018.364C7.58847%2020.3166%2010.7543%2020.3166%2012.7069%2018.364L14.1211%2016.9497L15.5353%2018.364ZM14.8282%207.75736L16.2425%209.17157L9.17139%2016.2426L7.75717%2014.8284L14.8282%207.75736Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-map-pin:      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12%2020.8995L16.9497%2015.9497C19.6834%2013.2161%2019.6834%208.78392%2016.9497%206.05025C14.2161%203.31658%209.78392%203.31658%207.05025%206.05025C4.31658%208.78392%204.31658%2013.2161%207.05025%2015.9497L12%2020.8995ZM12%2023.7279L5.63604%2017.364C2.12132%2013.8492%202.12132%208.15076%205.63604%204.63604C9.15076%201.12132%2014.8492%201.12132%2018.364%204.63604C21.8787%208.15076%2021.8787%2013.8492%2018.364%2017.364L12%2023.7279ZM12%2013C13.1046%2013%2014%2012.1046%2014%2011C14%209.89543%2013.1046%209%2012%209C10.8954%209%2010%209.89543%2010%2011C10%2012.1046%2010.8954%2013%2012%2013ZM12%2015C9.79086%2015%208%2013.2091%208%2011C8%208.79086%209.79086%207%2012%207C14.2091%207%2016%208.79086%2016%2011C16%2013.2091%2014.2091%2015%2012%2015Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-mic:          url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M11.9998%203C10.3429%203%208.99976%204.34315%208.99976%206V10C8.99976%2011.6569%2010.3429%2013%2011.9998%2013C13.6566%2013%2014.9998%2011.6569%2014.9998%2010V6C14.9998%204.34315%2013.6566%203%2011.9998%203ZM11.9998%201C14.7612%201%2016.9998%203.23858%2016.9998%206V10C16.9998%2012.7614%2014.7612%2015%2011.9998%2015C9.23833%2015%206.99976%2012.7614%206.99976%2010V6C6.99976%203.23858%209.23833%201%2011.9998%201ZM3.05469%2011H5.07065C5.55588%2014.3923%208.47329%2017%2011.9998%2017C15.5262%2017%2018.4436%2014.3923%2018.9289%2011H20.9448C20.4837%2015.1716%2017.1714%2018.4839%2012.9998%2018.9451V23H10.9998V18.9451C6.82814%2018.4839%203.51584%2015.1716%203.05469%2011Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-question:     url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12%2022C6.47715%2022%202%2017.5228%202%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012C22%2017.5228%2017.5228%2022%2012%2022ZM12%2020C16.4183%2020%2020%2016.4183%2020%2012C20%207.58172%2016.4183%204%2012%204C7.58172%204%204%207.58172%204%2012C4%2016.4183%207.58172%2020%2012%2020ZM11%2015H13V17H11V15ZM13%2013.3551V14H11V12.5C11%2011.9477%2011.4477%2011.5%2012%2011.5C12.8284%2011.5%2013.5%2010.8284%2013.5%2010C13.5%209.17157%2012.8284%208.5%2012%208.5C11.2723%208.5%2010.6656%209.01823%2010.5288%209.70577L8.56731%209.31346C8.88637%207.70919%2010.302%206.5%2012%206.5C13.933%206.5%2015.5%208.067%2015.5%2010C15.5%2011.5855%2014.4457%2012.9248%2013%2013.3551Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-star:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12.0006%2018.26L4.94715%2022.2082L6.52248%2014.2799L0.587891%208.7918L8.61493%207.84006L12.0006%200.5L15.3862%207.84006L23.4132%208.7918L17.4787%2014.2799L19.054%2022.2082L12.0006%2018.26ZM12.0006%2015.968L16.2473%2018.3451L15.2988%2013.5717L18.8719%2010.2674L14.039%209.69434L12.0006%205.27502L9.96214%209.69434L5.12921%2010.2674L8.70231%2013.5717L7.75383%2018.3451L12.0006%2015.968Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-team:         url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12%2011C14.7614%2011%2017%2013.2386%2017%2016V22H15V16C15%2014.4023%2013.7511%2013.0963%2012.1763%2013.0051L12%2013C10.4023%2013%209.09634%2014.2489%209.00509%2015.8237L9%2016V22H7V16C7%2013.2386%209.23858%2011%2012%2011ZM5.5%2014C5.77885%2014%206.05009%2014.0326%206.3101%2014.0942C6.14202%2014.594%206.03873%2015.122%206.00896%2015.6693L6%2016L6.0007%2016.0856C5.88757%2016.0456%205.76821%2016.0187%205.64446%2016.0069L5.5%2016C4.7203%2016%204.07955%2016.5949%204.00687%2017.3555L4%2017.5V22H2V17.5C2%2015.567%203.567%2014%205.5%2014ZM18.5%2014C20.433%2014%2022%2015.567%2022%2017.5V22H20V17.5C20%2016.7203%2019.4051%2016.0796%2018.6445%2016.0069L18.5%2016C18.3248%2016%2018.1566%2016.03%2018.0003%2016.0852L18%2016C18%2015.3343%2017.8916%2014.694%2017.6915%2014.0956C17.9499%2014.0326%2018.2211%2014%2018.5%2014ZM5.5%208C6.88071%208%208%209.11929%208%2010.5C8%2011.8807%206.88071%2013%205.5%2013C4.11929%2013%203%2011.8807%203%2010.5C3%209.11929%204.11929%208%205.5%208ZM18.5%208C19.8807%208%2021%209.11929%2021%2010.5C21%2011.8807%2019.8807%2013%2018.5%2013C17.1193%2013%2016%2011.8807%2016%2010.5C16%209.11929%2017.1193%208%2018.5%208ZM5.5%2010C5.22386%2010%205%2010.2239%205%2010.5C5%2010.7761%205.22386%2011%205.5%2011C5.77614%2011%206%2010.7761%206%2010.5C6%2010.2239%205.77614%2010%205.5%2010ZM18.5%2010C18.2239%2010%2018%2010.2239%2018%2010.5C18%2010.7761%2018.2239%2011%2018.5%2011C18.7761%2011%2019%2010.7761%2019%2010.5C19%2010.2239%2018.7761%2010%2018.5%2010ZM12%202C14.2091%202%2016%203.79086%2016%206C16%208.20914%2014.2091%2010%2012%2010C9.79086%2010%208%208.20914%208%206C8%203.79086%209.79086%202%2012%202ZM12%204C10.8954%204%2010%204.89543%2010%206C10%207.10457%2010.8954%208%2012%208C13.1046%208%2014%207.10457%2014%206C14%204.89543%2013.1046%204%2012%204Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-terminal:     url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M10.9999%2012L3.92886%2019.0711L2.51465%2017.6569L8.1715%2012L2.51465%206.34317L3.92886%204.92896L10.9999%2012ZM10.9999%2019H20.9999V21H10.9999V19Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-tools:        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M5.32943%203.27158C6.56252%202.8332%207.9923%203.10749%208.97927%204.09446C10.1002%205.21537%2010.3019%206.90741%209.5843%208.23385L20.293%2018.9437L18.8788%2020.3579L8.16982%209.64875C6.84325%2010.3669%205.15069%2010.1654%204.02952%209.04421C3.04227%208.05696%202.7681%206.62665%203.20701%205.39332L5.44373%207.63C6.02952%208.21578%206.97927%208.21578%207.56505%207.63C8.15084%207.04421%208.15084%206.09446%207.56505%205.50868L5.32943%203.27158ZM15.6968%205.15512L18.8788%203.38736L20.293%204.80157L18.5252%207.98355L16.7574%208.3371L14.6361%2010.4584L13.2219%209.04421L15.3432%206.92289L15.6968%205.15512ZM8.97927%2013.2868L10.3935%2014.7011L5.09018%2020.0044C4.69966%2020.3949%204.06649%2020.3949%203.67597%2020.0044C3.31334%2019.6417%203.28744%2019.0699%203.59826%2018.6774L3.67597%2018.5902L8.97927%2013.2868Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-icon-video:        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M2%203.9934C2%203.44476%202.45531%203%202.9918%203H21.0082C21.556%203%2022%203.44495%2022%203.9934V20.0066C22%2020.5552%2021.5447%2021%2021.0082%2021H2.9918C2.44405%2021%202%2020.5551%202%2020.0066V3.9934ZM4%205V19H20V5H4ZM10.6219%208.41459L15.5008%2011.6672C15.6846%2011.7897%2015.7343%2012.0381%2015.6117%2012.2219C15.5824%2012.2658%2015.5447%2012.3035%2015.5008%2012.3328L10.6219%2015.5854C10.4381%2015.708%2010.1897%2015.6583%2010.0672%2015.4745C10.0234%2015.4088%2010%2015.3316%2010%2015.2526V8.74741C10%208.52649%2010.1791%208.34741%2010.4%208.34741C10.479%208.34741%2010.5562%208.37078%2010.6219%208.41459Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --mines-static-exclamation-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 22 22'%3E%3Cpath d='M 12,15 C 9.5,11 9,7 10.5,5.5 C 11,4 13,4 13.5,5.5 C 15,7 14.5,11 12,15 Z' fill='black'/%3E%3Ccircle cx='12' cy='17.5' r='1.5' fill='black'/%3E%3C/svg%3E");
  --mines-static-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 22 22'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='1.75'/%3E%3Cline x1='12' y1='11' x2='12' y2='16' stroke='black' stroke-width='1.75' stroke-linecap='round'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --mines-static-discussion-icon:  url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2252px%22%20height%3D%2249px%22%20viewBox%3D%220%200%2052%2049%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Ctitle%3E_x32_%3C%2Ftitle%3E%0A%20%20%20%20%3Cg%20id%3D%22Version-3%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%28-923%2C%20-4%29%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22_x32_%22%20transform%3D%22translate%28923%2C%204%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M44.9452029%2C6.07794883%20C40.3912592%2C2.24003392%2033.8801121%2C-0.00181919412%2025.9191657%2C1.10765741e-06%20C18.3631475%2C1.10765741e-06%2011.9132423%2C2.12305887%207.29907235%2C5.91058141%20C4.99442485%2C7.80140819%203.15960369%2C10.1090345%201.91018656%2C12.7335862%20C0.659956926%2C15.3572273%20-0.00100931451%2C18.2910141%203.14787212e-06%2C21.4057277%20C-0.00182181142%2C25.1713934%200.789854871%2C28.6494785%202.38783318%2C31.6842524%20C3.9112649%2C34.5847479%206.17589692%2C37.0513429%209.06036254%2C38.9803181%20C8.37837294%2C41.8408437%207.42033751%2C45.9290002%207.42033751%2C45.9309228%20C7.37646268%2C46.1145817%207.35350964%2C46.3059311%207.35452526%2C46.5000125%20C7.35259558%2C47.2680407%207.71263328%2C48.0073311%208.33642779%2C48.484136%20L8.34028715%2C48.4869693%20L8.3412012%2C48.4879812%20C8.78827763%2C48.8267636%209.32696309%2C49.0000011%209.86463292%2C49.0000011%20C10.2695611%2C49.0000011%2010.6802783%2C48.9019474%2011.0508784%2C48.70311%20L11.0881517%2C48.6840864%20L11.1244094%2C48.6622295%20C11.125425%2C48.6612176%2011.6392277%2C48.3576491%2012.4300919%2C47.891368%20C13.6154234%2C47.1928569%2015.4195728%2C46.1299625%2017.0299417%2C45.1850551%20C17.834212%2C44.7130061%2018.5905451%2C44.2705045%2019.1952459%2C43.919377%20C19.7960874%2C43.5692614%2020.2593122%2C43.3017163%2020.4302413%2C43.2076101%20L20.438874%2C43.2028542%20L20.4503505%2C43.1961757%20C22.6948733%2C41.9286762%2024.4827727%2C41.7154699%2025.9193689%2C41.7078807%20C31.8802525%2C41.6992796%2038.2299159%2C40.5478444%2043.2996935%2C37.3951847%20C45.8279808%2C35.8164263%2048.0285271%2C33.7105719%2049.5768415%2C31.0145804%20C51.1278982%2C28.3205114%2052.0027542%2C25.0592754%2051.9999554%2C21.2841992%20C52.0121995%2C15.3467036%2049.5031074%2C9.90635193%2044.9452029%2C6.07794883%20Z%20M46.1812138%2C29.0777124%20C45.2862485%2C30.6335007%2044.1123935%2C31.9429939%2042.7045395%2C33.0526378%20C40.5946881%2C34.7150799%2037.9451357%2C35.9150861%2035.0387327%2C36.6887809%20C32.1342593%2C37.4642972%2028.981365%2C37.81077%2025.9192673%2C37.8097581%20C24.0386416%2C37.8021689%2021.4120422%2C38.155219%2018.5295063%2C39.8014708%20L18.5295063%2C39.8005601%20C18.2106012%2C39.9775405%2017.5008852%2C40.3896853%2016.5647872%2C40.9358049%20C15.2219329%2C41.7209342%2013.4549552%2C42.7591383%2011.9792577%2C43.628862%20C12.3392954%2C42.1015078%2012.7567157%2C40.3325132%2013.0690192%2C39.0335437%20L13.0690192%2C39.0316211%20C13.1207143%2C38.8146709%2013.1577845%2C38.5795065%2013.1588001%2C38.3121639%20C13.1625579%2C37.9353342%2013.0651598%2C37.4757316%2012.8464966%2C37.0932353%20C12.6850128%2C36.8066667%2012.4769121%2C36.5812165%2012.2944049%2C36.4271049%20C12.016531%2C36.1958869%2011.807313%2C36.0959117%2011.6907197%2C36.0321623%20L11.5732124%2C35.9722581%20L11.5599077%2C35.9645677%20C9.00501118%2C34.3248933%207.12621363%2C32.2884548%205.85303096%2C29.8740736%20C4.58177798%2C27.4560496%203.91319458%2C24.6344819%203.91217896%2C21.4056266%20C3.91319458%2C18.8353124%204.44995035%2C16.4953055%205.44424345%2C14.4045282%20C6.93903465%2C11.2737255%209.47300941%2C8.67679845%2012.9381056%2C6.82584034%20C16.4004597%2C4.97872742%2020.7988102%2C3.89772011%2025.9191657%2C3.89772011%20C33.158107%2C3.89964271%2038.7091875%2C5.92464675%2042.4179312%2C9.05352692%20C46.1219015%2C12.1929308%2048.0751441%2C16.4200205%2048.0875347%2C21.2836932%20C48.0847925%2C24.4718704%2047.370303%2C27.0022148%2046.1812138%2C29.0777124%20Z%22%20id%3D%22Shape%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --mines-static-reflection-icon: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2259px%22%20height%3D%2253px%22%20viewBox%3D%220%200%2059%2053%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Ctitle%3EShape%3C%2Ftitle%3E%0A%20%20%20%20%3Cg%20id%3D%22Version-3%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%28-925%2C%20-7%29%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M975.426832%2C31.968707%20C978.927489%2C36.2928239%20978.859471%2C42.5198723%20975.265207%2C46.765331%20C971.670944%2C51.0107898%20965.578108%2C52.0607964%20960.787497%2C49.2603418%20C956.552618%2C54.7683891%20949.309343%2C56.9529923%20942.766867%2C54.6954417%20C936.224391%2C52.4378911%20931.831564%2C46.2381273%20931.8379%2C39.2709766%20C931.8379%2C38.839122%20931.872539%2C38.4203538%20931.902848%2C37.9972235%20C927.095509%2C34.6105124%20924.486154%2C28.8661648%20925.084563%2C22.9871517%20C925.682971%2C17.1081385%20929.395252%2C12.0168843%20934.784811%2C9.6836231%20C940.174371%2C7.35036192%20946.39558%2C8.14118534%20951.040931%2C11.7500573%20C956.80381%2C5.8707794%20966.06601%2C5.38938455%20972.398825%2C10.6399992%20C978.73164%2C15.8906138%20980.044785%2C25.1401566%20975.426832%2C31.968707%20L975.426832%2C31.968707%20Z%20M943.238482%2C30.8127324%20C943.316538%2C29.830279%20942.980147%2C28.8601541%20942.311842%2C28.1403751%20C941.643538%2C27.4205961%20940.705163%2C27.0177713%20939.726947%2C27.0307326%20C938.741636%2C27.0126538%20937.793919%2C27.4114993%20937.114159%2C28.1303211%20C936.434398%2C28.8491428%20936.084844%2C29.8221139%20936.150463%2C30.8127324%20C936.070672%2C32.1399118%20936.728165%2C33.4021629%20937.857582%2C34.0900515%20C938.986999%2C34.7779401%20940.401946%2C34.7779401%20941.531363%2C34.0900515%20C942.66078%2C33.4021629%20943.318273%2C32.1399118%20943.238482%2C30.8127324%20L943.238482%2C30.8127324%20Z%20M955.561329%2C30.8127324%20C955.640756%2C29.829948%20955.30483%2C28.8590281%20954.636226%2C28.1389269%20C953.967622%2C27.4188258%20953.028429%2C27.0164151%20952.049794%2C27.0307326%20C951.065229%2C27.0138896%20950.118671%2C27.4132762%20949.439872%2C28.1319517%20C948.761072%2C28.8506273%20948.412093%2C29.8228842%20948.47764%2C30.8127324%20C948.384964%2C32.1471052%20949.039037%2C33.4220698%20950.17312%2C34.1176785%20C951.307204%2C34.8132872%20952.731765%2C34.8132872%20953.865848%2C34.1176785%20C954.999932%2C33.4220698%20955.654005%2C32.1471052%20955.561329%2C30.8127324%20L955.561329%2C30.8127324%20Z%20M967.888505%2C30.8127324%20C967.968014%2C29.82918%20967.631517%2C28.8575409%20966.961949%2C28.1372905%20C966.292382%2C27.41704%20965.352024%2C27.0151719%20964.372641%2C27.0307326%20C963.388076%2C27.0138896%20962.441518%2C27.4132762%20961.762719%2C28.1319517%20C961.083919%2C28.8506273%20960.73494%2C29.8228842%20960.800487%2C30.8127324%20C960.720696%2C32.1399118%20961.378188%2C33.4021629%20962.507605%2C34.0900515%20C963.637022%2C34.7779401%20965.05197%2C34.7779401%20966.181387%2C34.0900515%20C967.310804%2C33.4021629%20967.968296%2C32.1399118%20967.888505%2C30.8127324%20L967.888505%2C30.8127324%20Z%20M979.059604%2C60%20C976.331098%2C60%20974.119207%2C57.7716165%20974.119207%2C55.0227661%20C974.119207%2C52.2739157%20976.331098%2C50.0455321%20979.059604%2C50.0455321%20C981.788109%2C50.0455321%20984%2C52.2739157%20984%2C55.0227661%20C984%2C57.7699138%20981.790748%2C59.9975923%20979.063933%2C60%20L979.059604%2C60%20Z%22%20id%3D%22Shape%22%20transform%3D%22translate%28954.5%2C%2033.5%29%20scale%28-1%2C%201%29%20translate%28-954.5%2C%20-33.5%29%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");

  /* --- Border Widths --- */
  --mines-border-sm: 1px;
  --mines-border-md: 2px;
  --mines-border-lg: 3px;
  --mines-border-xl: 5px;

  /* --- Table --- */
  --mines-table-border:  #D0D0D0; /* cell and outer border color */
  --mines-table-radius:  5px;     /* border radius when mines-table-rounded is applied */

  /* --- Numbered List (Accent) --- */
  --mines-nl-num-w:          2rem;    /* width reserved for the counter number */
  --mines-nl-bar-w:          3px;     /* width of the accent bar */
  --mines-nl-gap:            0.75rem; /* gap between number, bar, and content */
  --mines-nl-gap-between:    1rem;    /* vertical gap between list items */
  --mines-nl-num-h:          2.2rem;  /* rendered height of the number (2rem × 1.1 line-height) */
  --mines-nl-center-offset:  0.5rem;  /* padding-top on text-only items to vertically center number with first text line */

  /* --- Flag Box --- */
  --mines-flag-h:        2.25rem; /* matches flag line-height + padding — update if flag font-size is overridden */
  --mines-flag-overhang: 1rem;    /* how far the flag extends past the box's left edge */
  --mines-flag-fold-w:   1rem;    /* fold triangle width */
  --mines-flag-fold-h:   0.5rem;  /* fold triangle height */
  --mines-flag-radius:   10px;    /* border radius when mines-flag-rounded is applied */

  

}

/* #endregion */

/* #region GLOBAL TI OVERRIDES ==================================== */

/* ============================================================
   GLOBAL TI OVERRIDES
   ============================================================ */

/* TI wraps buttons and images in <p> tags and adds margin/padding */
p:has(> .btn),
p:has(> img) {
  margin-bottom: 0;
  padding: 0;
}

/* TI adds excess left padding to all lists */
.editor-content ul,
.editor-content ol {
  padding-left: 0;
}

/* Suppress background/text-color when mines-bg- classes are used on <ul> for bullet color */
ul[class*="mines-bg-"] {
  background-color: transparent;
  color: inherit;
}

/* TI applies asymmetric padding to the main content body — normalize to equal sides */
.topic__text__body {
  padding: 0 2em;
}

/* #endregion */

/* #region GLOBAL UTILITIES ======================================= */

/* #region BACKGROUND COLOR UTILITIES ============================= */

/* ============================================================
   BACKGROUND COLOR UTILITIES
   Each class sets background-color and a default text color
   that meets ADA AAA contrast. Text color can be overridden.
   ============================================================ */

/* --- Main Colors --- */
.mines-bg-primary {
  background-color: var(--mines-primary);
  color: var(--mines-primary-contrast);
}

.mines-bg-secondary-1 {
  background-color: var(--mines-secondary-1);
  color: var(--mines-secondary-1-contrast);
}

.mines-bg-secondary-2 {
  background-color: var(--mines-secondary-2);
  color: var(--mines-secondary-2-contrast);
}

.mines-bg-gray {
  background-color: var(--mines-gray);
  color: var(--mines-gray-contrast);
}

/* --- Accent Colors (ADA compliant versions used automatically) --- */
.mines-bg-accent-1 {
  background-color: var(--mines-accent-1-ADA);
  color: var(--mines-accent-1-ADA-contrast);
}

.mines-bg-accent-2 {
  background-color: var(--mines-accent-2-ADA);
  color: var(--mines-accent-2-ADA-contrast);
}

/* --- Background Colors --- */
.mines-bg-1 {
  background-color: var(--mines-background-1);
  color: var(--mines-background-1-contrast);
}

.mines-bg-2 {
  background-color: var(--mines-background-2);
  color: var(--mines-background-2-contrast);
}

.mines-bg-a {
  background-color: var(--mines-background-A);
  color: var(--mines-background-A-contrast);
}

.mines-bg-b {
  background-color: var(--mines-background-B);
  color: var(--mines-background-B-contrast);
}

.mines-bg-c {
  background-color: var(--mines-background-C);
  color: var(--mines-background-C-contrast);
}

.mines-bg-d {
  background-color: var(--mines-background-D);
  color: var(--mines-background-D-contrast);
}

.mines-bg-white {
  background-color: white;
  color: #656565;
}

.mines-bg-transparent {
  background-color: transparent;
}

/* #endregion */

/* #region FONT SIZE UTILITIES ==================================== */

/* ============================================================
   FONT SIZE UTILITIES
   Class name = rem value without the decimal point.
   Example: mines-text-14 = 1.4rem | Range: 0.8rem – 2.5rem

   Note: on <ol class="mines-color-*">, font-size: inherit suppresses
   the size cascade to list item text. Scoped ol.mines-text-* rules
   in the Ordered Lists section take over instead, setting
   --mines-ol-size and --mines-ol-bg-size as custom properties.
   ============================================================ */

.mines-text-07 {
  font-size: 0.7rem !important;
}

.mines-text-08 {
  font-size: 0.8rem !important;
}

.mines-text-09 {
  font-size: 0.9rem !important;
}

.mines-text-10 {
  font-size: 1.0rem !important;
}

.mines-text-11 {
  font-size: 1.1rem !important;
}

.mines-text-12 {
  font-size: 1.2rem !important;
}

.mines-text-13 {
  font-size: 1.3rem !important;
}

.mines-text-14 {
  font-size: 1.4rem !important;
}

.mines-text-15 {
  font-size: 1.5rem !important;
}

.mines-text-16 {
  font-size: 1.6rem !important;
}

.mines-text-17 {
  font-size: 1.7rem !important;
}

.mines-text-175 {
  font-size: 1.75rem !important;
}

.mines-text-18 {
  font-size: 1.8rem !important;
}

.mines-text-19 {
  font-size: 1.9rem !important;
}

.mines-text-20 {
  font-size: 2.0rem !important;
}

.mines-text-21 {
  font-size: 2.1rem !important;
}

.mines-text-22 {
  font-size: 2.2rem !important;
}

.mines-text-23 {
  font-size: 2.3rem !important;
}

.mines-text-24 {
  font-size: 2.4rem !important;
}

.mines-text-25 {
  font-size: 2.5rem !important;
}

/* #endregion */

/* #region BORDER UTILITIES ======================================= */

/* ============================================================
   BORDER UTILITIES
   Usage: combine a color class with optional width, side,
   and/or radius classes.
   Example: <div class="mines-border-primary mines-border-lg mines-rounded-sm">
   Default border width is 2px (medium).
   ============================================================ */

/* --- Global Default (applies to all mines-border- classes) --- */
[class*="mines-border-"] {
  border-style: solid;
}

/* --- Primary --- */
.mines-border-primary-sm {
  border-color: var(--mines-primary);
  border-width: var(--mines-border-sm);
}

.mines-border-primary-md {
  border-color: var(--mines-primary);
  border-width: var(--mines-border-md);
}

.mines-border-primary-lg {
  border-color: var(--mines-primary);
  border-width: var(--mines-border-lg);
}

.mines-border-primary-xl {
  border-color: var(--mines-primary);
  border-width: var(--mines-border-xl);
}

/* --- Secondary 1 --- */
.mines-border-secondary-1-sm {
  border-color: var(--mines-secondary-1);
  border-width: var(--mines-border-sm);
}

.mines-border-secondary-1-md {
  border-color: var(--mines-secondary-1);
  border-width: var(--mines-border-md);
}

.mines-border-secondary-1-lg {
  border-color: var(--mines-secondary-1);
  border-width: var(--mines-border-lg);
}

.mines-border-secondary-1-xl {
  border-color: var(--mines-secondary-1);
  border-width: var(--mines-border-xl);
}

/* --- Secondary 2 --- */
.mines-border-secondary-2-sm {
  border-color: var(--mines-secondary-2);
  border-width: var(--mines-border-sm);
}

.mines-border-secondary-2-md {
  border-color: var(--mines-secondary-2);
  border-width: var(--mines-border-md);
}

.mines-border-secondary-2-lg {
  border-color: var(--mines-secondary-2);
  border-width: var(--mines-border-lg);
}

.mines-border-secondary-2-xl {
  border-color: var(--mines-secondary-2);
  border-width: var(--mines-border-xl);
}

/* --- Accent 1 --- */
.mines-border-accent-1-sm {
  border-color: var(--mines-accent-1);
  border-width: var(--mines-border-sm);
}

.mines-border-accent-1-md {
  border-color: var(--mines-accent-1);
  border-width: var(--mines-border-md);
}

.mines-border-accent-1-lg {
  border-color: var(--mines-accent-1);
  border-width: var(--mines-border-lg);
}

.mines-border-accent-1-xl {
  border-color: var(--mines-accent-1);
  border-width: var(--mines-border-xl);
}

/* --- Accent 2 --- */
.mines-border-accent-2-sm {
  border-color: var(--mines-accent-2);
  border-width: var(--mines-border-sm);
}

.mines-border-accent-2-md {
  border-color: var(--mines-accent-2);
  border-width: var(--mines-border-md);
}

.mines-border-accent-2-lg {
  border-color: var(--mines-accent-2);
  border-width: var(--mines-border-lg);
}

.mines-border-accent-2-xl {
  border-color: var(--mines-accent-2);
  border-width: var(--mines-border-xl);
}

/* --- Gray --- */
.mines-border-gray-sm {
  border-color: var(--mines-gray);
  border-width: var(--mines-border-sm);
}

.mines-border-gray-md {
  border-color: var(--mines-gray);
  border-width: var(--mines-border-md);
}

.mines-border-gray-lg {
  border-color: var(--mines-gray);
  border-width: var(--mines-border-lg);
}

.mines-border-gray-xl {
  border-color: var(--mines-gray);
  border-width: var(--mines-border-xl);
}

/* --- Sides --- */
.mines-border-top-only {
  border-right: none;
  border-bottom: none;
  border-left: none;
}

.mines-border-left-only {
  border-top: none;
  border-right: none;
  border-bottom: none;
}

/* --- Border Radius --- */
.mines-rounded-sm {
  border-radius: 5px;
}

.mines-rounded-md {
  border-radius: 12px;
}

.mines-rounded-lg {
  border-radius: 25px;
}

.mines-rounded-xl {
  border-radius: 50px;
}

.mines-rounded-full {
  border-radius: 999px;
}

/* --- Box Shadow --- */
.mines-shadow {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

/* --- Image Frame --- */
img.mines-img-frame {
  display: block;
  max-width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--mines-background-C);
  background-color: white;
  box-sizing: border-box;
}

/* #endregion */

/* #region BUTTON UTILITIES ======================================= */

/* ============================================================
   BUTTON UTILITIES
   Base class resets TI's default button styles.
   Layer background, border, and text size classes on top.
   Example: <a class="btn mines-btn mines-btn-centered mines-bg-primary mines-text-12">
   ============================================================ */

/* --- Base (includes all TI .btn styles so it works standalone) --- */
/* Color is set by pairing with a mines-bg-* class — e.g. mines-btn mines-bg-primary */
.mines-btn {
  appearance: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0 0 1rem;
  padding: 0.75em 2em;
  position: relative; /* retained from TI — may be needed for z-index stacking */
  text-align: center;
  text-decoration: none;
  transition: background-color 0.25s ease-in-out,
              border-color 0.25s ease-in-out,
              color 0.25s ease-in-out,
              opacity 0.25s ease-in-out;
}

/* --- Focus state for keyboard navigation (ADA) --- */
.mines-btn:focus-visible {
  outline: 3px solid var(--mines-primary);
  outline-offset: 2px;
}

/* --- Shared: Block Display for Alignment Classes --- */
.mines-btn-left,
.mines-btn-centered,
.mines-btn-right {
  display: block;
  width: fit-content;
}

/* --- Alignment --- */
.mines-btn-left {
  margin-right: auto;
}

.mines-btn-centered {
  margin: 0 auto;
}

.mines-btn-right {
  margin-left: auto;
}

/* --- Full Width --- */
.mines-btn-expanded {
  display: block;
  width: 100%;
}

/* --- Outline / Inverse --- */
/* Wins over mines-bg-* (specificity 0,2,0 vs 0,1,0) so background and color override correctly */
.mines-btn.mines-btn-outline {
  background-color: white;
  border-width: 2px;
  border-style: solid;
}
/* Dark colors meet AAA on white — use them for text too */
.mines-btn.mines-btn-outline.mines-bg-primary     { border-color: var(--mines-primary);     color: var(--mines-primary); }
.mines-btn.mines-btn-outline.mines-bg-secondary-1 { border-color: var(--mines-secondary-1); color: var(--mines-secondary-1); }
.mines-btn.mines-btn-outline.mines-bg-secondary-2 { border-color: var(--mines-secondary-2); color: var(--mines-secondary-2); }
.mines-btn.mines-btn-outline.mines-bg-gray        { border-color: var(--mines-gray);        color: var(--mines-gray); }
/* Accent colors are too light to meet AAA as text on white — border uses element color, text falls back to #333333 */
.mines-btn.mines-btn-outline.mines-bg-accent-1    { border-color: var(--mines-accent-1);    color: #333333; }
.mines-btn.mines-btn-outline.mines-bg-accent-2    { border-color: var(--mines-accent-2);    color: #333333; }

/* --- Transparent variant — overrides mines-btn-outline's white background --- */
.mines-btn.mines-bg-transparent { background-color: transparent; }

/* --- Mobile: Stack All Positioned Buttons to Full Width --- */
@media (max-width: 768px) {
  .mines-btn-left,
  .mines-btn-centered,
  .mines-btn-right {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* #endregion */

/* #region TEXT FORMATTING UTILITIES ============================== */

/* ============================================================
   TEXT FORMATTING UTILITIES
   Can be applied to p, h1–h6, div, or span tags.
   Multiple classes can be combined on the same element.
   ============================================================ */

.mines-text-caps {
  text-transform: uppercase;
}

.mines-text-italic {
  font-style: italic;
}

.mines-text-underline {
  text-decoration: underline;
}

.mines-text-normal {
  font-weight: 400;
}

.mines-text-bold {
  font-weight: 700;
}

.mines-text-center {
  text-align: center;
}

.mines-text-right {
  text-align: right;
}

.mines-text-left {
  text-align: left;
}

/* #endregion */

/* #region TEXT COLOR UTILITIES =================================== */

/* ============================================================
   TEXT COLOR UTILITIES
   Only colors approved for text use are included here.
   Accent, ADA, and background-only colors are excluded.
   ============================================================ */

.mines-color-primary {
  color: var(--mines-primary);
}

.mines-color-secondary-1 {
  color: var(--mines-secondary-1);
}

.mines-color-secondary-2 {
  color: var(--mines-secondary-2);
}

.mines-color-gray {
  color: var(--mines-gray);
}

.mines-color-callout-a {
  color: var(--mines-callout-A);
}

.mines-color-callout-b {
  color: var(--mines-callout-B);
}

.mines-color-white {
  color: white;
}

.mines-color-black {
  color: black;
}

/* #endregion */

/* #region PADDING UTILITIES ====================================== */

/* ============================================================
   PADDING UTILITIES
   Each class is self-contained — one class sets both the
   direction and size. Sizes are controlled via root variables.
   ============================================================ */

/* --- All Sides --- */
.mines-padding-sm {
  padding: var(--mines-padding-sm);
}

.mines-padding-md {
  padding: var(--mines-padding-md);
}

.mines-padding-lg {
  padding: var(--mines-padding-lg);
}

.mines-padding-xl {
  padding: var(--mines-padding-xl);
}

.mines-padding-none {
  padding: 0;
}

/* --- Top --- */
.mines-padding-top-sm {
  padding-top: var(--mines-padding-sm);
}

.mines-padding-top-md {
  padding-top: var(--mines-padding-md);
}

.mines-padding-top-lg {
  padding-top: var(--mines-padding-lg);
}

.mines-padding-top-xl {
  padding-top: var(--mines-padding-xl);
}

.mines-padding-top-none {
  padding-top: 0;
}

/* --- Bottom --- */
.mines-padding-bottom-sm {
  padding-bottom: var(--mines-padding-sm);
}

.mines-padding-bottom-md {
  padding-bottom: var(--mines-padding-md);
}

.mines-padding-bottom-lg {
  padding-bottom: var(--mines-padding-lg);
}

.mines-padding-bottom-xl {
  padding-bottom: var(--mines-padding-xl);
}

.mines-padding-bottom-none {
  padding-bottom: 0;
}

/* --- Horizontal / horiz (Left & Right) --- */
.mines-padding-horiz-sm {
  padding-left: var(--mines-padding-sm);
  padding-right: var(--mines-padding-sm);
}

.mines-padding-horiz-md {
  padding-left: var(--mines-padding-md);
  padding-right: var(--mines-padding-md);
}

.mines-padding-horiz-lg {
  padding-left: var(--mines-padding-lg);
  padding-right: var(--mines-padding-lg);
}

.mines-padding-horiz-xl {
  padding-left: var(--mines-padding-xl);
  padding-right: var(--mines-padding-xl);
}

.mines-padding-horiz-none {
  padding-left: 0;
  padding-right: 0;
}

/* --- Vertical / vert (Top & Bottom) --- */
.mines-padding-vert-sm {
  padding-top: var(--mines-padding-sm);
  padding-bottom: var(--mines-padding-sm);
}

.mines-padding-vert-md {
  padding-top: var(--mines-padding-md);
  padding-bottom: var(--mines-padding-md);
}

.mines-padding-vert-lg {
  padding-top: var(--mines-padding-lg);
  padding-bottom: var(--mines-padding-lg);
}

.mines-padding-vert-xl {
  padding-top: var(--mines-padding-xl);
  padding-bottom: var(--mines-padding-xl);
}

.mines-padding-vert-none {
  padding-top: 0;
  padding-bottom: 0;
}

/* #endregion */

/* #region MARGIN UTILITIES ======================================= */

/* ============================================================
   MARGIN UTILITIES
   Each class is self-contained — one class sets both the
   direction and size. Sizes are controlled via root variables.
   ============================================================ */

/* --- All Sides --- */
.mines-margin-sm {
  margin: var(--mines-margin-sm);
}

.mines-margin-md {
  margin: var(--mines-margin-md);
}

.mines-margin-lg {
  margin: var(--mines-margin-lg);
}

.mines-margin-xl {
  margin: var(--mines-margin-xl);
}

.mines-margin-none {
  margin: 0;
}

/* --- Top --- */
.mines-margin-top-sm {
  margin-top: var(--mines-margin-sm);
}

.mines-margin-top-md {
  margin-top: var(--mines-margin-md);
}

.mines-margin-top-lg {
  margin-top: var(--mines-margin-lg);
}

.mines-margin-top-xl {
  margin-top: var(--mines-margin-xl);
}

.mines-margin-top-none {
  margin-top: 0;
}

/* --- Bottom --- */
.mines-margin-bottom-sm {
  margin-bottom: var(--mines-margin-sm);
}

.mines-margin-bottom-md {
  margin-bottom: var(--mines-margin-md);
}

.mines-margin-bottom-lg {
  margin-bottom: var(--mines-margin-lg);
}

.mines-margin-bottom-xl {
  margin-bottom: var(--mines-margin-xl);
}

.mines-margin-bottom-none {
  margin-bottom: 0;
}

/* --- Horizontal / horiz (Left & Right) --- */
.mines-margin-horiz-sm {
  margin-left: var(--mines-margin-sm);
  margin-right: var(--mines-margin-sm);
}

.mines-margin-horiz-md {
  margin-left: var(--mines-margin-md);
  margin-right: var(--mines-margin-md);
}

.mines-margin-horiz-lg {
  margin-left: var(--mines-margin-lg);
  margin-right: var(--mines-margin-lg);
}

.mines-margin-horiz-xl {
  margin-left: var(--mines-margin-xl);
  margin-right: var(--mines-margin-xl);
}

.mines-margin-horiz-none {
  margin-left: 0;
  margin-right: 0;
}

/* --- Vertical / vert (Top & Bottom) --- */
.mines-margin-vert-sm {
  margin-top: var(--mines-margin-sm);
  margin-bottom: var(--mines-margin-sm);
}

.mines-margin-vert-md {
  margin-top: var(--mines-margin-md);
  margin-bottom: var(--mines-margin-md);
}

.mines-margin-vert-lg {
  margin-top: var(--mines-margin-lg);
  margin-bottom: var(--mines-margin-lg);
}

.mines-margin-vert-xl {
  margin-top: var(--mines-margin-xl);
  margin-bottom: var(--mines-margin-xl);
}

.mines-margin-vert-none {
  margin-top: 0;
  margin-bottom: 0;
}

/* --- Mobile: Scale All Spacing Sizes Down --- */
@media (max-width: 768px) {
  :root {
    --mines-padding-sm: 0.25rem;
    --mines-padding-md: 0.5rem;
    --mines-padding-lg: 1rem;
    --mines-padding-xl: 1.5rem;
    --mines-margin-sm: 0.25rem;
    --mines-margin-md: 0.5rem;
    --mines-margin-lg: 1rem;
    --mines-margin-xl: 1.5rem;
  }
}

/* #endregion */

/* #region HR UTILITIES =========================================== */

/* ============================================================
   HR UTILITIES
   Usage: combine a color class with an optional size class.
   Example: <hr class="mines-hr-primary mines-hr-3px">
   Default thickness is 2px.
   ============================================================ */

/* --- Global Reset and Default Size (applies to all mines hr classes) --- */
hr[class*="mines-hr-"] {
  border: none;
  border-top-width: 2px;
  border-top-style: solid;
}

/* --- Colors --- */
hr.mines-hr-primary {
  border-top-color: var(--mines-primary);
}

hr.mines-hr-secondary-1 {
  border-top-color: var(--mines-secondary-1);
}

hr.mines-hr-secondary-2 {
  border-top-color: var(--mines-secondary-2);
}

hr.mines-hr-accent-1 {
  border-top-color: var(--mines-accent-1);
}

hr.mines-hr-accent-2 {
  border-top-color: var(--mines-accent-2);
}

/* --- Size Overrides --- */
hr.mines-hr-1px {
  border-top-width: 1px;
}

hr.mines-hr-3px {
  border-top-width: 3px;
}

hr.mines-hr-4px {
  border-top-width: 4px;
}

hr.mines-hr-5px {
  border-top-width: 5px;
}

/* #endregion */

/* #region ICON MASK UTILITY ====================================== */

/* ============================================================
   ICON MASK UTILITY
   Renders an SVG icon via mask-image so its color is controlled
   by background-color. Pair with a mines-bg-* class for color
   and a mines-icon-* class for the icon shape.
   Example: <span class="mines-icon-mask mines-icon-alert mines-bg-primary" aria-hidden="true">
   ============================================================ */

.mines-icon-mask {
  display: block;
  flex-shrink: 0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* #endregion */

/* #region FLOAT UTILITIES ======================================== */

/* ============================================================
   FLOAT UTILITIES
   Add a direction class and a width class to any element.
   Example: <div class="mines-float-right mines-float-30">
   Direction class sets float, margins, and reads the width variable.
   Width class sets the variable (default 30% if omitted).
   ============================================================ */

/* --- Direction --- */
.mines-float-left {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
  width: var(--mines-float-width, 30%);
}

.mines-float-right {
  float: right;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  width: var(--mines-float-width, 30%);
}

/* --- Width --- */
.mines-float-10 { --mines-float-width: 10%; }
.mines-float-20 { --mines-float-width: 20%; }
.mines-float-30 { --mines-float-width: 30%; }
.mines-float-40 { --mines-float-width: 40%; }
.mines-float-50 { --mines-float-width: 50%; }

/* --- When mines-box is used on a float element, suppress its vertical margins --- */
.mines-float-left.mines-box,
.mines-float-right.mines-box {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* --- Mobile: clear float and go full width --- */
@media (max-width: 768px) {
  .mines-float-left,
  .mines-float-right {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* --- Clear float --- */
.mines-clear {
  clear: both;
}

/* #endregion */

/* --- First-child heading margin reset --- */
.mines-box > :is(h1, h2, h3, h4, h5, h6):first-child,
[class*="mines-bg-"] > :is(h1, h2, h3, h4, h5, h6):first-child,
[class*="mines-border-"] > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

/* --- Heading color inheritance inside colored containers --- */
[class*="mines-bg-"] :is(h1, h2, h3, h4, h5, h6),
[class*="mines-border-"] :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

/* --- Default heading margin-bottom (classless headings in TI only) --- */
.topic__container :is(h1, h2, h3, h4, h5, h6):not([class]) {
  margin-bottom: 0.25em;
}

/* --- Remove bottom margin from last list item --- */
:is(ol, ul) > li:last-child {
  margin-bottom: 0;
}

/* --- Auto-padding for text elements with bg/border classes ---
   Structural components (boxes, banners, tables, etc.) manage their own padding.
   This rule covers paragraph-level text where a client adds color/border directly.
   For multi-child containers, use .mines-box alongside the bg/border class instead. --- */
:is(p, h1, h2, h3, h4, h5, h6, blockquote, .mines-callout, .mines-instructions)[class*="mines-bg-"],
:is(p, h1, h2, h3, h4, h5, h6, blockquote, .mines-callout, .mines-instructions)[class*="mines-border-"] {
  padding: 0.75rem 1.25rem;
}

/* #endregion GLOBAL UTILITIES */

/* #region COURSE OVERVIEW PAGE ===================================
   Page-specific styles — do not use as global utilities.
   Background colors intentionally excluded from :root.
   ============================================================ */

/* Title bar — linear gradient from top-left to bottom-right */
.mines-course-title {
  background: linear-gradient(to bottom right, var(--mines-primary-dark), var(--mines-primary));
  padding: 2.5rem 2rem 5rem;
  margin-bottom: 0;
}

.mines-course-title :is(h1, h2, h3, h4, h5, h6) {
  color: white;
  margin: 0;
  line-height: 1.4;
}

/* Cards immediately after title pull up to overlay the gradient bottom */
.mines-course-title + .mines-cards {
  margin-top: -3.5rem;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

/* Card content typography — scoped to course overview layout */
.mines-course-title + .mines-cards .mines-card p:first-child { margin-bottom: 0.5rem; }
.mines-course-title + .mines-cards .mines-card h3 { margin-top: 0; margin-bottom: 0.75rem; }
/* Body heading following the cards */
.mines-course-title ~ h2 { margin-top: 0; margin-bottom: 0.5rem; }



/* Subject matter expert section — light blue-gray background */
.mines-course-sme {
  background-color: #F3F5F9;
  padding: 2rem;
  margin-left: -2rem;
  margin-right: -2rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  overflow: hidden; /* clears the floated bio image */
}

/* SME child element typography */
.mines-course-sme > p:first-of-type { margin-bottom: 0.5rem; }
.mines-course-sme h2 { margin-top: 0; margin-bottom: 5px; font-weight: 700; }
.mines-course-sme .mines-text-09 { font-weight: 400; color: var(--mines-callout-A); }
.mines-course-sme .mines-btn {
  margin-top: 0.75rem;
  border-width: 1px;
  border-radius: 999px;
  font-weight: 700;
}

/* Bio photo — floats right, fluid on small screens, capped on large */
.mines-bio-image {
  float: right;
  width: 50%;
  max-width: 400px;
  margin-left: 4rem;
  margin-bottom: 1rem;
  display: block;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* #endregion COURSE OVERVIEW PAGE */

/* #region COURSE SNIPPETS ======================================== */

  /* #region HEADINGS =========================================== */

    /* --- H1: Theme 1 --- */
    h1.mines-1 {
      font-size: 2.25rem;
      color: var(--mines-primary);
      font-weight: 900;
      margin-bottom: 0.75rem;
      letter-spacing: 0.5px;
    }

    /* --- H1: Theme 2 --- */
    h1.mines-2 {
      font-size: 2.25rem;
      color: var(--mines-primary);
      font-weight: 900;
      letter-spacing: 0.5px;
      margin-bottom: 1rem;
      padding-bottom: 8px;
      border-bottom: 6px solid var(--mines-accent-2);
    }

    /* --- Mobile --- */
    @media (max-width: 768px) {
      h1.mines-1,
      h1.mines-2 {
        font-size: 1.75rem;
      }
    }

    /* --- H2: Theme 1 --- */
    h2.mines-1 {
      font-size: 1.75rem;
      color: var(--mines-primary);
      font-weight: 900;
      letter-spacing: 0.5px;
      margin-top: 1.5rem;
      margin-bottom: 1rem;
    }

    h2.mines-1::after {
      display: block;
      content: "";
      width: 4%;
      min-width: 40px;
      height: 3px;
      background-color: var(--mines-accent-1);
      margin-top: 0.3rem;
    }

    /* --- Mobile --- */
    @media (max-width: 768px) {
      h2.mines-1 {
        font-size: 1.375rem;
      }
    }

    /* --- H2: Theme 2 --- */
    h2.mines-2 {
      font-size: 1.75rem;
      color: var(--mines-primary);
      font-weight: 900;
      letter-spacing: 0.5px;
      margin-top: 1.5rem;
      margin-bottom: 0.5rem;
    }

    /* --- Mobile --- */
    @media (max-width: 768px) {
      h2.mines-2 {
        font-size: 1.375rem;
      }
    }

    /* --- H3: Theme 1 --- */
    h3.mines-1 {
      font-size: 1.25rem;
      font-weight: 400;
      text-align: center;
      text-transform: uppercase;
      padding: 0.75rem 1.5rem;
      margin-top: 1.5rem;
      margin-bottom: 1rem;
    }

    h3.mines-1:not([class*="mines-bg-"]) {
      background-color: var(--mines-primary);
      color: var(--mines-primary-contrast);
    }

    /* --- H3: Theme 2 --- */
    h3.mines-2 {
      font-size: 1.25rem;
      color: var(--mines-callout-A);
      text-align: center;
      text-transform: uppercase;
      padding: 0.75rem 1.5rem;
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
      border: 1px solid var(--mines-background-C);
      border-left: 0;
      border-right: 0;
    }

    /* --- Mobile --- */
    @media (max-width: 768px) {
      h3.mines-1,
      h3.mines-2 {
        font-size: 1.1rem;
      }
    }

    /* --- Icon Heading: Theme 1 (h2, h3, h4) --- */
    /* Usage: <div class="mines-icon-heading-1">
                <div class="mines-icon mines-icon-placeholder"></div>
                <h2>Title</h2>
              </div>                                                  */
    .mines-icon-heading-1 {
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--mines-accent-1);
      padding-bottom: 0.5rem;
      margin-top: 1.5rem;
      margin-bottom: 1rem;
    }

    .mines-icon-heading-1 > h1,
    .mines-icon-heading-1 > h2,
    .mines-icon-heading-1 > h3,
    .mines-icon-heading-1 > h4 {
      font-weight: 900;
      line-height: 1.2;
      color: var(--mines-primary);
      margin: 0;
    }

    .mines-icon-heading-1 > h1 {
      font-size: 2rem;
    }

    .mines-icon-heading-1 > h2 {
      font-size: 1.75rem;
    }

    .mines-icon-heading-1 > h3,
    .mines-icon-heading-1 > h4 {
      font-size: 1.25rem;
    }

    .mines-icon-heading-1 .mines-icon,
    .mines-icon-heading-1 .mines-icon-mask {
      width: 2.1rem;
      height: 2.1rem;
    }

    /* --- Mobile --- */
    @media (max-width: 768px) {
      .mines-icon-heading-1 > h1 {
        font-size: 1.625rem;
      }

      .mines-icon-heading-1 > h2 {
        font-size: 1.375rem;
      }

      .mines-icon-heading-1 > h3,
      .mines-icon-heading-1 > h4 {
        font-size: 1.1rem;
      }

      .mines-icon-heading-1 .mines-icon,
      .mines-icon-heading-1 .mines-icon-mask {
        width: 1.65rem;
        height: 1.65rem;
      }
    }

    /* --- Icon Heading: Theme 2 (h2, h3, h4) --- */
    /* Usage: <div class="mines-icon-heading-2">
                <div class="mines-icon-container">
                  <div class="mines-icon mines-icon-placeholder"></div>
                </div>
                <h2>Title</h2>
              </div>                                                  */
    .mines-icon-heading-2 {
      display: flex;
      align-items: center;
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
    }

    .mines-icon-heading-2 .mines-icon-container {
      width: 3.25rem;
      height: 3.25rem;
      background: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
      margin-right: -1.5rem;
    }

    .mines-icon-heading-2 .mines-icon,
    .mines-icon-heading-2 .mines-icon-mask {
      width: 2.25rem;
      height: 2.25rem;
    }

    .mines-icon-heading-2 > h1,
    .mines-icon-heading-2 > h2,
    .mines-icon-heading-2 > h3,
    .mines-icon-heading-2 > h4 {
      font-weight: 900;
      line-height: 1.2;
      color: var(--mines-secondary-2);
      background-color: var(--mines-background-C);
      border-radius: 0 999px 999px 0;
      padding: 0.5rem 1.5rem 0.5rem 2.25rem;
      margin: 0;
      flex: 1;
    }

    .mines-icon-heading-2 > h1 {
      font-size: 2rem;
    }

    .mines-icon-heading-2 > h2 {
      font-size: 1.75rem;
    }

    .mines-icon-heading-2 > h3,
    .mines-icon-heading-2 > h4 {
      font-size: 1.25rem;
    }

    /* --- Mobile --- */
    @media (max-width: 768px) {
      .mines-icon-heading-2 > h1 {
        font-size: 1.625rem;
      }

      .mines-icon-heading-2 > h2 {
        font-size: 1.375rem;
      }

      .mines-icon-heading-2 > h3,
      .mines-icon-heading-2 > h4 {
        font-size: 1.1rem;
      }
    }

  /* #endregion HEADINGS */

  /* #region TEXT CALLOUTS ========================================== */

  /* ============================================================
     TEXT CALLOUTS
     Apply to p or div for emphasized text blocks.
     Override color: add a mines-color- class.
     Override size: add a mines-text- class.
     Example: <p class="mines-callout mines-color-gray mines-text-15">
     ============================================================ */

  .mines-callout {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.45;
  }

  .mines-callout:not([class*="mines-text-"]) {
    font-size: 1.3rem;
  }

  .mines-callout:not([class*="mines-color-"]) {
    color: var(--mines-primary);
  }

  /* --- Instructions Text --- */
  .mines-instructions {
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
    margin-top: 1.25rem;
    margin-bottom: 0;
  }

  /* #endregion TEXT CALLOUTS */

  /* #region UNORDERED LISTS ======================================== */

  /* ============================================================
     UNORDERED LISTS
     Add a color class, a size class, and a shape class to <ul>.
     No base class needed — styles apply when any mines-list- class is present.
     Example: <ul class="mines-list-primary mines-list-md mines-list-square">
     ============================================================ */

  /* --- Base Reset --- */
  ul[class*="mines-list-"] {
    list-style: none;
    padding-left: 0;
    padding-inline-start: 0;
    margin-left: 1.5rem;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-bottom: 1rem;
  }


  ul[class*="mines-list-"] li {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    line-height: 1.45;
    margin-bottom: 0.5rem;
  }

  ul[class*="mines-list-"] li::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: var(--mines-list-size, 0.7em);
    height: var(--mines-list-size, 0.7em);
    background-color: var(--mines-list-color, var(--mines-primary));
    border-radius: var(--mines-list-radius, 0);
    margin-top: var(--mines-list-offset, 0.25em);
  }

  /* --- Size --- */
  /* Offset centers bullet on cap height: (half-leading + cap-center) - (size / 2)  */
  /* With line-height 1.45 and cap-height ~0.72em: center ≈ 0.585em from top        */
  /* mines-list-check-size controls font-size for mines-check (text character)       */
  .mines-list-sm {
    --mines-list-size: 0.4em;
    --mines-list-check-size: 0.9em;
    --mines-list-bg-size: 1.4em;
    --mines-list-offset: 0.5em;
  }

  .mines-list-md {
    --mines-list-size: 0.7em;
    --mines-list-check-size: 1.1em;
    --mines-list-bg-size: 1.8em;
    --mines-list-offset: 0.35em;
  }

  .mines-list-lg {
    --mines-list-size: 1.1em;
    --mines-list-check-size: 1.4em;
    --mines-list-bg-size: 2.2em;
    --mines-list-offset: 0.15em;
  }

  /* --- Shape --- */
  .mines-square {
    --mines-list-radius: 0;
  }

  .mines-circle {
    --mines-list-radius: 50%;
  }

  .mines-check {
    --mines-list-offset: 0;
  }

  ul.mines-check li::before {
    content: "✓";
    background-color: transparent;
    color: var(--mines-list-color, var(--mines-primary));
    font-size: var(--mines-list-check-size, 1.1em);
    width: auto;
    height: auto;
    line-height: 1;
  }

  ul.mines-list-bg li {
    align-items: center;
  }

  ul.mines-list-bg li::before {
    background-color: var(--mines-list-bg-color, var(--mines-primary));
    color: var(--mines-list-bg-contrast, white);
    border-radius: var(--mines-list-radius, 50%);
    width: var(--mines-list-bg-size, 1.8em);
    height: var(--mines-list-bg-size, 1.8em);
    display: block;
    text-align: center;
    line-height: var(--mines-list-bg-size, 1.8em);
    margin-top: 0;
  }

  /* --- Color (add a mines-bg- class to <ul> — same color names the client already knows)    --- */
  /* --- mines-list-bg-color uses ADA-safe versions for accent colors (backgrounds only rule)  --- */
  ul.mines-bg-primary     { --mines-list-color: var(--mines-primary);     --mines-list-bg-color: var(--mines-primary);         --mines-list-bg-contrast: var(--mines-primary-contrast); }
  ul.mines-bg-secondary-1 { --mines-list-color: var(--mines-secondary-1); --mines-list-bg-color: var(--mines-secondary-1);     --mines-list-bg-contrast: var(--mines-secondary-1-contrast); }
  ul.mines-bg-secondary-2 { --mines-list-color: var(--mines-secondary-2); --mines-list-bg-color: var(--mines-secondary-2);     --mines-list-bg-contrast: var(--mines-secondary-2-contrast); }
  ul.mines-bg-gray        { --mines-list-color: var(--mines-gray);        --mines-list-bg-color: var(--mines-gray);            --mines-list-bg-contrast: var(--mines-gray-contrast); }
  ul.mines-bg-accent-1    { --mines-list-color: var(--mines-accent-1);    --mines-list-bg-color: var(--mines-accent-1-ADA);    --mines-list-bg-contrast: var(--mines-accent-1-ADA-contrast); }
  ul.mines-bg-accent-2    { --mines-list-color: var(--mines-accent-2);    --mines-list-bg-color: var(--mines-accent-2-ADA);    --mines-list-bg-contrast: var(--mines-accent-2-ADA-contrast); }

  /* --- Auto-remove indent when bullets have background shapes --- */
  ul.mines-list-bg {
    margin-left: 0;
  }

  /* --- Auto-remove indent when list items have individual backgrounds --- */
  ul[class*="mines-list-"]:has(li[class*="mines-bg-"]) {
    margin-left: 0;
  }

  /* #endregion UNORDERED LISTS */

  /* #region ORDERED LISTS ========================================== */

  /* ============================================================
     ORDERED LISTS
     Add a color class and optional size class to <ol>.
     Color class controls number color only — list text is unaffected.
     Example: <ol class="mines-color-primary mines-text-11">
     ============================================================ */

  /* --- Base Reset --- */
  /* color: inherit suppresses mines-color- cascade to list item text  */
  /* font-size: inherit suppresses mines-text- cascade to list item text */
  ol[class*="mines-color-"] {
    color: inherit;
    font-size: inherit;
    padding-left: 1.5rem;
    margin-left: 1.5rem;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-bottom: 1rem;
  }


  ol[class*="mines-color-"] li {
    line-height: 1.45;
    margin-bottom: 0.5rem;
  }

  ol[class*="mines-color-"] li::marker {
    color: var(--mines-ol-color, var(--mines-primary));
    font-weight: 700;
    font-size: var(--mines-ol-size, 1rem);
  }

  /* --- Size (reuses mines-text- class names — controls number size only)    --- */
  /* --- mines-ol-bg-size controls the circle/square size when mines-list-bg --- */
  ol.mines-text-10 { --mines-ol-size: 1.0rem; --mines-ol-bg-size: 1.8rem; }
  ol.mines-text-11 { --mines-ol-size: 1.1rem; --mines-ol-bg-size: 1.9rem; }
  ol.mines-text-12 { --mines-ol-size: 1.2rem; --mines-ol-bg-size: 2.0rem; }
  ol.mines-text-13 { --mines-ol-size: 1.3rem; --mines-ol-bg-size: 2.1rem; }

  /* --- Color (reuses mines-color- class names — controls number color only)          --- */
  /* --- mines-list-bg-color/contrast activate when mines-list-bg is also applied      --- */
  /* --- Accent colors automatically use ADA-safe background versions                  --- */
  ol.mines-color-primary     { --mines-ol-color: var(--mines-primary);     --mines-list-bg-color: var(--mines-primary);         --mines-list-bg-contrast: var(--mines-primary-contrast); }
  ol.mines-color-secondary-1 { --mines-ol-color: var(--mines-secondary-1); --mines-list-bg-color: var(--mines-secondary-1);     --mines-list-bg-contrast: var(--mines-secondary-1-contrast); }
  ol.mines-color-secondary-2 { --mines-ol-color: var(--mines-secondary-2); --mines-list-bg-color: var(--mines-secondary-2);     --mines-list-bg-contrast: var(--mines-secondary-2-contrast); }
  ol.mines-color-gray        { --mines-ol-color: var(--mines-gray);        --mines-list-bg-color: var(--mines-gray);            --mines-list-bg-contrast: var(--mines-gray-contrast); }
  ol.mines-color-accent-1    { --mines-list-bg-color: var(--mines-accent-1-ADA);    --mines-list-bg-contrast: var(--mines-accent-1-ADA-contrast); }
  ol.mines-color-accent-2    { --mines-list-bg-color: var(--mines-accent-2-ADA);    --mines-list-bg-contrast: var(--mines-accent-2-ADA-contrast); }
  ol.mines-color-callout-a   { --mines-ol-color: var(--mines-callout-A); }
  ol.mines-color-callout-b   { --mines-ol-color: var(--mines-callout-B); }
  ol.mines-color-white       { --mines-ol-color: white; }
  ol.mines-color-black       { --mines-ol-color: black; }

  /* --- Auto-remove indent when numbers have background shapes --- */
  ol.mines-list-bg {
    margin-left: 0;
  }

  /* --- Auto-remove indent when list items have individual backgrounds --- */
  ol[class*="mines-color-"]:has(li[class*="mines-bg-"]) {
    margin-left: 0;
  }

  /* --- Background (add mines-list-bg + mines-circle or mines-square to <ol>)     --- */
  /* --- Switches from ::marker to ::before + CSS counters (::marker has no bg)    --- */
  /* --- Example: <ol class="mines-color-primary mines-text-11 mines-list-bg mines-circle"> --- */
  ol.mines-list-bg {
    list-style: none;
    counter-reset: mines-ol-counter;
    padding-left: 0;
  }

  ol.mines-list-bg li {
    counter-increment: mines-ol-counter;
    display: flex;
    align-items: center;
    gap: 0.6em;
  }

  ol.mines-list-bg li::before {
    content: counter(mines-ol-counter);
    display: block;
    flex-shrink: 0;
    width: var(--mines-ol-bg-size, 1.8rem);
    height: var(--mines-ol-bg-size, 1.8rem);
    background-color: var(--mines-list-bg-color, var(--mines-primary));
    color: var(--mines-list-bg-contrast, white);
    border-radius: var(--mines-list-radius, 50%);
    text-align: center;
    line-height: var(--mines-ol-bg-size, 1.8rem);
    font-size: var(--mines-ol-size, 1rem);
    font-weight: 700;
  }

  /* #endregion ORDERED LISTS */

  /* #region LIST ITEM BACKGROUNDS ================================== */

  /* ============================================================
     LIST ITEM BACKGROUNDS
     Add any mines-bg- class directly to individual <li> elements.
     Works with all list types — ul, ol, checkmark, numbered bg.
     Example: <li class="mines-bg-c">Item text</li>
     ============================================================ */

  ul[class*="mines-list-"] li[class*="mines-bg-"],
  ol[class*="mines-color-"] li[class*="mines-bg-"] {
    padding: 0.6rem 1rem;
    list-style-position: inside;
    margin-bottom: 0.75rem;
  }

  /* #endregion LIST ITEM BACKGROUNDS */

  /* #region CONTENT BOX ============================================ */

  /* ============================================================
     CONTENT BOX
     Base class for padded content containers. Rarely used alone —
     combine with mines-bg- and/or mines-border- classes.
     Override padding/margin with utility classes as needed.
     Example: <div class="mines-box mines-bg-1 mines-border-primary-sm">
     ============================================================ */

  .mines-box {
    padding: 1.5rem 2rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .mines-box > :last-child {
    margin-bottom: 0;
  }

  /* #endregion CONTENT BOX */

  /* #region FLAG BOX =========================================== */

  /* ============================================================
     FLAG BOX
     A content box with a colored flag label at the top-left.
     The flag overhangs the box's left edge and has a darker
     fold triangle at its base to simulate a wrapped ribbon.
     Usage:
     <div class="mines-flag-box mines-bg-b">
       <div class="mines-flag mines-bg-accent-1">Flag Title</div>
       <p>Content here.</p>
     </div>
     ============================================================ */

  .mines-flag-box {
    position: relative;
    margin-top: calc(var(--mines-flag-h) / 2 + 1.25rem);
    margin-bottom: 1.25rem;
    padding: 1.5rem 2rem;
    padding-top: calc(var(--mines-flag-h) / 2 + 0.75rem);
  }


  .mines-flag-box > :last-child {
    margin-bottom: 0;
  }

  .mines-flag {
    position: absolute;
    top: calc(-1 * var(--mines-flag-h) / 2);
    left: calc(-1 * var(--mines-flag-overhang));
    padding: 0.5rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
  }

  .mines-flag::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: var(--mines-flag-fold-w);
    height: var(--mines-flag-fold-h);
    background-color: color-mix(in srgb, var(--mines-flag-color, var(--mines-primary)) 70%, black);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
  }

  /* --- Flag color variables (needed for the fold triangle's color-mix) --- */
  .mines-flag.mines-bg-primary     { --mines-flag-color: var(--mines-primary); }
  .mines-flag.mines-bg-secondary-1 { --mines-flag-color: var(--mines-secondary-1); }
  .mines-flag.mines-bg-secondary-2 { --mines-flag-color: var(--mines-secondary-2); }
  .mines-flag.mines-bg-gray        { --mines-flag-color: var(--mines-gray); }
  .mines-flag.mines-bg-accent-1    { --mines-flag-color: var(--mines-accent-1-ADA); }
  .mines-flag.mines-bg-accent-2    { --mines-flag-color: var(--mines-accent-2-ADA); }
  .mines-flag.mines-bg-1           { --mines-flag-color: var(--mines-background-1); }
  .mines-flag.mines-bg-2           { --mines-flag-color: var(--mines-background-2); }
  .mines-flag.mines-bg-a           { --mines-flag-color: var(--mines-background-A); }
  /* mines-bg-b is reserved for the flag box container — override it on the flag itself */
  .mines-flag.mines-bg-b           { background-color: var(--mines-primary) !important; color: var(--mines-primary-contrast) !important; --mines-flag-color: var(--mines-primary); }
  .mines-flag.mines-bg-c           { --mines-flag-color: var(--mines-background-C); }
  .mines-flag.mines-bg-d           { --mines-flag-color: var(--mines-background-D); }
  .mines-flag.mines-bg-white       { --mines-flag-color: white; }

  .mines-flag-rounded                  { border-radius: var(--mines-flag-radius); }
  .mines-flag-rounded > .mines-flag    { border-radius: 3px 3px 3px 0; }

  /* #endregion FLAG BOX */

  /* #region TABLE ================================================= */

  /* ============================================================
     TABLE
     Wrap the table in mines-table-wrapper for mobile scroll.
     Apply a color class to the table element to set the header
     background and bottom border color.
     Color classes: mines-table-primary | mines-table-secondary-1
                    mines-table-secondary-2 | mines-table-accent-1
                    mines-table-accent-2
     ============================================================ */

.mines-table {
    width: 100%;
    border-collapse: collapse;
  }

.mines-table thead th {
    background-color: var(--mines-table-color, var(--mines-primary));
    color: var(--mines-table-contrast, var(--mines-primary-contrast));
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 700;
    border: solid 1px var(--mines-table-color);
  }

  .mines-table tbody td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--mines-table-border);
    vertical-align: top;
  }

  .mines-table tbody td:first-child {
    font-weight: 700;
  }

  .mines-table tbody tr:nth-child(even) {
    background-color: var(--mines-background-B);
  }

  .mines-table tbody tr:last-child td {
    border-bottom: 3px solid var(--mines-table-color, var(--mines-primary));
  }

  /* --- Suppress table-level background from mines-bg-* and map to table color variables --- */
  .mines-table[class*="mines-bg-"]       { background-color: transparent; color: inherit; }
  .mines-table.mines-bg-primary          { --mines-table-color: var(--mines-primary);      --mines-table-contrast: var(--mines-primary-contrast); }
  .mines-table.mines-bg-secondary-1      { --mines-table-color: var(--mines-secondary-1);  --mines-table-contrast: var(--mines-secondary-1-contrast); }
  .mines-table.mines-bg-secondary-2      { --mines-table-color: var(--mines-secondary-2);  --mines-table-contrast: var(--mines-secondary-2-contrast); }
  .mines-table.mines-bg-accent-1         { --mines-table-color: var(--mines-accent-1-ADA); --mines-table-contrast: var(--mines-accent-1-ADA-contrast); }
  .mines-table.mines-bg-accent-2         { --mines-table-color: var(--mines-accent-2-ADA); --mines-table-contrast: var(--mines-accent-2-ADA-contrast); }

  /* --- Equal column widths --- */
  .mines-table.mines-table-equal-cols { table-layout: fixed; }

  /* --- Rounded corners — requires separate border model so border-radius is respected --- */
  .mines-table.mines-table-rounded {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--mines-table-radius);
    overflow: hidden;
  }

  /* Remove doubled borders: keep only right + bottom; restore left on first column */
  .mines-table.mines-table-rounded th,
  .mines-table.mines-table-rounded td          { border-top: none; border-left: none; }
  .mines-table.mines-table-rounded th:first-child,
  .mines-table.mines-table-rounded td:first-child { border-left: 1px solid var(--mines-table-border); }
  /* Move bottom accent to the table element so it follows the border-radius */
  .mines-table.mines-table-rounded tbody tr:last-child td { border-bottom: none; }
  .mines-table.mines-table-rounded { border-bottom: 3px solid var(--mines-table-color, var(--mines-primary)); }

  /* #endregion TABLE */

  /* #region NUMBERED LIST (ACCENT) ================================= */

  /* ============================================================
     NUMBERED LIST — ACCENT STYLE
     Number is always primary color. Bar color set by a modifier class.
     Supports heading + text (<strong> then <p>) or text only (<p>).
     Color classes: mines-nl-primary | mines-nl-secondary-1
                    mines-nl-secondary-2 | mines-nl-gray
                    mines-nl-accent-1 | mines-nl-accent-2
                    mines-nl-bg-a | mines-nl-bg-c | mines-nl-bg-d
     ============================================================ */

  .mines-numlist {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    counter-reset: mines-nl;
  }

  .mines-numlist > li {
    counter-increment: mines-nl;
    position: relative;
    padding-left: calc(var(--mines-nl-num-w) + var(--mines-nl-gap) * 2 + var(--mines-nl-bar-w));
    padding-bottom: var(--mines-nl-gap-between);
  }

  .mines-numlist > li:last-child {
    padding-bottom: 0;
  }

  /* Number */
  .mines-numlist > li::before {
    content: counter(mines-nl);
    position: absolute;
    left: 0;
    top: 0;
    width: var(--mines-nl-num-w);
    color: var(--mines-primary);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: right;
  }

  /* Accent bar — fixed height matching the rendered number height */
  .mines-numlist > li::after {
    content: '';
    position: absolute;
    left: calc(var(--mines-nl-num-w) + var(--mines-nl-gap));
    top: 0;
    height: var(--mines-nl-num-h);
    bottom: auto;
    width: var(--mines-nl-bar-w);
    background-color: var(--mines-nl-bar, var(--mines-accent-1));
  }

  /* Text-only items (no heading): push text content down so the number's visual center aligns with the first text line */
  .mines-numlist > li:not(:has(> strong:first-child)):not(:has(> b:first-child)) {
    padding-top: var(--mines-nl-center-offset);
  }

  /* Optional heading — use <strong> as first child of <li> */
  .mines-numlist > li > strong:first-child,
  .mines-numlist > li > b:first-child {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.25rem;
  }

  /* Body text */
  .mines-numlist > li > p {
    margin: 0;
    color: var(--mines-gray);
  }

  /* --- Bar color modifiers --- */
  .mines-numlist.mines-nl-primary     { --mines-nl-bar: var(--mines-primary); }
  .mines-numlist.mines-nl-secondary-1 { --mines-nl-bar: var(--mines-secondary-1); }
  .mines-numlist.mines-nl-secondary-2 { --mines-nl-bar: var(--mines-secondary-2); }
  .mines-numlist.mines-nl-gray        { --mines-nl-bar: var(--mines-gray); }
  .mines-numlist.mines-nl-accent-1    { --mines-nl-bar: var(--mines-accent-1); }
  .mines-numlist.mines-nl-accent-2    { --mines-nl-bar: var(--mines-accent-2); }

  /* --- Zero-padded numbers (01, 02, 03...) — no period --- */
  .mines-numlist.mines-nl-padded > li::before { content: counter(mines-nl, decimal-leading-zero); }

  /* #endregion NUMBERED LIST (ACCENT) */

  /* ============================================================
     ORDERED LIST (CLEAN)
     ============================================================ */

  .mines-ol {
    list-style: none;
    padding-left: 1.5rem;
    margin-left: 0;
    counter-reset: mines-ol;
  }

  .mines-ol > li {
    counter-increment: mines-ol;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  .mines-ol > li:last-child { margin-bottom: 0; }

  .mines-ol > li::before {
    content: counter(mines-ol, decimal-leading-zero);
    flex-shrink: 0;
    line-height: 1;
    color: var(--mines-callout-A);
    font-size: 1.3rem;
    font-weight: 700;
  }

  /* ============================================================
     CODE WINDOW
     ============================================================ */

  .mines-code {
    background-color: #1E1E1E;
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Consolas', 'Monaco', 'Lucida Console', 'Courier New', monospace;
    margin-bottom: 1rem;
  }

  /* Header bar with macOS-style traffic light dots */
  .mines-code-header {
    background-color: #2D2D2D;
    position: relative;
    padding: 0 1.5rem 0 4.5rem;
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    font-size: 0.8rem;
    color: #A0A0A0;
    border-bottom: 1px solid #3E3E3E;
  }

  /* Three dots: red (element itself), yellow and green (box-shadow) */
  .mines-code-header::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #FF5F57;
    box-shadow: 20px 0 0 #FFBD2E, 40px 0 0 #28C840;
  }

  /* Line list */
  .mines-code-lines {
    counter-reset: mines-code-line;
    list-style: none;
    padding: 1rem 0;
    margin: 0;
  }

  .mines-code-lines > li {
    counter-increment: mines-code-line;
    position: relative;
    padding: 0.1rem 1.5rem 0.1rem 4.5rem;
    min-height: 1.4rem; /* font-size (0.875rem) × line-height (1.6) — keeps empty lines full height */
    color: #D4D4D4;
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
  }

  /* Line number */
  .mines-code-lines > li::before {
    content: counter(mines-code-line);
    position: absolute;
    left: 0;
    width: 3rem;
    text-align: right;
    color: #6E6E6E;
    user-select: none;
    border-right: 1px solid #3E3E3E;
    padding-right: 0.75rem;
    box-sizing: border-box;
  }

  /* #endregion CODE WINDOW */

  /* ============================================================
     CITATION
     ============================================================ */

  .mines-citation {
    font-size: 0.8rem;
    margin-top: 2rem;
  }

  .mines-citation hr {
    border: none;
    border-top: 1px solid #ECECEC;
    margin-bottom: 0.75rem;
  }

  .mines-citation p {
    position: relative;
    padding: 0 0 0 1.8ch;
    margin-bottom: 0.3rem;
    line-height: 1.2;
  }

  .mines-citation sup {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.4ch;
    text-align: right;
    line-height: 1;
  }

  /* #endregion CITATION */

  /* ============================================================
     DROPDOWN
     ============================================================ */

  .mines-dropdown {
    --mines-dropdown-color:    var(--mines-primary);
    --mines-dropdown-contrast: var(--mines-primary-contrast);
    padding: 0.75rem 0.75rem 0;
    margin-bottom: 0.75rem;
    background-color: white;
  }

  /* Prevent mines-bg-* from coloring the details element itself — color/bg are heading-only */
  .mines-dropdown[class*="mines-bg-"] {
    background-color: white;
    color: inherit;
  }

  /* Color system — add mines-bg-* to the details element */
  .mines-dropdown.mines-bg-primary     { --mines-dropdown-color: var(--mines-primary);      --mines-dropdown-contrast: var(--mines-primary-contrast); }
  .mines-dropdown.mines-bg-secondary-1 { --mines-dropdown-color: var(--mines-secondary-1);  --mines-dropdown-contrast: var(--mines-secondary-1-contrast); }
  .mines-dropdown.mines-bg-secondary-2 { --mines-dropdown-color: var(--mines-secondary-2);  --mines-dropdown-contrast: var(--mines-secondary-2-contrast); }
  .mines-dropdown.mines-bg-accent-1    { --mines-dropdown-color: var(--mines-accent-1-ADA); --mines-dropdown-contrast: var(--mines-accent-1-ADA-contrast); }
  .mines-dropdown.mines-bg-accent-2    { --mines-dropdown-color: var(--mines-accent-2-ADA); --mines-dropdown-contrast: var(--mines-accent-2-ADA-contrast); }
  .mines-dropdown.mines-bg-gray        { --mines-dropdown-color: var(--mines-gray);          --mines-dropdown-contrast: var(--mines-gray-contrast); }

  /* Heading */
  .mines-dropdown-heading {
    display: flex;
    align-items: flex-start;
    list-style: none; /* hide Firefox disclosure triangle */
    font-weight: 700;
    margin: -0.75rem -0.75rem 0;
    padding: 0.75rem 1rem;
    cursor: pointer;
    background-color: var(--mines-dropdown-color);
    color: var(--mines-dropdown-contrast);
  }

  .mines-dropdown-heading::-webkit-details-marker {
    display: none; /* hide Chrome/Safari disclosure triangle */
  }

  .mines-dropdown-heading:focus-visible {
    outline: 3px solid var(--mines-dropdown-color);
    outline-offset: -3px;
  }

  /* Auto +/− indicator — client does not need to type this */
  .mines-dropdown-heading::before {
    content: '+';
    flex-shrink: 0;
    margin-right: 7px;
  }

  details[open] .mines-dropdown-heading::before {
    content: '−';
  }

  /* Body */
  .mines-dropdown-body {
    padding: 1rem 1.5rem;
  }


  .mines-dropdown-body p:last-child {
    margin-bottom: 0;
  }

  /* Colored border on left/right/bottom when open */
  details[open].mines-dropdown {
    border-left:   1px solid var(--mines-dropdown-color);
    border-right:  1px solid var(--mines-dropdown-color);
    border-bottom: 1px solid var(--mines-dropdown-color);
    margin-bottom: 1rem;
  }

  /* Border radius modifier */
  .mines-dropdown.mines-rounded {
    border-radius: 5px;
    overflow: hidden;
  }

  /* #endregion DROPDOWN */

  /* ============================================================
     TABS
     ============================================================
     Requires unique radio `id` and `name` values per tab group.
     If multiple tab groups appear on the same page, change the
     `name` attribute and the `id`/`for` values in each group.
     ============================================================ */

  .mines-tabset {
    --mines-tabs-color:    var(--mines-primary);
    --mines-tabs-contrast: var(--mines-primary-contrast);
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }

  /* Reset fieldset browser defaults when mines-tabset is used on a <fieldset> element */
  fieldset.mines-tabset {
    border: none;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    min-inline-size: 0;
  }

  /* Visually hidden legend — present for screen readers, invisible on screen */
  .mines-tabset-legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Visually hidden but keyboard-focusable — display:none removes inputs from tab order */
  .mines-tabset input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
  }

  /* Prevent mines-bg-* from coloring the wrapper — color lives on tabs and border only */
  .mines-tabset[class*="mines-bg-"] {
    background-color: transparent;
    color: inherit;
  }

  /* Color system — add mines-bg-* to the .mines-tabset wrapper */
  .mines-tabset.mines-bg-primary     { --mines-tabs-color: var(--mines-primary);      --mines-tabs-contrast: var(--mines-primary-contrast); }
  .mines-tabset.mines-bg-secondary-1 { --mines-tabs-color: var(--mines-secondary-1);  --mines-tabs-contrast: var(--mines-secondary-1-contrast); }
  .mines-tabset.mines-bg-secondary-2 { --mines-tabs-color: var(--mines-secondary-2);  --mines-tabs-contrast: var(--mines-secondary-2-contrast); }
  .mines-tabset.mines-bg-accent-1    { --mines-tabs-color: var(--mines-accent-1-ADA); --mines-tabs-contrast: var(--mines-accent-1-ADA-contrast); }
  .mines-tabset.mines-bg-accent-2    { --mines-tabs-color: var(--mines-accent-2-ADA); --mines-tabs-contrast: var(--mines-accent-2-ADA-contrast); }
  .mines-tabset.mines-bg-gray        { --mines-tabs-color: var(--mines-gray);          --mines-tabs-contrast: var(--mines-gray-contrast); }

  /* Tab labels — inactive state */
  .mines-tabset-label {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    text-align: center;
    cursor: pointer;
    font-weight: 400;
    border: 1px solid var(--mines-tabs-color);
    background-color: white;
    color: var(--mines-tabs-color);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    transition: background-color 0.2s, color 0.2s;
  }

  /* Override TI's input[type=radio]+label rule (display:inline-block, margin-left:.5rem, margin-right:1rem, vertical-align:baseline) */
  .mines-tabset input[type="radio"] + .mines-tabset-label {
    display: flex;
    margin-left: 0;
    margin-right: 0;
    vertical-align: unset;
  }

  /* Accent colors are not ADA compliant as inactive tab text — revert to TI default */
  .mines-tabset.mines-bg-accent-1 .mines-tabset-label,
  .mines-tabset.mines-bg-accent-2 .mines-tabset-label {
    color: #656565;
  }

  /* Collapse border between adjacent tabs */
  .mines-tabset-label ~ .mines-tabset-label {
    margin-left: -1px;
  }

  /* Subtle top-corner radius creates natural visual separation between adjacent tabs */
  .mines-tabset-label {
    border-radius: 4px 4px 0 0;
  }

  /* Content panel container */
  .mines-tabset-body {
    width: 100%;
    border: 1px solid var(--mines-tabs-color);
    border-top: none;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
  }

  /* Default white background unless client adds a mines-bg-* class */
  .mines-tabset-body:not([class*="mines-bg-"]) {
    background-color: white;
  }

  /* Individual content panels */
  .mines-tabset-panel {
    display: none;
    padding: 1rem 1.5rem;
  }

  .mines-tabset-panel > *:last-child  { margin-bottom: 0; }

  /* Active tab + visible panel — one block per tab (required for CSS-only) */

  #mines-tabset-1:checked ~ label[for="mines-tabset-1"],
  #mines-tabset-2:checked ~ label[for="mines-tabset-2"],
  #mines-tabset-3:checked ~ label[for="mines-tabset-3"],
  #mines-tabset-4:checked ~ label[for="mines-tabset-4"],
  #mines-tabset-5:checked ~ label[for="mines-tabset-5"] {
    background-color: var(--mines-tabs-color);
    color: var(--mines-tabs-contrast);
    font-weight: 700;
    cursor: default;
    z-index: 2;
  }

  #mines-tabset-1:checked ~ .mines-tabset-body > .mines-tabset-panel-1 { display: block; }
  #mines-tabset-2:checked ~ .mines-tabset-body > .mines-tabset-panel-2 { display: block; }
  #mines-tabset-3:checked ~ .mines-tabset-body > .mines-tabset-panel-3 { display: block; }
  #mines-tabset-4:checked ~ .mines-tabset-body > .mines-tabset-panel-4 { display: block; }
  #mines-tabset-5:checked ~ .mines-tabset-body > .mines-tabset-panel-5 { display: block; }

  /* Keyboard focus — outline appears on the label when its radio is focused */
  #mines-tabset-1:focus-visible ~ label[for="mines-tabset-1"],
  #mines-tabset-2:focus-visible ~ label[for="mines-tabset-2"],
  #mines-tabset-3:focus-visible ~ label[for="mines-tabset-3"],
  #mines-tabset-4:focus-visible ~ label[for="mines-tabset-4"],
  #mines-tabset-5:focus-visible ~ label[for="mines-tabset-5"] {
    outline: 3px solid var(--mines-tabs-color);
    outline-offset: -3px;
    z-index: 3;
  }

  /* Active tab focus ring uses white so it's visible on the colored background */
  #mines-tabset-1:checked:focus-visible ~ label[for="mines-tabset-1"],
  #mines-tabset-2:checked:focus-visible ~ label[for="mines-tabset-2"],
  #mines-tabset-3:checked:focus-visible ~ label[for="mines-tabset-3"],
  #mines-tabset-4:checked:focus-visible ~ label[for="mines-tabset-4"],
  #mines-tabset-5:checked:focus-visible ~ label[for="mines-tabset-5"] {
    outline-color: white;
  }

  /* Second tab group on same page — use b-prefixed IDs to avoid conflicts */

  #mines-tabset-b-1:checked ~ label[for="mines-tabset-b-1"],
  #mines-tabset-b-2:checked ~ label[for="mines-tabset-b-2"],
  #mines-tabset-b-3:checked ~ label[for="mines-tabset-b-3"],
  #mines-tabset-b-4:checked ~ label[for="mines-tabset-b-4"],
  #mines-tabset-b-5:checked ~ label[for="mines-tabset-b-5"] {
    background-color: var(--mines-tabs-color);
    color: var(--mines-tabs-contrast);
    font-weight: 700;
    cursor: default;
    z-index: 2;
  }

  #mines-tabset-b-1:checked ~ .mines-tabset-body > .mines-tabset-panel-1 { display: block; }
  #mines-tabset-b-2:checked ~ .mines-tabset-body > .mines-tabset-panel-2 { display: block; }
  #mines-tabset-b-3:checked ~ .mines-tabset-body > .mines-tabset-panel-3 { display: block; }
  #mines-tabset-b-4:checked ~ .mines-tabset-body > .mines-tabset-panel-4 { display: block; }
  #mines-tabset-b-5:checked ~ .mines-tabset-body > .mines-tabset-panel-5 { display: block; }

  #mines-tabset-b-1:focus-visible ~ label[for="mines-tabset-b-1"],
  #mines-tabset-b-2:focus-visible ~ label[for="mines-tabset-b-2"],
  #mines-tabset-b-3:focus-visible ~ label[for="mines-tabset-b-3"],
  #mines-tabset-b-4:focus-visible ~ label[for="mines-tabset-b-4"],
  #mines-tabset-b-5:focus-visible ~ label[for="mines-tabset-b-5"] {
    outline: 3px solid var(--mines-tabs-color);
    outline-offset: -3px;
    z-index: 3;
  }

  #mines-tabset-b-1:checked:focus-visible ~ label[for="mines-tabset-b-1"],
  #mines-tabset-b-2:checked:focus-visible ~ label[for="mines-tabset-b-2"],
  #mines-tabset-b-3:checked:focus-visible ~ label[for="mines-tabset-b-3"],
  #mines-tabset-b-4:checked:focus-visible ~ label[for="mines-tabset-b-4"],
  #mines-tabset-b-5:checked:focus-visible ~ label[for="mines-tabset-b-5"] {
    outline-color: white;
  }

  /* Border radius modifier — top corners on all tabs, bottom corners on content */
  .mines-tabset.mines-rounded .mines-tabset-label { border-radius: 10px 10px 0 0; }
  .mines-tabset.mines-rounded .mines-tabset-body  { border-radius: 0 0 10px 10px; }

  /* Mobile — stack labels vertically */
  @media (max-width: 768px) {
    .mines-tabset-label {
      flex: 0 0 100%;
      margin-left: 0;
    }

    .mines-tabset-label ~ .mines-tabset-label {
      margin-left: 0;
      margin-top: -1px;
    }

    .mines-tabset.mines-rounded .mines-tabset-label          { border-radius: 0; }
    .mines-tabset.mines-rounded .mines-tabset-label:first-of-type { border-radius: 10px 10px 0 0; }
    .mines-tabset.mines-rounded .mines-tabset-body           { border-radius: 0 0 10px 10px; }
  }

  /* #endregion TABS */

  /* ============================================================
     BANNER
     ============================================================ */

  .mines-banner {
    --mines-banner-color:     var(--mines-primary);
    --mines-banner-contrast:  var(--mines-primary-contrast);
    --mines-banner-icon-size: 8.5rem;
    /* margin-top: calc(var(--mines-banner-icon-size) * 0.3); */
    margin-bottom: 1rem;
    border-bottom: 3px solid var(--mines-banner-color);
  }

  /* Prevent mines-bg-* from coloring the wrapper — color lives on header and border only */
  .mines-banner[class*="mines-bg-"] {
    background-color: transparent;
    color: inherit;
  }

  /* Color system — add mines-bg-* to the .mines-banner wrapper */
  .mines-banner.mines-bg-primary     { --mines-banner-color: var(--mines-primary);      --mines-banner-contrast: var(--mines-primary-contrast); }
  .mines-banner.mines-bg-secondary-1 { --mines-banner-color: var(--mines-secondary-1);  --mines-banner-contrast: var(--mines-secondary-1-contrast); }
  .mines-banner.mines-bg-secondary-2 { --mines-banner-color: var(--mines-secondary-2);  --mines-banner-contrast: var(--mines-secondary-2-contrast); }
  .mines-banner.mines-bg-accent-1    { --mines-banner-color: var(--mines-accent-1-ADA); --mines-banner-contrast: var(--mines-accent-1-ADA-contrast); }
  .mines-banner.mines-bg-accent-2    { --mines-banner-color: var(--mines-accent-2-ADA); --mines-banner-contrast: var(--mines-accent-2-ADA-contrast); }
  .mines-banner.mines-bg-gray        { --mines-banner-color: var(--mines-gray);          --mines-banner-contrast: var(--mines-gray-contrast); }

  /* Header bar */
  .mines-banner-header {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--mines-banner-color);
    color: var(--mines-banner-contrast);
    padding: 1.5rem 2rem;
    padding-right: calc(var(--mines-banner-icon-size) + 4rem); /* keeps heading text clear of the icon */
    min-height: calc(var(--mines-banner-icon-size) * 0.6);        /* ensures icon always overhangs when heading is short */
    box-sizing: border-box;
    overflow: visible;
  }

  /* Any heading tag inside the header inherits contrast color with margin cleared */
  .mines-banner-header :is(h1, h2, h3, h4, h5, h6) {
    color: var(--mines-banner-contrast);
    margin: 0;
  }

  /* Icon circle — add mines-bg-* to control circle background color */
  .mines-banner-icon {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: var(--mines-banner-icon-size);
    height: var(--mines-banner-icon-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .mines-banner-icon img {
    width: 55%;
    height: 55%;
    object-fit: contain;
    filter: brightness(0) invert(1); /* renders icon white regardless of source color */
  }
  .mines-banner-icon .mines-icon-mask {
    width: 55%;
    height: 55%;
    background-color: white;
  }

  /* Content area */
  .mines-banner-body {
    padding: 1.5rem 1.5rem 1.5rem 2rem; /* left matches header text indent */
  }

  /* Float pushes text clear of the circle overhang in the top-right corner only;
     content below the float resumes full width automatically */
  .mines-banner-body::before {
    content: '';
    float: right;
    width: calc(var(--mines-banner-icon-size) + 4rem); /* matches header padding-right clearance */
    height: calc(var(--mines-banner-icon-size) * 0.2 + 1rem); /* circle overhang + 1rem gap */
  }

  .mines-banner-body > *:last-child  { margin-bottom: 0; }

  /* Mobile — reduce icon so heading has more room */
  @media (max-width: 768px) {
    .mines-banner {
      --mines-banner-icon-size: 4.5rem;
    }
  }

  /* #endregion BANNER */

  /* ============================================================
     NOTE CALLOUT
     ============================================================ */

  .mines-note:has(.mines-exclamation) { --mines-note-icon-size: 2.75rem; --mines-note-gap: 0rem; }
  .mines-note:has(.mines-exclamation).mines-bg-primary,
  .mines-note:has(.mines-exclamation).mines-bg-secondary-1,
  .mines-note:has(.mines-exclamation).mines-bg-secondary-2,
  .mines-note:has(.mines-exclamation).mines-bg-gray,
  .mines-note:has(.mines-exclamation).mines-bg-accent-1,
  .mines-note:has(.mines-exclamation).mines-bg-accent-2,
  .mines-note:has(.mines-exclamation).mines-bg-1,
  .mines-note:has(.mines-exclamation).mines-bg-2,
  .mines-note:has(.mines-exclamation).mines-bg-a,
  .mines-note:has(.mines-exclamation).mines-bg-b,
  .mines-note:has(.mines-exclamation).mines-bg-c,
  .mines-note:has(.mines-exclamation).mines-bg-d { --mines-note-gap: 1rem; }

  .mines-note {
    --mines-note-icon-size: 2.25rem;
    --mines-note-gap: 1rem;
    --mines-note-bg: var(--mines-primary); /* overridden per color variant below */
    --mines-note-border: transparent; /* overridden by mines-border-* classes */
    position: relative;
    /* margin-left: calc(var(--mines-note-icon-size) * 0.5); */
    /* padding-left clears the half-icon that sits inside the box + a 1rem gap */
    padding: 1.1rem 1.5rem 1.1rem calc(var(--mines-note-icon-size) * 0.5 + var(--mines-note-gap));
    margin-bottom: 1rem;
    box-sizing: border-box;
    border: 2px solid var(--mines-note-border);
  }

  /* Capture background color per variant so icon can match */
  /* Icon matches background for strong brand colors */
  .mines-note.mines-bg-primary     { --mines-note-bg: var(--mines-primary); }
  .mines-note.mines-bg-secondary-1 { --mines-note-bg: var(--mines-secondary-1); }
  .mines-note.mines-bg-secondary-2 { --mines-note-bg: var(--mines-secondary-2); }
  .mines-note.mines-bg-gray        { --mines-note-bg: var(--mines-gray); }
  .mines-note.mines-bg-accent-1    { --mines-note-bg: var(--mines-accent-1-ADA); } /* ADA version used — passes AAA on white */
  .mines-note.mines-bg-accent-2    { --mines-note-bg: var(--mines-accent-2-ADA); } /* ADA version used — passes AAA on white */

  /* Light background-only colors — icon defaults to primary for AAA compliance */
  .mines-note.mines-bg-1,
  .mines-note.mines-bg-2,
  .mines-note.mines-bg-a,
  .mines-note.mines-bg-b,
  .mines-note.mines-bg-c,
  .mines-note.mines-bg-d,
  .mines-note.mines-bg-white { --mines-note-bg: var(--mines-primary); }

  /* Border variants — white background with colored border; icon matches border color */
  .mines-note.mines-border-primary     { --mines-note-border: var(--mines-primary);     --mines-note-bg: var(--mines-primary); }
  .mines-note.mines-border-secondary-1 { --mines-note-border: var(--mines-secondary-1); --mines-note-bg: var(--mines-secondary-1); }
  .mines-note.mines-border-secondary-2 { --mines-note-border: var(--mines-secondary-2); --mines-note-bg: var(--mines-secondary-2); }
  .mines-note.mines-border-gray        { --mines-note-border: var(--mines-gray);         --mines-note-bg: var(--mines-gray); }
  .mines-note.mines-border-accent-1    { --mines-note-border: var(--mines-accent-1);     --mines-note-bg: var(--mines-accent-1-ADA); }
  .mines-note.mines-border-accent-2    { --mines-note-border: var(--mines-accent-2);     --mines-note-bg: var(--mines-accent-2-ADA); }

  /* Icon circle — overhangs the left edge, center aligned with first text line */
  .mines-note-icon {
    position: absolute;
    left: calc(var(--mines-note-icon-size) * -0.5); /* pulls center to box left edge */
    /* top = padding-top + half line-height - half icon-size */
    top: calc(1.1rem + 0.55rem - var(--mines-note-icon-size) * 0.5);
    width: var(--mines-note-icon-size);
    height: var(--mines-note-icon-size);
    border-radius: 50%;
    background-color: white;
    border: 3px solid white;
    box-sizing: border-box;
  }

  /* Colored strokes — mask clips the icon shape out of the background color */
  .mines-note-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--mines-note-bg);
    -webkit-mask-image: var(--mines-static-info-icon);
    mask-image: var(--mines-static-info-icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
  }

  /* Exclamation variant — add mines-exclamation to .mines-note-icon */
  .mines-note-icon.mines-exclamation::after {
    -webkit-mask-image: var(--mines-static-exclamation-icon);
    mask-image: var(--mines-static-exclamation-icon);
  }

  .mines-note-content > *:last-child  { margin-bottom: 0; }

  .mines-note-heading {
    font-weight: 700;
    margin: 0 0 10px;
  }

  /* #endregion NOTE CALLOUT */

  /* ============================================================
     COMPARISON BOXES
     ============================================================ */

  .mines-compare {
    --mines-compare-icon-size: 5rem;
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    margin-bottom: 1.5rem;
  }

  .mines-compare-box {
    --mines-compare-box-border: transparent;
    flex: 1;
    position: relative;
    margin-top: calc(var(--mines-compare-icon-size) / 2);
    padding: calc(var(--mines-compare-icon-size) / 2 + 1.25rem) 2rem 2rem;
    border: 2px solid var(--mines-compare-box-border);
    box-sizing: border-box;
    text-align: center;
  }

  /* Icon circle — centered on top box edge, half above half below */
  .mines-compare-icon {
    position: absolute;
    top: calc(var(--mines-compare-icon-size) / -2);
    left: 50%;
    transform: translateX(-50%);
    width: var(--mines-compare-icon-size);
    height: var(--mines-compare-icon-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 5px white;
  }

  .mines-compare-icon img {
    width: 55%;
    height: 55%;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
  .mines-compare-icon .mines-icon-mask {
    width: 55%;
    height: 55%;
    background-color: white;
  }
  .mines-compare-icon.mines-icon-white .mines-icon-mask {
    background-color: var(--mines-primary);
  }

  /* Title */
  .mines-compare-title {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem;
  }

  /* Content */
  .mines-compare-content > *:last-child  { margin-bottom: 0; }

  /* Box border modifiers — pair with mines-bg-white for a bordered white box */
  .mines-compare-box.mines-border-primary     { --mines-compare-box-border: var(--mines-primary); }
  .mines-compare-box.mines-border-secondary-1 { --mines-compare-box-border: var(--mines-secondary-1); }
  .mines-compare-box.mines-border-secondary-2 { --mines-compare-box-border: var(--mines-secondary-2); }
  .mines-compare-box.mines-border-gray        { --mines-compare-box-border: var(--mines-gray); }
  .mines-compare-box.mines-border-accent-1    { --mines-compare-box-border: var(--mines-accent-1); }
  .mines-compare-box.mines-border-accent-2    { --mines-compare-box-border: var(--mines-accent-2); }

  /* Square variant — add mines-square to .mines-compare-icon */
  .mines-compare-icon.mines-square {
    border-radius: 25px;
  }

  /* White background variant — add mines-icon-white to .mines-compare-icon */
  .mines-compare-icon.mines-icon-white {
    background-color: white;
  }

  .mines-compare-icon.mines-icon-white img {
    filter: none; /* show icon in its original colors against the white background */
  }

  /* Mobile — stack vertically */
  @media (max-width: 768px) {
    .mines-compare {
      flex-direction: column;
    }
  }

  /* #endregion COMPARISON BOXES */

  /* ============================================================
     RULED HEADING
     ============================================================ */

  h1.mines-ruled,
  h2.mines-ruled,
  h3.mines-ruled {
    --mines-ruled-line: var(--mines-secondary-1); /* default; override with mines-line-* */
    color: var(--mines-primary);
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.25rem;
  }

  h1.mines-ruled::after,
  h2.mines-ruled::after,
  h3.mines-ruled::after {
    content: '';
    flex: 1;
    min-width: 0;
    height: 3px;
    border-radius: 9999px;
    background-color: var(--mines-ruled-line);
  }

  /* Line color modifiers */
  .mines-ruled.mines-line-secondary-1 { --mines-ruled-line: var(--mines-secondary-1); }
  .mines-ruled.mines-line-secondary-2 { --mines-ruled-line: var(--mines-secondary-2); }
  .mines-ruled.mines-line-accent-1    { --mines-ruled-line: var(--mines-accent-1); }
  .mines-ruled.mines-line-accent-2    { --mines-ruled-line: var(--mines-accent-2); }

  /* Kicker modifier — add mines-line-sm for a lightweight kicker treatment:
     2px line, small caps, normal weight, callout-A color */
  h1.mines-ruled.mines-line-sm,
  h2.mines-ruled.mines-line-sm,
  h3.mines-ruled.mines-line-sm {
    color: var(--mines-callout-A);
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
  }

  h1.mines-ruled.mines-line-sm::after,
  h2.mines-ruled.mines-line-sm::after,
  h3.mines-ruled.mines-line-sm::after { height: 2px; }

  /* #endregion RULED HEADING */

  /* ============================================================
     PULL QUOTE
     ============================================================ */

  .mines-quote {
    --mines-quote-color: var(--mines-accent-2); /* default; override with mines-quote-* on the mark */
    --mines-quote-mark-w: 4rem;
    position: relative;
    margin-left: calc(var(--mines-quote-mark-w) * 0.5);
    /* padding-left clears the half-mark that sits inside the box + 1rem gap */
    padding: 2rem 2rem 2rem calc(var(--mines-quote-mark-w) * 0.5 + 1rem);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
  }

  .mines-quote.mines-bg-white {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Absolutely positioned so it doesn't affect box height */
  .mines-quote-mark {
    position: absolute;
    left: calc(var(--mines-quote-mark-w) * -0.5);
    top: 10px; /* glyph overflows slightly above box top due to line-height < 1 */
    width: var(--mines-quote-mark-w);
    overflow: visible;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12rem;
    line-height: 0.8;
    color: var(--mines-quote-color);
    user-select: none;
  }

  .mines-quote-content > *:last-child  { margin-bottom: 0; }

  .mines-quote-source {
    font-size: 0.85rem;
    margin-top: 1rem;
    margin-bottom: 0;
  }

  /* Quote mark color modifiers — add to .mines-quote-mark */
  .mines-quote-mark.mines-quote-primary     { color: var(--mines-primary); }
  .mines-quote-mark.mines-quote-secondary-1 { color: var(--mines-secondary-1); }
  .mines-quote-mark.mines-quote-secondary-2 { color: var(--mines-secondary-2); }
  .mines-quote-mark.mines-quote-gray        { color: var(--mines-gray); }
  .mines-quote-mark.mines-quote-accent-1    { color: var(--mines-accent-1); }
  .mines-quote-mark.mines-quote-accent-2    { color: var(--mines-accent-2); }
  .mines-quote-mark.mines-quote-callout-a   { color: var(--mines-callout-A); }
  .mines-quote-mark.mines-quote-callout-b   { color: var(--mines-callout-B); }

  /* Mobile — reduce mark size */
  @media (max-width: 768px) {
    .mines-quote {
      --mines-quote-mark-w: 2.75rem;
    }
    .mines-quote-mark {
      font-size: 4.5rem;
    }
  }

  /* #endregion PULL QUOTE */

  /* ============================================================
     DIVIDED COLUMNS
     ============================================================ */

  .mines-divided {
    display: flex;
    align-items: stretch;
    margin-bottom: 1.5rem;
  }

  .mines-divided-col {
    flex: 1;
    min-width: 0;
    padding: 0 2rem;
  }

  .mines-divided-col:first-child { padding-left: 0; }
  .mines-divided-col:last-child  { padding-right: 0; }
  .mines-divided-col > *:last-child  { margin-bottom: 0; }

  .mines-divided-line {
    --mines-divided-color: var(--mines-primary);
    flex-shrink: 0;
    width: 2px;
    background-color: var(--mines-divided-color);
  }

  .mines-divided-line.mines-line-primary     { --mines-divided-color: var(--mines-primary); }
  .mines-divided-line.mines-line-secondary-1 { --mines-divided-color: var(--mines-secondary-1); }
  .mines-divided-line.mines-line-secondary-2 { --mines-divided-color: var(--mines-secondary-2); }
  .mines-divided-line.mines-line-accent-1    { --mines-divided-color: var(--mines-accent-1); }
  .mines-divided-line.mines-line-accent-2    { --mines-divided-color: var(--mines-accent-2); }

  @media (max-width: 768px) {
    .mines-divided { flex-direction: column; }
    .mines-divided-col { padding: 0; }
    .mines-divided-col:not(:last-child) { margin-bottom: 1.25rem; }
    .mines-divided-line { width: 100%; height: 2px; }
  }

  /* #endregion DIVIDED COLUMNS */

  /* ============================================================
     CONTENT CARDS
     ============================================================ */

  .mines-cards {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    margin-bottom: 1rem;
  }

  .mines-card {
    flex: 1;
    min-width: 0;
    padding: 1.25rem;
    box-sizing: border-box;
  }

  .mines-card > *:last-child  { margin-bottom: 0; }

  @media (max-width: 768px) {
    .mines-cards { flex-direction: column; }
  }

  /* #endregion CONTENT CARDS */

  /* ============================================================
     REFLECTION WIDGET
     ============================================================ */

  .mines-reflection-container { margin-bottom: 1rem; }

  .mines-reflection-header {
    background-color: var(--mines-primary-dark);
    border-radius: 20px 20px 0 0;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mines-reflection-container .mines-reflection-header :is(h1, h2, h3, h4, h5, h6) { color: white; margin-bottom: 0; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.75px; }

  /* Base icon element — sizing, color, mask plumbing */
  .mines-static-reflection-icon {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    background-color: white;
    -webkit-mask-image: var(--mines-static-reflection-icon);
    mask-image: var(--mines-static-reflection-icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  /* Icon options — client applies one class to choose the icon */
  .mines-icon-bubble {
    -webkit-mask-image: var(--mines-icon-bubble);
    mask-image: var(--mines-icon-bubble);
  }
  .mines-icon-alert {
    -webkit-mask-image: var(--mines-icon-alert);
    mask-image: var(--mines-icon-alert);
  }
  .mines-icon-book-1 {
    -webkit-mask-image: var(--mines-icon-book-1);
    mask-image: var(--mines-icon-book-1);
  }
  .mines-icon-book-2 {
    -webkit-mask-image: var(--mines-icon-book-2);
    mask-image: var(--mines-icon-book-2);
  }
  .mines-icon-file {
    -webkit-mask-image: var(--mines-icon-file);
    mask-image: var(--mines-icon-file);
  }
  .mines-icon-tools {
    -webkit-mask-image: var(--mines-icon-tools);
    mask-image: var(--mines-icon-tools);
  }
  .mines-icon-clock {
    -webkit-mask-image: var(--mines-icon-clock);
    mask-image: var(--mines-icon-clock);
  }
  .mines-icon-terminal {
    -webkit-mask-image: var(--mines-icon-terminal);
    mask-image: var(--mines-icon-terminal);
  }
  .mines-icon-team {
    -webkit-mask-image: var(--mines-icon-team);
    mask-image: var(--mines-icon-team);
  }
  .mines-icon-star {
    -webkit-mask-image: var(--mines-icon-star);
    mask-image: var(--mines-icon-star);
  }
  .mines-icon-question {
    -webkit-mask-image: var(--mines-icon-question);
    mask-image: var(--mines-icon-question);
  }
  .mines-icon-video {
    -webkit-mask-image: var(--mines-icon-video);
    mask-image: var(--mines-icon-video);
  }
  .mines-icon-mic {
    -webkit-mask-image: var(--mines-icon-mic);
    mask-image: var(--mines-icon-mic);
  }
  .mines-icon-map-pin {
    -webkit-mask-image: var(--mines-icon-map-pin);
    mask-image: var(--mines-icon-map-pin);
  }
  .mines-icon-link {
    -webkit-mask-image: var(--mines-icon-link);
    mask-image: var(--mines-icon-link);
  }
  .mines-icon-lightbulb {
    -webkit-mask-image: var(--mines-icon-lightbulb);
    mask-image: var(--mines-icon-lightbulb);
  }
  .mines-icon-info {
    -webkit-mask-image: var(--mines-icon-info);
    mask-image: var(--mines-icon-info);
  }
  .mines-icon-folder {
    -webkit-mask-image: var(--mines-icon-folder);
    mask-image: var(--mines-icon-folder);
  }
  .mines-icon-earth {
    -webkit-mask-image: var(--mines-icon-earth);
    mask-image: var(--mines-icon-earth);
  }
  .mines-icon-draft {
    -webkit-mask-image: var(--mines-icon-draft);
    mask-image: var(--mines-icon-draft);
  }
  .mines-icon-discuss {
    -webkit-mask-image: var(--mines-icon-discuss);
    mask-image: var(--mines-icon-discuss);
  }
  .mines-icon-code {
    -webkit-mask-image: var(--mines-icon-code);
    mask-image: var(--mines-icon-code);
  }
  .mines-icon-check {
    -webkit-mask-image: var(--mines-icon-check);
    mask-image: var(--mines-icon-check);
  }
  .mines-icon-bookmark {
    -webkit-mask-image: var(--mines-icon-bookmark);
    mask-image: var(--mines-icon-bookmark);
  }
  .mines-icon-book-3 {
    -webkit-mask-image: var(--mines-icon-book-3);
    mask-image: var(--mines-icon-book-3);
  }

  /* ============================================================
     DISCUSSION WIDGET
     ============================================================ */

  .mines-discussion-container { margin-bottom: 1rem; }

  .mines-discussion-header {
    background-color: var(--mines-primary-dark);
    border-radius: 20px 20px 0 0;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mines-discussion-container .mines-discussion-header :is(h1, h2, h3, h4, h5, h6) { color: white; margin-bottom: 0; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.75px; }

  .mines-static-discussion-icon {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    background-color: white;
    -webkit-mask-image: var(--mines-static-discussion-icon);
    mask-image: var(--mines-static-discussion-icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

/* #endregion COURSE SNIPPETS */

/* #region AUDIO PLAYER =========================================== */

/* ============================================================
   AUDIO PLAYER
   ============================================================ */

.di-audio-demo-container {
  --di-audio-border: transparent;
  border: 1px solid var(--di-audio-border);
  box-sizing: border-box;
  border-radius: 999px;
  margin: 1rem 0;
}

.di-audio-demo-audio {
  display: block;
  width: 100%;
}

/* Border color modifiers — add to .di-audio-demo-container */
.di-audio-demo-container.mines-border-primary     { --di-audio-border: var(--mines-primary); }
.di-audio-demo-container.mines-border-secondary-1 { --di-audio-border: var(--mines-secondary-1); }
.di-audio-demo-container.mines-border-secondary-2 { --di-audio-border: var(--mines-secondary-2); }
.di-audio-demo-container.mines-border-accent-1    { --di-audio-border: var(--mines-accent-1); }
.di-audio-demo-container.mines-border-accent-2    { --di-audio-border: var(--mines-accent-2); }

/* Width overrides — add to .di-audio-demo-container */
.di-audio-demo-container.di-audio-demo-33 { width: 33%; }
.di-audio-demo-container.di-audio-demo-50 { width: 50%; }
.di-audio-demo-container.di-audio-demo-66 { width: 66%; }

/* On mobile, always full width regardless of modifier */
@media (max-width: 768px) {
  .di-audio-demo-container.di-audio-demo-33,
  .di-audio-demo-container.di-audio-demo-50,
  .di-audio-demo-container.di-audio-demo-66 {
    width: 100%;
  }
}

/* #endregion AUDIO PLAYER */

/* ============================================================
   LESSON PAGE
   ============================================================ */

.mines-lesson-header {
  background-color: var(--mines-primary);
  border-bottom: 8px solid var(--mines-accent-2);
  border-radius: 20px 20px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2rem;
  box-sizing: border-box;
  color: white;
}

.mines-lesson-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
}

.mines-lesson-header .mines-icon-mask {
  width: 1.4rem;
  height: 1.4rem;
  background-color: white;
}

.mines-lesson-header :is(h1, h2, h3, h4, h5, h6, p, span) {
  color: white;
  margin: 0 !important;
  font-size: 1.2rem;
  line-height: 1.3;
}

.mines-lesson-header :is(h1, h2, h3, h4, h5, h6) { font-weight: 700; }
.mines-lesson-header span { font-weight: 400; }

.mines-lesson-content {
  overflow: hidden; /* clears the floated image */
  padding: 1.5rem 0 1rem;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}


.mines-lesson-content :is(h2, h3) { color: var(--mines-primary); }

.mines-lesson-img {
  float: right;
  width: 50%;
  max-width: 350px;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  display: block;
}

.mines-lesson-how-learn {
  background-color: #F6F9FB;
  padding: 2rem 1.5rem;
}


.mines-lesson-how-learn :is(h1, h2, h3) { color: var(--mines-primary); }

@media (max-width: 768px) {
  .mines-lesson-img { float: none; width: 100%; max-width: 100%; margin-left: 0; }
}

/* ============================================================
   COURSE COMPLETION PAGE
   ============================================================ */

.mines-congrats-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 5px;
  border-bottom: 6px solid var(--mines-primary);
  margin-bottom: 1.5rem;
}

.mines-congrats-check {
  color: var(--mines-accent-1);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.mines-congrats-header :is(h1, h2, h3) {
  color: var(--mines-primary);
  margin: 0;
  text-transform: uppercase;
  font-size: 2.25rem;
  letter-spacing: 0.04em;
}

.mines-congrats-body {
  overflow: hidden; /* contains the floated sidebar */
  margin-bottom: 2rem;
}

.mines-congrats-sidebar {
  float: right;
  width: 40%;
  margin-left: 2rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: linear-gradient(to bottom right, var(--mines-primary-dark), var(--mines-primary));
  color: white;
}

/* "WHAT'S NEXT?" label — custom color for ADA on dark background */
.mines-congrats-whats-next {
  color: #A4B4CC;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.mines-congrats-sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.mines-congrats-sidebar-head :is(h2, h3) {
  color: white;
  margin: 0;
  flex: 1;
}

.mines-congrats-sidebar-head img {
  max-width: 110px;
  flex-shrink: 0;
}

.mines-congrats-sidebar p { color: white; font-size: 0.9rem; }

/* Number size override — completion page only */
.mines-congrats-body .mines-ol > li::before { font-size: 1.7rem; }

.mines-congrats-sidebar .mines-btn {
  border-color: var(--mines-accent-2);
  border-width: 1px;
  border-radius: 999px;
  color: white;
}

@media (max-width: 768px) {
  .mines-congrats-sidebar {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}