/* Stroop-specific presentation variance.
   Shared Concept layout remains in concepts/shared/css/concepts.css. */

body[data-app="recreation"] #conceptStroopEffect .stroop-art-wrap{
  position:relative;
}

body[data-app="recreation"] #conceptStroopEffect .stroop-art-wrap::after{
  content:"";
  position:absolute;
  inset:auto 8% -10px 8%;
  height:22px;
  border-radius:50%;
  background:rgba(var(--recreation-shadow-rgb),.46);
  filter:blur(16px);
  pointer-events:none;
  z-index:-1;
}

body[data-app="recreation"] #conceptStroopEffect .stroop-definition{
  font-weight:750;
}

body[data-app="recreation"] #conceptStroopEffect .stroop-terms{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

body[data-app="recreation"] #conceptStroopEffect .stroop-term{
  padding:13px 14px;
  border-radius:14px;
  background:rgba(var(--recreation-copper-rgb),.12);
  border:1px solid rgba(var(--recreation-copper-light-rgb),.16);
}

body[data-app="recreation"] #conceptStroopEffect .stroop-term strong{
  display:block;
  margin-bottom:5px;
}

@media (max-width:560px){
  body[data-app="recreation"] #conceptStroopEffect .stroop-terms{
    grid-template-columns:1fr;
  }
}


body[data-app="recreation"] #conceptStroopEffect .stroop-comparison{
  display:grid;
  gap:12px;
  min-width:0;
}

body[data-app="recreation"] #conceptStroopEffect .stroop-mode-switch{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:100%;
}

body[data-app="recreation"] #conceptStroopEffect .stroop-mode-switch__button{
  min-height:44px;
  border:1px solid rgba(var(--recreation-copper-light-rgb),.28);
  background:rgba(var(--recreation-burgundy-rgb),.72);
  color:var(--recreation-ink);
}

body[data-app="recreation"] #conceptStroopEffect .stroop-mode-switch__button.is-active,
body[data-app="recreation"] #conceptStroopEffect .stroop-mode-switch__button[aria-pressed="true"]{
  background:var(--recreation-copper);
  border-color:var(--recreation-copper-light);
  box-shadow:0 0 0 2px rgba(var(--recreation-copper-light-rgb),.16);
}

body[data-app="recreation"] #conceptStroopEffect .stroop-mode-switch__button:focus-visible{
  outline:3px solid rgba(var(--recreation-copper-light-rgb),.42);
  outline-offset:2px;
}

body[data-app="recreation"] #conceptStroopEffect[data-stroop-comparison-mode="congruent"] .stroop-art-wrap{
  filter:saturate(.98);
}


/* Stroop reading comfort: reduce the amount of stark, heavy white typography. */
body[data-app="recreation"] #conceptStroopEffect{
  color:var(--recreation-muted);
}
body[data-app="recreation"] #conceptStroopEffect .concept-title{
  color:#F3D8CE!important;
  -webkit-text-fill-color:#F3D8CE!important;
  font-weight:650!important;
}
body[data-app="recreation"] #conceptStroopEffect .concept-kicker{
  color:var(--recreation-copper-light)!important;
  -webkit-text-fill-color:var(--recreation-copper-light)!important;
  font-weight:700!important;
}
body[data-app="recreation"] #conceptStroopEffect .concept-lede{
  color:rgba(var(--recreation-ink-rgb),.84)!important;
  -webkit-text-fill-color:rgba(var(--recreation-ink-rgb),.84)!important;
  font-weight:450!important;
}
body[data-app="recreation"] #conceptStroopEffect :is(
  .stroop-term strong,
  .concept-observation strong,
  .concept-module h3,
  .concept-depth-section h3,
  .concept-depth > summary
){
  color:#F0CBBE!important;
  -webkit-text-fill-color:#F0CBBE!important;
  font-weight:700!important;
}
body[data-app="recreation"] #conceptStroopEffect :is(
  .stroop-term .note,
  .concept-observation span,
  .concept-module p,
  .concept-depth-section p,
  .concept-art-caption,
  .concept-reference-list
){
  color:rgba(var(--recreation-ink-rgb),.76)!important;
  -webkit-text-fill-color:rgba(var(--recreation-ink-rgb),.76)!important;
  font-weight:400!important;
}
body[data-app="recreation"] #conceptStroopEffect .concept-reference-list a{
  color:var(--recreation-copper-light)!important;
  -webkit-text-fill-color:var(--recreation-copper-light)!important;
  font-weight:500!important;
}