Media

Audio / Video -- the <brio-media> element wraps a child <audio>
or <video>. Without JS, the child media keeps its native
`controls` attribute and the browser renders UA chrome -- a
functional, no-JS-required fallback.

On JS upgrade, brio-media strips the native `controls` and
inserts its own controls bar. The buttons and ranges in the bar
are media-specific atoms (.brio-media-play, .brio-media-timeline,
etc.) -- not .button / .input. Transport controls communicate
continuous playback state, not discrete-input user commands;
borrowing form chrome would suggest the wrong kind of control.
Each control styles itself directly off the host token set.

Tier-1 sizing for bare <audio>/<video> outside <brio-media>
lives in reset.css -- inline-size:100% on audio (UA intrinsic
widths vary too widely to leave at default), max-width:100%
on video (already in the existing media-elements rule).

Markup:
  <brio-media>
    <video src="..." poster="..." controls></video>
  </brio-media>

  <brio-media>
    <audio src="..." controls></audio>
  </brio-media>

Overlay variant -- `overlay` attribute on the host (video only).
Controls float absolutely on the bottom of the media with a gradient
scrim, recolor light-on-dark for legibility regardless of theme,
and the play button enlarges into a circular shape. JS adds an
`idle` attribute to the host while playing + idle to fade the
bar. Audio silently ignores `overlay` -- there's no surface to
fade against and the inline transport already serves the same
intent.

Author opt-out attributes on the host: `no-volume` (suppresses
the mute button + volume slider), `no-fullscreen` (suppresses
the fullscreen button on video). brio-media is a custom element
and owns its attribute namespace, so all four modifiers --
`overlay`, `idle`, `no-volume`, `no-fullscreen` -- are bare
attributes rather than data-* prefixed.

Range progress fill technique:
  WebKit has no native filled-portion pseudo. We render the fill
  as a linear-gradient on the track, with a CSS custom property
  `--value` (0-100) set by JS on every value change. Firefox uses
  the native `::-moz-range-progress` pseudo, which the browser
  advances automatically -- the JS-set `--value` is harmless there.