aside details {
  display:grid;
}

aside details[open] {
  gap:calc(.5em * var(--line-height-factor));
}

aside summary {
  font-weight:700;
  font-size: clamp(1.1em, 3vw, 1.2em);
}

aside summary:focus-visible {
  outline:solid .1rem var(--accent-color);
  outline-offset:.2rem;
}

aside details .tabpanel__content {
  display:grid;
  gap:calc(1.5em * var(--line-height-factor));
}





/************/
/* FIELDSET */
/************/

aside fieldset {
  margin:0;
  padding:0;
  border:none;

  display:grid;
  justify-items:start;
}

aside fieldset legend {
  padding:0;
}





/***********/
/* FILTERS */
/***********/

/* html[data-colorblind="achromatopsia"] .filter { 
  backdrop-filter: url("#achromatopsia");
}
html[data-colorblind="deuteranopia"] .filter { 
  filter: url("#deuteranopia"); 
}
html[data-colorblind="protanopia"] .filter { 
  filter: url("#protanopia"); 
}
html[data-colorblind="tritanopia"] .filter { 
  filter: url("#tritanopia"); 
} */



@supports (pointer-events:none) {
  .filter,
  .filter--cb {
    position:fixed;
    inset:0;
    z-index: 60;
  
    pointer-events:none;
    user-select:none;
  }

  .filter {
    -webkit-backdrop-filter: 
      contrast( calc( 1 - var(--setting--contrast, 0) ) )
      blur( calc( .1em * var(--setting--readers, 0) ) );
    backdrop-filter: 
      contrast( calc( 1 - var(--setting--contrast, 0) ) )
      blur( calc( .1em * var(--setting--readers, 0) ) );
  }

  html[data-colorblind="achromatopsia"] { 
    -webkit-filter: url("#achromatopsia");
    filter: url("#achromatopsia");
  }
  html[data-colorblind="deuteranopia"] { 
    -webkit-filter: url("#deuteranopia"); 
    filter: url("#deuteranopia"); 
  }
  html[data-colorblind="protanopia"] { 
    -webkit-filter: url("#protanopia"); 
    filter: url("#protanopia"); 
  }
  html[data-colorblind="tritanopia"] { 
    -webkit-filter: url("#tritanopia");
    filter: url("#tritanopia"); 
  }

}

@supports (pointer-events:none) and (-moz-appearance:none) { 
  html[data-colorblind="achromatopsia"],
  html[data-colorblind="deuteranopia"],
  html[data-colorblind="protanopia"],
  html[data-colorblind="tritanopia"] { 
    filter: none; 
  } 

  html[data-colorblind="achromatopsia"] .filter--cb { 
    backdrop-filter: url("#achromatopsia");
  }
  html[data-colorblind="deuteranopia"] .filter--cb { 
    backdrop-filter: url("#deuteranopia"); 
  }
  html[data-colorblind="protanopia"] .filter--cb { 
    backdrop-filter: url("#protanopia"); 
  }
  html[data-colorblind="tritanopia"] .filter--cb { 
    backdrop-filter: url("#tritanopia"); 
  }
}