/* Cardona CT Lab - shared theme control (Day / Night / HC segmented pills)
 * Styled for the dark topbar that every page shares (#1A1A2E). The pills sit in
 * the topbar's right slot; a --fixed fallback floats them top-right.            */

.ctlab-theme {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  flex-shrink: 0;
  margin-left: auto;   /* right slot: push right even in a plain flex topbar */
}
.ctlab-theme--fixed { position: fixed; top: 12px; right: 16px; z-index: 2000; margin-left: 0; }

.ctlab-theme-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.ctlab-theme-pill:hover { color: #fff; }
.ctlab-theme-pill[aria-pressed="true"] { background: #F59E0B; color: #1A1A2E; }
.ctlab-theme-pill:focus-visible { outline: 2px solid #F59E0B; outline-offset: 2px; }
.ctlab-theme-ic { font-size: 12px; line-height: 1; }

/* HC mode: make the control itself high-contrast too. */
html[data-theme="hc"] .ctlab-theme { background: transparent; border-color: #FFFFFF; }
html[data-theme="hc"] .ctlab-theme-pill { color: #FFFFFF; }
html[data-theme="hc"] .ctlab-theme-pill[aria-pressed="true"] { background: #FFFFFF; color: #000000; }

@media (max-width: 560px) { .ctlab-theme-lbl { display: none; } }