/*
 * FORM CONTROLS — the base every block that renders one gets for free.
 *
 * ═══════════════════════════════════════════════════════════════════════
 *  WHY THIS SHEET EXISTS
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Browsers give <input>, <button>, <select> and <textarea> their OWN default
 * font — roughly 13.33px system UI — and it is NOT inherited from the page. A
 * control therefore renders visibly smaller than the prose beside it unless
 * every block that draws one remembers to say `font: inherit`.
 *
 * That remembering failed twice, which is why this file is not a nicety:
 *
 *   - `noon-theme.css` carried the rule, but scoped to [data-block="FormBlock"],
 *     so the Poll block shipped with small text on both buttons and its input
 *     and the operator caught it on the live site.
 *   - Worse, `noon-theme.css` is emitted ONLY when a theme document exists
 *     (lib/theme.tsx returns null on empty tokens), so on a theme-less install
 *     even FormBlock loses the rule. That one is still latent — every current
 *     deployment has a theme — but it is the same defect one step further out.
 *
 * A per-block rule is a rule each new block has to rediscover. This sheet is
 * the base, so the next block with a control cannot repeat either failure.
 *
 * ═══════════════════════════════════════════════════════════════════════
 *  WHAT BELONGS HERE, AND WHAT DOES NOT
 * ═══════════════════════════════════════════════════════════════════════
 *
 * ONLY rules that correct a browser default or bind a control to a theme
 * token — things every control wants regardless of which block drew it.
 * Layout, spacing, borders and block-specific sizing stay in the block's own
 * sheet, because those are design decisions about a particular component and
 * hoisting them here would silently restyle every other block's controls.
 *
 * Emitted by `lib/controls.tsx`, referenced only on pages that actually render
 * a control, and deduped by React's <link precedence> like every other sheet
 * in this app. A page with no form and no poll never loads it.
 *
 * Every rule is in the `noon` cascade layer, so operator `customCss`
 * (unlayered) beats it regardless of specificity — the FULL rationale lives
 * ONCE, in `noon-theme.css`.
 */

@layer noon {
  /* THE BROWSER DEFAULT THIS SHEET EXISTS FOR. `font` and not `font-size`: the
 * family and weight are inherited just as wrongly as the size, and a control
 * set in the page's size but the browser's family still reads as foreign. */
  :is(input, button, select, textarea) {
    font: inherit;
  }

  /* Native controls, re-tinted to the site's accent.
 *
 * `accent-color` re-tints the control the browser and assistive technology
 * already know. That is the point: the usual alternative — `appearance: none`
 * plus a hand-built box — has to re-implement the checked mark, the
 * indeterminate state, disabled, the focus ring, Windows high-contrast and
 * forced-colors, and in practice misses at least one.
 *
 * The fallback is a real colour rather than `initial`, so a theme-less install
 * still gets a deliberate one instead of the browser's default blue. */
  :is(input[type="checkbox"], input[type="radio"], progress, input[type="range"]) {
    accent-color: var(--noon-accent, #4338ca);
  }

  /* The FormBlock's honeypot (form-block.tsx, Ruling 2.7): a REAL text input,
 * off-screen for people and assistive technology, within reach of a naive
 * bot. It is a rule HERE and not an inline style because a component carries
 * no style prop (TOK-03), and because this sheet — unlike noon-theme.css — is
 * present on every FormBlock render, themed or not. */
  [data-noon-honeypot] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* ── close of @layer noon ── */
}