/* Purpose, icon and text distinguish groups even without color perception. */
.settings-category {
  --category-color: #405d88;
  --category-tint: #edf3fc;
  margin-top: 12px;
  border: 1px solid #d3deed;
  border-left: 4px solid var(--category-color);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.settings-category[hidden], .settings-control-slot[hidden],
#advanced-settings [hidden] { display: none !important; }
.settings-category-audio { --category-color: #75549a; --category-tint: #f3edf9; }
.settings-category-language { --category-color: #317f84; --category-tint: #e9f6f5; }
.settings-category-materials { --category-color: #967021; --category-tint: #fff5de; }
.settings-category-background { --category-color: #397652; --category-tint: #eaf5ed; }
.settings-category-cover { --category-color: #a25071; --category-tint: #fbeef3; }
.settings-category-music { --category-color: #9b642e; --category-tint: #fff1e5; }
.settings-category > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 72px;
  padding: 13px 14px;
  background: var(--category-tint);
  cursor: pointer;
  list-style: none;
}
.settings-category > summary::-webkit-details-marker { display: none; }
.settings-category > summary:focus-visible { outline: 3px solid var(--category-color); outline-offset: -3px; }
.settings-category-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 32px;
  height: 32px;
  border-radius: 9px;
  background: #fff;
  color: var(--category-color);
  font-size: 20px;
}
.settings-category-copy { flex: 1; min-width: 0; }
.settings-category-title { display: block; color: #273b4c; font-size: 14px; font-weight: 800; }
.settings-category-state { display: block; margin-top: 4px; color: #526171; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.settings-category-arrow { color: var(--category-color); transition: transform .15s; }
.settings-category[open] > summary .settings-category-arrow { transform: rotate(180deg); }
.settings-category-body { padding: 12px 14px; }
.settings-purpose { margin: 0 0 12px; color: #536575; font-size: 12px; line-height: 1.6; }
.settings-scope { padding: 3px 8px; border-radius: 5px; background: #e5efe9; color: #38604b; font-size: 12px; }
.settings-category .advanced-subsection { padding: 10px !important; margin-top: 6px !important; background: #fff; }
.settings-category .settings-regrouped-content { padding: 0; margin: 0; border: 0; background: transparent; }
.settings-regrouped-content > .advanced-group-head { display: none; }
.settings-category .style-row > select { flex: 1 1 200px; min-width: 0; }
.settings-category .style-row > span:not(.settings-scope) { min-width: 0; }
.settings-category .style-row label { white-space: normal; }
.settings-category label > span { min-width: 0; overflow-wrap: anywhere; }
.settings-category .style-row .style-row-help { flex-basis: 100%; margin-left: 0; }
@media (max-width: 680px) {
  .settings-category > summary { padding: 12px 10px; }
  .settings-category-body { padding: 10px; }
  .settings-category .style-row > select { flex-basis: 100%; width: 100%; }
}