ui: media filtering is a per-theme setting, not a night-mode hardcode

Filtering media was keyed on `data-theme="night"`, which made it a property of
the theme that no user could turn off.  Some people want their media tinted to
match the interface; some want to see the actual image.

A theme now declares a filter and whether it starts on, and the user decides:

  night   night-red    on by default.  An unfiltered thumbnail undoes dark
                       adaptation, which is the whole point of the mode.
  amber   amber-mono   off by default.  Amber is a look, not a night-vision
                       aid, so media keeps its real colors until asked for.
  light   -            no filter offered, so no toggle is shown.
  dark    -

The choice is stored per theme, so wanting amber's tint says nothing about
wanting night's.  The toggle lives in the theme picker, which puts it on the
Settings page and in the gallery at once.

Mechanically the rules now key on a `data-media-filter` attribute rather than
`data-theme`: a rule keyed on the theme could not be turned off.  index.html
stamps that attribute before first paint alongside data-theme -- without it,
night mode paints a screen of unfiltered thumbnails while the bundle arrives
over a hotspot, costing the user the adaptation the theme exists to protect.
Tests cover both the attribute rule and the fact that the inline script's
duplicated ids and defaults still agree with names.ts.

The amber matrix is the same luminance collapse tinted to #ff9500 (red full,
green 0.584, blue zero) with a gentler gamma than night's: amber carries far
more luminance and clips to a flat wash otherwise.

The gallery gains a Media filtering section showing the WROLPi logo filtered,
beside an unfiltered copy that opts out with `night-unfiltered`.  That copy is
behind a click on purpose -- an unfiltered image is a bright patch, and night
mode should not spring one on someone reading in the dark.

ui-design.md gains the media filtering contract it never got in Phase 0,
including the note that a Phase 3 custom theme names an existing filter id and
cannot ship its own matrix, since that would be code rather than data.

app/src/components/ThemeSamplePage.js

@@ -62,6 +62,7 @@ export function ThemeSamplePage() {
     const [hotspot, setHotspot] = useState(true);
     const [dismissed, setDismissed] = useState(false);
     const [modalOpen, setModalOpen] = useState(false);
+    const [realColors, setRealColors] = useState(false);
 
     return <div style={{maxWidth: 1060, margin: '0 auto', padding: '20px 16px 60px', color: 'var(--text)'}}>
         <h1 style={{fontSize: 21, fontWeight: 600, margin: '8px 0 4px'}}>Component gallery</h1>
@@ -80,6 +81,53 @@ export function ThemeSamplePage() {
             </Panel>
         </Section>
 
+        <Section label='Media filtering'>
+            <Panel>
+                <div style={{display: 'flex', gap: 18, flexWrap: 'wrap', alignItems: 'flex-start'}}>
+                    <div>
+                        {/*
+                          A real <img>, so it goes through whatever filter the current theme
+                          applies — this is the only way to see the filter working without
+                          leaving the page.  The unfiltered copy beside it opts out with
+                          `night-unfiltered`, so the two can be compared side by side.
+                        */}
+                        <img src='/icon.svg' alt='The WROLPi logo, filtered like any other media'
+                             width={104} height={104}/>
+                        <p style={{fontSize: 11, color: 'var(--muted)', margin: '4px 0 0'}}>
+                            Filtered
+                        </p>
+                    </div>
+                    <div>
+                        {/*
+                          Kept behind a click: an unfiltered image is a bright patch, and
+                          leaving one on screen in night mode would cost a user the dark
+                          adaptation they came here to protect.  They can ask for it.
+                        */}
+                        {realColors
+                            ? <img className='night-unfiltered' src='/icon.svg'
+                                   alt='The WROLPi logo, unfiltered' width={104} height={104}/>
+                            : <Button role='cancel' icon='eye' style={{width: 104, height: 104}}
+                                      onClick={() => setRealColors(true)}>Show</Button>}
+                        <p style={{fontSize: 11, color: 'var(--muted)', margin: '4px 0 0'}}>
+                            Real colors
+                        </p>
+                    </div>
+                    <p style={{fontSize: 12, color: 'var(--muted)', margin: 0, maxWidth: 430}}>
+                        Images, video, PDFs, embedded pages, and the map canvas cannot read theme
+                        tokens, so a monochrome theme remaps them with an SVG color matrix instead.
+                        Night filters to red unless you turn it off; amber tints to match only if
+                        you ask. Light and dark offer no filter, so both images look the same here.
+                        <br/><br/>
+                        Use the toggle in the theme picker above to see the difference. An
+                        element can opt out with <code>night-unfiltered</code> — that is what
+                        the right-hand copy does, which is why it is behind a click: an
+                        unfiltered image is a bright patch, and night mode should not spring
+                        one on you.
+                    </p>
+                </div>
+            </Panel>
+        </Section>
+
         <Section label='Headers'>
             <Panel>
                 <Header as='h1'>Page title (h1)</Header>