/* The Magic of Mnemonics — unified learner-facing module layout v2 */
/* Keep only the integrated main site header visible on module pages. */
body > header:not(.mom-shell-header){display:none!important}

/* Legacy first-ten notice row is no longer learner-facing. */
.module-controls{display:none!important}

/* New Spanish cards are arranged as compact responsive rows. */
.mom-new-word-row{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
  gap:14px;
  margin:15px 0 22px;
  align-items:stretch;
}
.mom-new-word-row > .mom-new-word-card{
  margin:0!important;
  height:100%;
  min-width:0;
}
.mom-new-word-card .mom-hear-btn{margin-top:9px}

@media (min-width:980px){
  .mom-new-word-row{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:680px) and (max-width:979px){
  .mom-new-word-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:679px){
  .mom-new-word-row{grid-template-columns:1fr}
}

/* Learner module scorecard — always available on desktop and mobile. */
.mom-module-scorecard{
  position:sticky;
  top:calc(var(--mom-sticky-header-height,46px) + var(--mom-module-course-nav-height,36px));
  z-index:99998;
  display:grid;
  grid-template-columns:minmax(110px,.7fr) minmax(170px,1.35fr) minmax(100px,.58fr);
  gap:10px;
  align-items:end;
  width:100%;
  padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));
  background:rgba(246,243,237,.98);
  border-bottom:1px solid #ded8ce;
  box-shadow:0 3px 10px rgba(23,33,43,.08);
  color:#17212b;
  font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.mom-module-scorecard *{box-sizing:border-box}
.mom-scorecard-field{display:grid;gap:3px;min-width:0}
.mom-scorecard-field>span,.mom-scorecard-score>span{
  font-size:.66rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#68727d;
}
.mom-module-scorecard select{
  width:100%;
  min-width:0;
  min-height:36px;
  margin:0;
  padding:7px 28px 7px 9px;
  border:1px solid #cfc8bd;
  border-radius:10px;
  background:#fff;
  color:#17212b;
  font:800 .84rem/1.1 ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.mom-scorecard-score{
  display:grid;
  gap:3px;
  min-width:0;
}
.mom-scorecard-score strong{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:7px 10px;
  border:1px solid #cfc8bd;
  border-radius:10px;
  background:#fff;
  color:#174f4b;
  font-size:.9rem;
  line-height:1.1;
  white-space:nowrap;
}
body.mom-module-page.mom-module-menu-open .mom-module-scorecard{
  top:calc(var(--mom-sticky-header-height,120px) + var(--mom-module-course-nav-height,36px));
}
html{scroll-padding-top:calc(var(--mom-sticky-header-height,46px) + var(--mom-module-course-nav-height,36px) + var(--mom-scorecard-height,58px) + 12px)!important}
@media(max-width:560px){
  .mom-module-scorecard{
    grid-template-columns:minmax(78px,.8fr) minmax(132px,1.45fr) minmax(74px,.7fr);
    gap:6px;
    padding-top:6px;
    padding-bottom:6px;
  }
  .mom-scorecard-field>span,.mom-scorecard-score>span{font-size:.57rem;letter-spacing:.045em}
  .mom-module-scorecard select,.mom-scorecard-score strong{min-height:34px;font-size:.76rem;border-radius:9px}
  .mom-module-scorecard select{padding:6px 22px 6px 7px}
  .mom-scorecard-score strong{padding:6px 5px}
}
@media(max-width:365px){
  .mom-module-scorecard{grid-template-columns:74px minmax(118px,1fr) 70px;gap:4px;padding-left:6px;padding-right:6px}
  .mom-module-scorecard select,.mom-scorecard-score strong{font-size:.7rem}
}


/* M001–M092 shared Module 1 hero image — presentation-only extension. */
html[data-mom-release] .module-head,
html[data-mom-release] .hero,
html[data-mom-release] .hero-card{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  background:#0e514b!important;
}
html[data-mom-release] .module-head::before,
html[data-mom-release] .hero::before,
html[data-mom-release] .hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/assets/images/modules/001/module-001-learn-spanish-hero.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:-2;
  pointer-events:none;
}
html[data-mom-release] .module-head::after,
html[data-mom-release] .hero::after,
html[data-mom-release] .hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(7,61,56,.98) 0%,rgba(10,72,66,.94) 38%,rgba(10,72,66,.66) 65%,rgba(10,72,66,.30) 100%);
  z-index:-1;
  pointer-events:none;
}
html[data-mom-release] .module-head .progress-copy,
html[data-mom-release] .hero .progress-copy,
html[data-mom-release] .hero-card .progress-copy{
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
@media(max-width:700px){
  html[data-mom-release] .module-head::before,
  html[data-mom-release] .hero::before,
  html[data-mom-release] .hero-card::before{background-position:68% center}
  html[data-mom-release] .module-head::after,
  html[data-mom-release] .hero::after,
  html[data-mom-release] .hero-card::after{background:linear-gradient(180deg,rgba(7,61,56,.96),rgba(10,72,66,.82))}
}

/* MOM_GLOBAL_MODULE_UI_VISIBILITY_V1_LOCKED
   Shared dark hero art makes inherited text white. Restore dark text only for
   the light cards and callouts embedded inside those heroes. */
html[data-mom-release] :is(.module-head,.hero,.hero-card,.module-hero,.hero-panel) :is(.confidence,.confidence-loop,.loop,.module-note,.summary-grid){
  color:var(--mom-ink,#17212b)!important;
  text-shadow:none!important;
}
html[data-mom-release] :is(.module-head,.hero,.hero-card,.module-hero,.hero-panel) > .can-do,
html[data-mom-release] :is(.module-head,.hero,.hero-card,.module-hero,.hero-panel) > .hero-card > .can-do{
  color:var(--mom-ink,#17212b)!important;
  text-shadow:none!important;
}