/* Lets a StackButton or StackInput keep a look a page defines for itself.

   StackButton always renders h-10, whitespace-nowrap, inline-flex and the rest, which turned every
   tile, row, tab and chip into a 40px button. Those utilities come from two places: the package's sheet,
   in @layer utilities, and our own tailwind.css, which is unlayered. So this must load straight after
   tailwind.css: one class, same weight, later, beats the bundle. Anything heavier still beats this: a
   scoped rule (.x[b-hash]), a theme rule (.pf-theme .x), any sheet loaded later, and any inline style.
   A single-class rule in a sheet loaded earlier would lose, so app.css and mk-base.css carry a
   .x.mk-plain copy of each such rule.

   mk-plain  a StackButton styled by the page rather than by a variant. Always with Size="icon": the other
             sizes add px-5/py-2, and Bootstrap's rules of the same name are !important, so nothing here
             could cancel them. icon adds only h-10 and w-10, which this does.
   mk-bare   a StackInput/StackTextarea whose wrapper steps aside, so the inner control is laid out and
             styled exactly as a page's inline style or parent selector says. */
.mk-plain {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 0;
  gap: normal;
  align-items: normal;
  justify-content: normal;
  white-space: normal;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* In a layer so that a page's own :hover, however light, always wins; only the variant's tint loses. */
@layer mk-control-reset {
  .mk-plain:hover {
    background-color: transparent;
    color: inherit;
  }
}

.mk-bare {
  display: contents;
}

.mk-bare > input,
.mk-bare > textarea {
  height: auto;
  flex: initial;
  min-width: revert;
  outline: revert;
}

/* --color-primary and --bs-primary-rgb are fills, too dark for text on a dark surface. */
.dark .text-primary {
  color: var(--mk-primary-ink) !important;
}