/* Widget chrome for "Why So Many Matrix Factorizations".
 *
 * The two widgets encode meaning in hue and draw in fixed hex values, mirrored
 * in widgets.js (`const C`). Change one, change both. That is the treatment
 * AGENTS.md prescribes for the pre-kit widgets: the chart stays on a light card
 * in both colour schemes rather than being recoloured.
 *
 * The chart alone is not enough, though. The bundle also writes ordinary divs
 * for the control row, the live equation and the note, and paints their text
 * `C.ink` (#1F2430). On the dark theme those sat on `--w-surface` (#14161B) and
 * were near-black on near-black: the chart read, the words around it did not.
 * These rules pin the whole widget -- chart and chrome together -- to the same
 * light card, so the fixed ink has the background it was chosen against.
 *
 * Scoped to the two mount ids, so nothing here touches the rest of the page,
 * which follows the reader's choice through the site tokens as usual.
 */

#quad-widget,
#cost-widget {
  background: #F4F5F7;
  color: #1F2430;
  border: 1px solid #D8DBE2;
  border-radius: 8px;
  padding: 0.85rem 1rem 1rem;
  margin: 1.25rem 0;
}

/* Every descendant inherits the card's ink rather than the page's. */
#quad-widget *,
#cost-widget * {
  color: inherit;
  border-color: #D8DBE2;
}

#quad-widget label,
#cost-widget label {
  color: #5F6672;
}

/* The controls are native inputs, which would otherwise render in the reader's
   own scheme and disappear against the light card. */
#quad-widget select,
#cost-widget select {
  background: #FFFFFF;
  color: #1F2430;
  border: 1px solid #D8DBE2;
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
}

#quad-widget input[type="range"],
#cost-widget input[type="range"] {
  accent-color: #4A3AA7;
}