/* Shared compact language + appearance controls.
   Mirrors the compact controls used on /products/. */
.maul-compact-controls{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}
.maul-compact-select{
  height:32px;
  min-width:60px;
  padding:0 30px 0 11px;
  border:1px solid rgba(150,165,185,.14);
  border-radius:999px;
  background-color:rgba(9,21,34,.36);
  color:#9aa8bd;
  font:500 10px/1 "JetBrains Mono",monospace;
  cursor:pointer;
  outline:none;
  color-scheme:dark;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238895a7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:9px 6px;
}
.maul-compact-select:hover,
.maul-compact-select:focus-visible{
  border-color:rgba(255,49,88,.35);
  color:#eef4ff;
}
.maul-theme-select{min-width:78px}

/* Commerce theme toggle: light is the default; Dark is opt-in. */
.maul-dark-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:5px 9px;
  border:1px solid rgba(150,165,185,.14);
  border-radius:999px;
  background:rgba(9,21,34,.36);
  color:#9aa8bd;
  font:500 10px/1 "JetBrains Mono",monospace;
  cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.maul-dark-toggle:hover,.maul-dark-toggle:focus-visible{border-color:rgba(255,49,88,.35);color:#eef4ff;outline:none}
.maul-dark-toggle-track{width:27px;height:16px;border-radius:999px;background:#4b5563;position:relative;flex:none;transition:.18s ease}
.maul-dark-toggle-track>span{position:absolute;width:10px;height:10px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.22);transition:.18s ease}
.maul-dark-toggle[aria-pressed="true"]{border-color:rgba(255,49,88,.42);color:#ff3158}
.maul-dark-toggle[aria-pressed="true"] .maul-dark-toggle-track{background:#ff3158}
.maul-dark-toggle[aria-pressed="true"] .maul-dark-toggle-track>span{transform:translateX(11px)}
html[data-theme="light"] .maul-dark-toggle{background:rgba(255,255,255,.72);border-color:rgba(23,32,44,.11);color:#667085}
html[data-theme="light"] .maul-dark-toggle:hover,html[data-theme="light"] .maul-dark-toggle:focus-visible{color:#17202c;border-color:rgba(255,48,79,.28)}
html[data-theme="light"] .maul-dark-toggle-track{background:#cfd5dd}
.maul-legacy-controls{display:none!important}

/* Light surfaces across framework + commerce pages. */
html[data-theme="light"] .maul-compact-select,
html[data-article-theme="light"] .maul-compact-select{
  background-color:rgba(255,255,255,.72);
  border-color:rgba(23,32,44,.11);
  color:#667085;
  color-scheme:light;
}
html[data-theme="light"] .maul-compact-select:hover,
html[data-theme="light"] .maul-compact-select:focus-visible,
html[data-article-theme="light"] .maul-compact-select:hover,
html[data-article-theme="light"] .maul-compact-select:focus-visible{
  color:#17202c;
  border-color:rgba(255,48,79,.28);
}

/* Keep Website Course checkout on its intentionally different controls/theme. */
body.course-checkout .maul-compact-controls{display:none}
body.course-checkout .maul-legacy-controls{display:inline-flex!important}

@media(max-width:760px){
  .maul-compact-controls{gap:5px}
  .maul-compact-select{min-width:58px;padding-left:9px;padding-right:28px;background-position:right 10px center}
  .maul-theme-select{min-width:74px}
  .maul-dark-toggle{padding-inline:8px;gap:6px}
}