wordmark 0.21.0 → 0.23.0

data/README.md

@@ -16,7 +16,7 @@ Published three ways from this repo:
 
 | Surface | Where | What it is for |
 | --- | --- | --- |
-| Site | https://design.easyfaa.com (staging: https://design.houseparty.dev) | A stable URL for every asset, and a showcase of them |
+| Site | https://design.easyfaa.com | A stable URL for every asset, and a showcase of them |
 | Gem | `wordmark` on RubyGems | A Rails engine: serves the same tree from the gem, and the helpers |
 | npm | `easyfaa` | The same built stylesheet and script, for any CDN that carries it |
 
@@ -63,24 +63,52 @@ after it, and nothing else. A host wanting more copies
 it into its own `app/views/layouts/`, which wins on being earlier in the view paths.
 
 Which of the family an app is, the gem reads off the Rails application's own name: the
-`Goldrush` of `Goldrush::Application`. That is what its tab wears, what `easyfaa_head_tags`
-links without an argument, and whose page the engine answers `/down.html` with — the app's
-mark in the middle and the house's at the foot. An app the family has no mark for wears the
-horizon. The same page stands at `https://design.easyfaa.com/down/fountain` for Heroku's
-`MAINTENANCE_PAGE_URL`, which has to be somewhere the app is not — without the `.html`,
-which Pages redirects away from.
+`Tower` of `Tower::Application`. That is what its tab wears and what `easyfaa_head_tags`
+links without an argument. An app the family has no mark for wears the horizon. A page per
+app stands at `https://design.easyfaa.com/down/tower` for Heroku's `MAINTENANCE_PAGE_URL`,
+which has to be somewhere the app is not.
 
 With the gem in the bundle an app serves `/css/easyfaa.css`, `/js/easyfaa.js`,
-`/theme/*`, `/font/*`, `/logo/*` and `/favicon/*` itself — and its own version's copy under
-`/v0.15.0/`, which is what the head helper links, cached for a year — answers a 400, 404, 406,
-422 or 500 with the house's own page, and answers `/down.html` with this app's.
+`/theme/*`, `/font/*`, `/logo/*` and `/favicon/*` itself, answers a 400, 404, 422 or 500 with
+the same page as every app, and answers `/down.html` with the page it shows while it is down.
+
+## The easy design system
+
+What every easyFAA app's pages are drawn with. The stylesheets, scripts, fonts and icons are
+under `app/assets`, which the host's asset pipeline reads as its own:
+
+```erb
+<%# The app's own layout fills the slots, then renders the shared page. %>
+<% content_for :easy_head do %><title>easyFAA</title><% end %>
+<% content_for :site_brand, "easyFAA" %>
+<% content_for :site_nav do %><%= link_to "Sign in", sign_in_path %><% end %>
+<%= javascript_include_tag "easy/modal", "easy/pin_code", defer: true %>
+<%= render template: "layouts/easy/site" %>
+```
+
+`layouts/easy/site` links `easy/tokens`, `easy/base`, `easy/layout` and `easy/components` and
+yields `:easy_head`, `:easy_stylesheets`, `:body_class`, `:site_brand_url`, `:site_brand`,
+`:site_nav`, `:sky_band`, `:page_class`, `:site_footer` and `:body_end`. The partials are
+`easy/pin_code`, `easy/modal` (a layout), `easy/flyer`, `easy/report_head` and
+`easy/mailer/code`; the scripts beside them are in `app/assets/javascripts/easy`.
+
+`easy_icon "plane"` draws an icon from the sprite every page shares (`easy_icon_href` is its
+address), and `easy_aircraft_avatar AircraftAvatar.for(...)` an aircraft's silhouette until it
+has a picture.
+
+The error pages name easyFAA, or the site an app names for the request:
+
+```ruby
+Wordmark.site = ->(request) { ['easyAnnual', 'https://easyannual.com/'] }
+```
+
+The dummy app's `/guide` is the style guide: every token and component, drawn, with its markup.
 
 ## Which app this is
 
-Read off the Rails application's own name, the `Goldrush` of `Goldrush::Application`. That is
-what its tab wears, what `easyfaa_head_tags` links without an argument, and whose page the
-engine answers `/down.html` with — the app's mark in the middle and the house's at the foot. An
-app the family has no mark for wears the horizon.
+Read off the Rails application's own name, the `Tower` of `Tower::Application`. That is
+what its tab wears and what `easyfaa_head_tags` links without an argument. An app the family
+has no mark for wears the horizon.
 
 ## The helpers
 
@@ -98,10 +126,10 @@ app the family has no mark for wears the horizon.
     differently, so equal sizes never align: every mark is rendered at a box of its own and
     pushed down by its own nudge, and its ink then stands on the baseline. %>
 <%= easyfaa_logo %>
-<%= easyfaa_logo app: :fountain, href: root_path, class: 'fs-3' %>
+<%= easyfaa_logo app: :tower, href: root_path, class: 'fs-3' %>
 
 <%# An asset on the design site, for a page this app does not serve — a mail, say. %>
-<%= image_tag easyfaa_url('logo/fountain.png') %>
+<%= image_tag easyfaa_url('logo/tower.png') %>
 ```
 
 ## The layout
@@ -181,24 +209,16 @@ A page not on the gem links the two files from the site, and nothing else:
 <script type='module' src='https://design.easyfaa.com/js/easyfaa.js'></script>
 ```
 
-Those follow the latest release. Every release is also kept whole under its own version,
-forever and cached for a year, for a page that would rather move on its own terms:
+Those follow the latest release. bh's layer goes under the house's, from the same place, since
+the house is drawn on top of it and neither stands alone:
 
 ```html
-<link rel='stylesheet' href='https://design.easyfaa.com/v0.20.0/css/easyfaa.css'>
-<script type='module' src='https://design.easyfaa.com/v0.20.0/js/easyfaa.js'></script>
-```
-
-bh's layer goes under the house's, from the same place, since the house is drawn on top of it
-and neither stands alone:
-
-```html
-<link rel='stylesheet' href='https://design.easyfaa.com/v0.20.0/bh/css/bh.css'>
-<link rel='stylesheet' href='https://design.easyfaa.com/v0.20.0/css/easyfaa.css'>
+<link rel='stylesheet' href='https://design.easyfaa.com/bh/css/bh.css'>
+<link rel='stylesheet' href='https://design.easyfaa.com/css/easyfaa.css'>
 ```
 
 The palettes are beside it, at `bh/theme/nord.css` and the rest — bh's nine, copied out of the
-gem at build time. A version under `v` is never written again, so that URL is owed its bytes.
+gem at build time.
 
 A host with a Content Security Policy allows whichever origin it names for `style-src`,
 `script-src` and `font-src`.
@@ -235,22 +255,18 @@ serves them, and `spec.files` is `git ls-files`. `rake assets` rebuilds and fail
 result is committed, so a source edit cannot ship without its build.
 
 While the gem is read from a path, an app in development serves every file `no-cache`, so a
-rebuild shows on the next reload; only a production app keeps the versioned copy for a year.
-
-Every build also writes `public/v<version>/`, whole, with every URL inside pointing under
-that prefix, until the tag `v<version>` exists; from then on the folder is never written
-again, and a page that pinned it is owed the same bytes for good.
+rebuild shows on the next reload, and so does an app in production: only a font is kept.
 
-A release, in order: `CHANGELOG.md`, the version in `lib/easyfaa/version.rb` and
-`package.json`, `bundle exec rake` so the versioned copy is the release's, then commit, tag
-`v<version>`, `gem build` and `gem push`, and fast-forward `production` to `main` so the
-site carries both the latest and the versioned copy.
+A release, in order: `CHANGELOG.md`, the version in `lib/wordmark/version.rb` and
+`package.json`, `bundle exec rake`, then commit, tag `v<version>`, `gem build` and `gem push`,
+and fast-forward `production` to `main` so the site carries it.
 
 ## Cloudflare
 
-The site is a Cloudflare Pages project named `design` on this repo: production branch
-`production`, no build command, output directory `public`, custom domain
-`design.easyfaa.com`. `main` deploys as the branch alias `main.design.pages.dev`, which
-`design.houseparty.dev` is a CNAME to. `public/_headers` adds the CORS header a cross-origin
-module script and font need, and marks the hashed fonts immutable; everything else keeps
-Pages' default of revalidating on every load, so a URL never has to change between versions.
+The site is a Worker named `design` that serves `public/` as static assets at the custom
+domain `design.easyfaa.com`, as `wrangler.jsonc` says. Workers Builds deploys the `production`
+branch with `npx wrangler deploy` and no build command: what is committed is what is served.
+A path with no file is answered with `404.html` and a 404. `public/_headers` adds the CORS
+header a cross-origin module script and font need, and marks the hashed fonts immutable;
+everything else keeps Cloudflare's default of revalidating on every load, so a URL never has
+to change between versions.

data/app/assets/images/easy/sprite.svg

@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <symbol id="i-check" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8" fill="currentColor"/><path d="M4.5 8.2l2.3 2.3 4.7-4.9" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+  <symbol id="i-applies" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8" fill="currentColor"/><path d="M8 4.2v4.6" stroke="#fff" stroke-width="2" stroke-linecap="round"/><circle cx="8" cy="11.6" r="1.2" fill="#fff"/></symbol>
+  <symbol id="i-maybe" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8 4.2v4.6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="8" cy="11.6" r="1.2" fill="currentColor"/></symbol>
+  <symbol id="i-none" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="2"/><path d="M4.8 8h6.4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
+  <symbol id="i-alert" viewBox="0 0 16 16"><path d="M8 1.6L14.8 13.8H1.2Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M8 6v3.6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="8" cy="11.6" r="1" fill="currentColor"/></symbol>
+  <symbol id="i-superseded" viewBox="0 0 16 16"><path d="M3.5 1.75h5.75l3.25 3.25v9.25h-9z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M9.25 1.75v3.25h3.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M1.5 14.5L14.5 1.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></symbol>
+  <symbol id="i-engine" viewBox="0 0 24 24"><path fill="currentColor" d="M7 4v2h3v2H7l-2 2v3H3v-3H1v8h2v-3h2v3h3l2 2h8v-4h2v3h3V9h-3v3h-2V8h-6V6h3V4z"/></symbol>
+  <symbol id="i-propeller" viewBox="0 0 16 16"><g fill="currentColor"><path d="M8 7.4C5.4 6 5.3 2.1 8 .5c2.7 1.6 2.6 5.5 0 6.9z"/><path d="M8 7.4C5.4 6 5.3 2.1 8 .5c2.7 1.6 2.6 5.5 0 6.9z" transform="rotate(120 8 8)"/><path d="M8 7.4C5.4 6 5.3 2.1 8 .5c2.7 1.6 2.6 5.5 0 6.9z" transform="rotate(240 8 8)"/><circle cx="8" cy="8" r="2.1"/></g></symbol>
+  <symbol id="i-appliance" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13.07 6.45L15.31 6.84L15.31 9.16L13.07 9.55L12.68 10.49L13.99 12.35L12.35 13.99L10.49 12.68L9.55 13.07L9.16 15.31L6.84 15.31L6.45 13.07L5.51 12.68L3.65 13.99L2.01 12.35L3.32 10.49L2.93 9.55L0.69 9.16L0.69 6.84L2.93 6.45L3.32 5.51L2.01 3.65L3.65 2.01L5.51 3.32L6.45 2.93L6.84 0.69L9.16 0.69L9.55 2.93L10.49 3.32L12.35 2.01L13.99 3.65L12.68 5.51Z M8 5.6a2.4 2.4 0 1 0 0 4.8a2.4 2.4 0 1 0 0-4.8Z"/></symbol>
+  <symbol id="i-calendar" viewBox="0 0 16 16"><rect x="2" y="3" width="12" height="11" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M2 6.5h12M5 1.5v3M11 1.5v3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></symbol>
+<symbol id="i-newest" viewBox="0 0 16 16"><path d="M4 2.5v10M1.5 10l2.5 2.5L6.5 10M9 4h5.5M9 7.5h4M9 11h2.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+  <symbol id="i-oldest" viewBox="0 0 16 16"><path d="M4 13.5v-10M1.5 6L4 3.5 6.5 6M9 4h2.5M9 7.5h4M9 11h5.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+  <symbol id="i-search" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M15.5 15.5l5 5" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></symbol>
+  <symbol id="i-bookmark" viewBox="0 0 16 16"><path d="M4 1.5h8a.5.5 0 0 1 .5.5v12.3L8 11.2l-4.5 3.1V2a.5.5 0 0 1 .5-.5z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></symbol>
+  <symbol id="i-share" viewBox="0 0 16 16"><circle cx="12" cy="3.5" r="2" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="4" cy="8" r="2" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="12" cy="12.5" r="2" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M5.8 7l4.4-2.5M5.8 9l4.4 2.5" stroke="currentColor" stroke-width="1.5"/></symbol>
+  <symbol id="i-link" viewBox="0 0 16 16"><path d="M6.6 9.4l2.8-2.8M7 4.6l1.2-1.2a2.8 2.8 0 0 1 4 4L11 8.6M9 11.4l-1.2 1.2a2.8 2.8 0 0 1-4-4L5 7.4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></symbol>
+  <symbol id="i-out" viewBox="0 0 16 16"><path d="M9 2.5h4.5V7M13.5 2.5L7.5 8.5M11.5 9.5v3a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+  <symbol id="i-sun" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3.2" fill="currentColor"/><path d="M8 .8v2M8 13.2v2M.8 8h2M13.2 8h2M2.9 2.9l1.4 1.4M11.7 11.7l1.4 1.4M2.9 13.1l1.4-1.4M11.7 4.3l1.4-1.4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></symbol>
+  <symbol id="i-moon" viewBox="0 0 16 16"><path d="M13.5 10.2A6 6 0 0 1 5.8 2.5a6 6 0 1 0 7.7 7.7z" fill="currentColor"/></symbol>
+  <symbol id="i-monitor" viewBox="0 0 16 16"><rect x="1.2" y="2" width="13.6" height="9" rx="1.4" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M5.5 14.2h5M8 11v3.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></symbol>
+  <symbol id="i-plane" viewBox="0 0 24 24"><path d="M21 15.5v-2l-8-5V3.2a1.5 1.5 0 0 0-3 0V8.5l-8 5v2l8-2.5v5.2l-2 1.5V21l3.5-1 3.5 1v-1.3l-2-1.5V13z" fill="currentColor"/></symbol>
+  <symbol id="i-small-plane" viewBox="0 0 24 24"><path fill="currentColor" d="M8.2 1.1h7.6v1.1H8.2zM12 2.2c1.1 0 1.7 1.1 1.7 2.7v3.2h8.1c.5 0 .9.4.9.9v1.7c0 .5-.4.9-.9.9h-8.1l-.8 7.1h2.9c.5 0 .8.3.8.8v1c0 .5-.3.8-.8.8H8.2c-.5 0-.8-.3-.8-.8v-1c0-.5.3-.8.8-.8h2.9l-.8-7.1H2.2c-.5 0-.9-.4-.9-.9V9c0-.5.4-.9.9-.9h8.1V4.9c0-1.6.6-2.7 1.7-2.7z"/></symbol>
+  <symbol id="i-twin-plane" viewBox="0 0 24 24"><path fill="currentColor" d="M12 1.8c.9 0 1.5 1 1.5 2.6v13.4l-.5 2.8h-2l-.5-2.8V4.4c0-1.6.6-2.6 1.5-2.6zM1.3 10.2h21.4c.5 0 .8.3.8.8v1.4c0 .5-.3.8-.8.8H1.3c-.5 0-.8-.3-.8-.8V11c0-.5.3-.8.8-.8zM7 6.2c.7 0 1.2.5 1.2 1.2v7H5.8v-7c0-.7.5-1.2 1.2-1.2zM17 6.2c.7 0 1.2.5 1.2 1.2v7h-2.4v-7c0-.7.5-1.2 1.2-1.2zM4.8 5h4.4v1H4.8zM14.8 5h4.4v1h-4.4zM8.2 19.2h7.6c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5H8.2c-.3 0-.5-.2-.5-.5v-1c0-.3.2-.5.5-.5z"/></symbol>
+  <symbol id="s-x" viewBox="0 0 24 24"><path fill="currentColor" d="M17.8 3h3.1l-6.8 7.8L22 21h-6.2l-4.9-6.4L5.3 21H2.2l7.3-8.3L1.9 3h6.3l4.4 5.9zm-1.1 16.2h1.7L7.4 4.7H5.6z"/></symbol>
+  <symbol id="s-fb" viewBox="0 0 24 24"><path fill="currentColor" d="M13.6 22v-8.2h2.8l.4-3.3h-3.2V8.4c0-.9.3-1.6 1.6-1.6h1.7V3.9c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3v2.4H7.4v3.3h2.8V22z"/></symbol>
+  <symbol id="s-li" viewBox="0 0 24 24"><path fill="currentColor" d="M3.6 8.6h3.7V20.5H3.6zM5.45 2.8a2.15 2.15 0 110 4.3 2.15 2.15 0 010-4.3zM9.6 8.6h3.5v1.6h.1c.5-.9 1.7-1.9 3.5-1.9 3.8 0 4.5 2.5 4.5 5.7v6.5h-3.7v-5.8c0-1.4 0-3.2-1.9-3.2s-2.3 1.5-2.3 3.1v5.9H9.6z"/></symbol>
+  <symbol id="s-rd" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M19.7 5.3a1.6 1.6 0 11-1.5 2l-3.3-.7-1 4.4c2.2.1 4.2.8 5.6 1.9a2.2 2.2 0 113 3 4.3 4.3 0 010 .6c0 3.4-4 6.1-8.5 6.1S5.5 19.9 5.5 16.5v-.6a2.2 2.2 0 113-3c1.4-1 3.3-1.7 5.4-1.8l1.2-5.3 4 .9a1.6 1.6 0 01.6-1.4zM9.3 14.2a1.4 1.4 0 100 2.8 1.4 1.4 0 000-2.8zm5.4 0a1.4 1.4 0 100 2.8 1.4 1.4 0 000-2.8zm-5.2 4.3a.5.5 0 00-.3.9c.9.7 2 1 2.8 1s1.9-.3 2.8-1a.5.5 0 10-.6-.8c-.6.5-1.4.8-2.2.8s-1.6-.3-2.2-.8a.5.5 0 00-.3-.1z"/></symbol>
+  <symbol id="s-wa" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a10 10 0 00-8.6 15.1L2 22l5-1.3A10 10 0 1012 2zm0 1.8a8.2 8.2 0 11-4.2 15.3l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 0112 3.8zM8.6 7.2c-.2 0-.5 0-.8.3-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.3 5.2 4.5 2.6 1 3.1.8 3.7.8.6-.1 1.8-.7 2-1.5.3-.7.3-1.3.2-1.5l-.6-.4-2-1c-.3-.1-.5-.1-.7.1l-.9 1.2c-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.6.3-.5v-.5l-.9-2.3c-.2-.6-.5-.5-.7-.5z"/></symbol>
+  <symbol id="s-em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" d="M3 5.5h18v13H3zM3.5 6l8.5 7 8.5-7"/></symbol>
+  <!-- Aircraft avatars (a-): side views, nose right, drones from above; holes take the avatar background. -->
+  <symbol id="a-high-wing" viewBox="1 1 46 46" fill="currentColor"><path d="M43.5 24.2C43.5 22 41.5 20.8 39 20.6L35 18.6H24.5L9 21.4H5V24.2L24 27.2H38.5C41.5 27.2 43.5 26.4 43.5 24.2Z"/><path d="M34.2 19.3L37.6 21H33.8V19.3ZM25.2 19.3H32.8V21H25.2Z" style="fill:var(--avatar-bg,#fff)"/><path d="M5 21.6L4 12.6H7.6L14 21Z"/><rect x="2.5" y="21.2" width="10.0" height="1.4" rx="0.7"/><rect x="21.5" y="16.6" width="13.0" height="2.0" rx="0.8"/><line x1="31" y1="18.4" x2="27" y2="26.4" stroke="currentColor" stroke-width="1" stroke-linecap="round"/><rect x="44.4" y="15.5" width="1.2" height="17.4" rx="0.6"/><circle cx="44.2" cy="24.2" r="1.4"/><line x1="38.5" y1="27" x2="38.5" y2="32.2" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><circle cx="38.5" cy="33.6" r="2"/><line x1="28" y1="27" x2="29" y2="32" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><circle cx="29" cy="33.6" r="2.3"/></symbol>
+  <symbol id="a-high-wing-tailwheel" viewBox="1 1 46 46" fill="currentColor"><g transform="rotate(-8 24 28)"><path d="M43.5 24.2C43.5 22 41.5 20.8 39 20.6L35 18.6H24.5L9 21.4H5V24.2L24 27.2H38.5C41.5 27.2 43.5 26.4 43.5 24.2Z"/><path d="M34.2 19.3L37.6 21H33.8V19.3ZM25.2 19.3H32.8V21H25.2Z" style="fill:var(--avatar-bg,#fff)"/><path d="M5 21.6L4 12.6H7.6L14 21Z"/><rect x="2.5" y="21.2" width="10.0" height="1.4" rx="0.7"/><rect x="21.5" y="16.6" width="13.0" height="2.0" rx="0.8"/><line x1="31" y1="18.4" x2="27" y2="26.4" stroke="currentColor" stroke-width="1" stroke-linecap="round"/><rect x="44.4" y="15.5" width="1.2" height="17.4" rx="0.6"/><circle cx="44.2" cy="24.2" r="1.4"/><line x1="32.5" y1="27" x2="34" y2="32" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><circle cx="34" cy="33.6" r="2.3"/><line x1="7.5" y1="23.8" x2="7" y2="25.6" stroke="currentColor" stroke-width="0.9" stroke-linecap="round"/><circle cx="7" cy="26.2" r="1.1"/></g></symbol>
+  <symbol id="a-low-wing" viewBox="1 1 46 46" fill="currentColor"><path d="M43.5 24.2C43.5 22 41.5 20.8 39 20.6L35 18.6H24.5L9 21.4H5V24.2L24 27.2H38.5C41.5 27.2 43.5 26.4 43.5 24.2Z"/><path d="M34.2 19.3L37.6 21H33.8V19.3ZM25.2 19.3H32.8V21H25.2Z" style="fill:var(--avatar-bg,#fff)"/><path d="M5 21.6L4 12.6H7.6L14 21Z"/><rect x="2.5" y="21.2" width="10.0" height="1.4" rx="0.7"/><rect x="20" y="26.4" width="14.5" height="2.0" rx="0.8"/><rect x="44.4" y="15.5" width="1.2" height="17.4" rx="0.6"/><circle cx="44.2" cy="24.2" r="1.4"/><line x1="38.5" y1="27" x2="38.5" y2="32.2" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><circle cx="38.5" cy="33.6" r="2"/><line x1="28" y1="27" x2="29" y2="32" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><circle cx="29" cy="33.6" r="2.3"/></symbol>
+  <symbol id="a-low-wing-retractable" viewBox="1 1 46 46" fill="currentColor"><path d="M43.5 24.2C43.5 22 41.5 20.8 39 20.6L35 18.6H24.5L9 21.4H5V24.2L24 27.2H38.5C41.5 27.2 43.5 26.4 43.5 24.2Z"/><path d="M34.2 19.3L37.6 21H33.8V19.3ZM25.2 19.3H32.8V21H25.2Z" style="fill:var(--avatar-bg,#fff)"/><path d="M5 21.6L4 12.6H7.6L14 21Z"/><rect x="2.5" y="21.2" width="10.0" height="1.4" rx="0.7"/><rect x="20" y="26.4" width="14.5" height="2.0" rx="0.8"/><rect x="44.4" y="15.5" width="1.2" height="17.4" rx="0.6"/><circle cx="44.2" cy="24.2" r="1.4"/></symbol>
+  <symbol id="a-low-wing-tailwheel" viewBox="1 1 46 46" fill="currentColor"><g transform="rotate(-8 24 28)"><path d="M43.5 24.2C43.5 22 41.5 21 39 21H31L28 18.4C26.5 17.6 23.5 17.6 22 18.6L19.5 21H9L5 21.4V24L24 27H38.5C41.5 27 43.5 26.4 43.5 24.2Z"/><path d="M5 21.6L4 12.6H7.6L14 21Z"/><rect x="2.5" y="21.2" width="10.0" height="1.4" rx="0.7"/><rect x="20" y="26.4" width="14.5" height="2.0" rx="0.8"/><rect x="44.4" y="15.5" width="1.2" height="17.4" rx="0.6"/><circle cx="44.2" cy="24.2" r="1.4"/><line x1="32.5" y1="27" x2="34" y2="32" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><circle cx="34" cy="33.6" r="2.3"/><line x1="7.5" y1="23.8" x2="7" y2="25.6" stroke="currentColor" stroke-width="0.9" stroke-linecap="round"/><circle cx="7" cy="26.2" r="1.1"/></g></symbol>
+  <symbol id="a-biplane" viewBox="1 1 46 46" fill="currentColor"><g transform="rotate(-8 24 28)"><path d="M43.5 24.2C43.5 22 41.5 20.8 39 20.6L31 20.4C30 18.4 26.5 18.4 25.5 20.4L9 21.4H5V24.2L24 27.2H38.5C41.5 27.2 43.5 26.4 43.5 24.2Z"/><path d="M5 21.6L4 12.6H7.6L14 21Z"/><rect x="2.5" y="21.2" width="10.0" height="1.4" rx="0.7"/><rect x="20" y="13.6" width="14" height="2.0" rx="0.8"/><line x1="25" y1="15.4" x2="26.5" y2="19.5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/><line x1="29.5" y1="15.4" x2="30" y2="19" stroke="currentColor" stroke-width="1" stroke-linecap="round"/><rect x="21" y="26.4" width="13" height="1.8" rx="0.8"/><line x1="22" y1="15.4" x2="22" y2="26.6" stroke="currentColor" stroke-width="1" stroke-linecap="round"/><line x1="32.5" y1="15.4" x2="32.5" y2="26.6" stroke="currentColor" stroke-width="1" stroke-linecap="round"/><rect x="44.4" y="15.5" width="1.2" height="17.4" rx="0.6"/><circle cx="44.2" cy="24.2" r="1.4"/><line x1="32.5" y1="27" x2="34" y2="32" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><circle cx="34" cy="33.6" r="2.3"/><line x1="7.5" y1="23.8" x2="7" y2="25.6" stroke="currentColor" stroke-width="0.9" stroke-linecap="round"/><circle cx="7" cy="26.2" r="1.1"/></g></symbol>
+  <symbol id="a-ag-plane" viewBox="1 1 46 46" fill="currentColor"><g transform="rotate(-8 24 28)"><path d="M43.5 24.4C43.5 22.2 42 21.4 40 21.2L37 18.8H31.5L28.5 15.6C27.5 14.8 24.5 14.8 23.5 15.8L21.5 19.6L9 21.4H5V24.2L24 27.6H38.5C41.5 27.6 43.5 26.6 43.5 24.4Z"/><path d="M5 21.6L4 12.6H7.6L14 21Z"/><rect x="2.5" y="21.2" width="10.0" height="1.4" rx="0.7"/><rect x="20" y="26.4" width="14.5" height="2.0" rx="0.8"/><rect x="19.5" y="29.4" width="15.5" height="0.8" rx="0.4"/><rect x="44.4" y="15.5" width="1.2" height="17.4" rx="0.6"/><circle cx="44.2" cy="24.2" r="1.4"/><line x1="32.5" y1="27" x2="34" y2="32" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><circle cx="34" cy="33.6" r="2.3"/><line x1="7.5" y1="23.8" x2="7" y2="25.6" stroke="currentColor" stroke-width="0.9" stroke-linecap="round"/><circle cx="7" cy="26.2" r="1.1"/></g></symbol>
+  <symbol id="a-floatplane" viewBox="1 1 46 46" fill="currentColor"><path d="M43.5 24.2C43.5 22 41.5 20.8 39 20.6L35 18.6H24.5L9 21.4H5V24.2L24 27.2H38.5C41.5 27.2 43.5 26.4 43.5 24.2Z"/><path d="M34.2 19.3L37.6 21H33.8V19.3ZM25.2 19.3H32.8V21H25.2Z" style="fill:var(--avatar-bg,#fff)"/><path d="M5 21.6L4 12.6H7.6L14 21Z"/><rect x="2.5" y="21.2" width="10.0" height="1.4" rx="0.7"/><rect x="21.5" y="16.6" width="13.0" height="2.0" rx="0.8"/><line x1="31" y1="18.4" x2="27" y2="26.4" stroke="currentColor" stroke-width="1" stroke-linecap="round"/><rect x="44.4" y="15.5" width="1.2" height="17.4" rx="0.6"/><circle cx="44.2" cy="24.2" r="1.4"/><path d="M13 32.4H38C41 32.4 42.6 31.4 43.4 29.8L44 30.6C43.4 33 41.4 34.8 38 34.8H15L13 33.8Z"/><line x1="22" y1="27" x2="21" y2="32.6" stroke="currentColor" stroke-width="1" stroke-linecap="round"/><line x1="33.5" y1="27" x2="34.5" y2="32.6" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></symbol>
+  <symbol id="a-single-turboprop" viewBox="1 1 46 46" fill="currentColor"><path d="M45 24.4C45 22.6 43.6 21.6 41.6 21.4L33 20.8L30 18.4H21L7 21.2H3.6V24L22 27.4H41.6C43.8 27.4 45 26.4 45 24.4Z"/><g style="fill:var(--avatar-bg,#fff)"><path d="M29.2 19.1L31 20.6H28.4V19.1Z"/><rect x="21.6" y="19.1" width="5.8" height="1.5" rx="0.3"/></g><rect x="35.5" y="19.6" width="2.5" height="2.0" rx="0.5"/><path d="M3.6 21.4L2.6 11.6H6.6L13 21Z"/><rect x="1.2" y="21" width="10.4" height="1.4" rx="0.7"/><rect x="18" y="16.4" width="14" height="2.0" rx="0.8"/><line x1="28" y1="18.2" x2="24.6" y2="26.6" stroke="currentColor" stroke-width="1" stroke-linecap="round"/><path d="M17 27.4H34C35.4 27.4 36 28 36 28.8C36 29.6 35.4 30.2 34 30.2H19Z"/><rect x="45.6" y="15.4" width="1.2" height="18.0" rx="0.6"/><line x1="40" y1="27.4" x2="40" y2="31.6" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><circle cx="40" cy="33.2" r="1.8"/><line x1="26" y1="30" x2="27" y2="32" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><circle cx="27" cy="33.4" r="2.1"/></symbol>
+  <symbol id="a-twin" viewBox="1 1 46 46" fill="currentColor"><path d="M45 24.6C45 22.8 43 21.6 40 21.2L35.4 18.6H24.5L9 21.4H5V24.2L24 27.2H40C43 27.2 45 26.4 45 24.6Z"/><g style="fill:var(--avatar-bg,#fff)"><path d="M34.6 19.3L37.8 21H34.2V19.3Z"/><rect x="25.2" y="19.3" width="7.8" height="1.7" rx="0.3"/></g><path d="M5 21.6L4 12.6H7.6L14 21Z"/><rect x="2.5" y="21.2" width="10.0" height="1.4" rx="0.7"/><rect x="19" y="26.4" width="14" height="2.0" rx="0.8"/><path d="M20 24.2H34.6C37.2 24.2 38.4 25.8 38.4 27.6C38.4 29.4 37.2 31 34.6 31H20Z"/><ellipse cx="38.4" cy="27.6" rx="0.8" ry="7"/></symbol>
+  <symbol id="a-business-jet" viewBox="1 1 46 46" fill="currentColor"><path d="M46.6 24.8C45 22.6 42.6 21.2 39 20.8L36 19.2H20L7 21.2H4V24.4L20 27H38C42.6 27 45.6 26.2 46.6 24.8Z"/><g style="fill:var(--avatar-bg,#fff)"><path d="M37.8 20.2L39.8 21.2H37.2Z"/><circle cx="32" cy="21.2" r="0.8"/><circle cx="29" cy="21.2" r="0.8"/><circle cx="26" cy="21.2" r="0.8"/><circle cx="23" cy="21.4" r="0.8"/></g><path d="M4.4 21.4L5.4 10.6H8.4L13.6 21Z"/><rect x="2.6" y="9.8" width="8.8" height="1.4" rx="0.7"/><path d="M9 17.4H17C19 17.4 20 18.4 20 19.4C20 20.4 19 21.4 17 21.4H9Z"/><path d="M18 26.4L30 26.2L34 27.8L22 28.4Z"/></symbol>
+  <symbol id="a-airliner" viewBox="1 1 46 46" fill="currentColor"><path d="M47 24.6C46 22.4 44 21.2 41 21.2H8L3.4 18.6H1V24.4L6 27.4H41C44 27.4 46.4 26.2 47 24.6Z"/><g style="fill:var(--avatar-bg,#fff)"><path d="M42 22.2L44.4 23.2H41.6Z"/><circle cx="10" cy="23" r="0.55"/><circle cx="13" cy="23" r="0.55"/><circle cx="16" cy="23" r="0.55"/><circle cx="19" cy="23" r="0.55"/><circle cx="22" cy="23" r="0.55"/><circle cx="25" cy="23" r="0.55"/><circle cx="28" cy="23" r="0.55"/><circle cx="31" cy="23" r="0.55"/><circle cx="34" cy="23" r="0.55"/><circle cx="37" cy="23" r="0.55"/></g><path d="M1.4 19L1 8.8H4.4L11.2 21.2Z"/><rect x="0" y="20.4" width="8.6" height="1.4" rx="0.7"/><path d="M18 26.6L30 26.4L34 28.4L22 29Z"/><path d="M24 28.2H31C32.6 28.2 33.4 29 33.4 30C33.4 31 32.6 31.8 31 31.8H24Z"/></symbol>
+  <symbol id="a-helicopter" viewBox="1 1 46 46" fill="currentColor"><path d="M39 26.4C39 21.4 36 18.4 31 18.4H27L24.6 16.4H18.6L16 19L4.6 21.6V23.4L19 25.4C19.6 28.4 21.6 30 24.6 30H35.4C37.6 30 39 28.6 39 26.4Z"/><g style="fill:var(--avatar-bg,#fff)"><path d="M31.4 19.8C35 19.8 37.4 22.4 37.6 25.8H32Z"/><rect x="25.4" y="20.6" width="4.0" height="4.4" rx="0.6"/></g><rect x="22.6" y="12.6" width="1.8" height="4" rx="0.5"/><rect x="4" y="11.4" width="40" height="1.4" rx="0.7"/><path d="M4.8 22L3 13.6H5.6L8.8 21.6Z"/><rect x="9" y="21.4" width="6" height="1.2" rx="0.5"/><circle cx="4.4" cy="17.4" r="2.6" fill="none" stroke="currentColor" stroke-width="0.8"/><line x1="25" y1="30" x2="24.4" y2="33" stroke="currentColor" stroke-width="1" stroke-linecap="round"/><line x1="35" y1="30" x2="35.6" y2="33" stroke="currentColor" stroke-width="1" stroke-linecap="round"/><rect x="20" y="32.8" width="20" height="1.2" rx="0.6"/></symbol>
+  <symbol id="a-heavy-helicopter" viewBox="1 1 46 46" fill="currentColor"><path d="M43 26C43 22 40.4 19.6 36.4 19.4L33 17.4H17.4L15 19.6L3.6 20.4V22.8L15 24.4V28.4C15 29.4 15.8 30 17 30H39.4C41.6 30 43 28.6 43 26Z"/><g style="fill:var(--avatar-bg,#fff)"><path d="M37 20.8C39.6 21 41.2 22.6 41.6 25H37.4Z"/><rect x="30" y="21.4" width="4.4" height="3.0" rx="0.5"/><rect x="23.4" y="21.4" width="4.4" height="3.0" rx="0.5"/><rect x="17.6" y="21.4" width="4.0" height="3.0" rx="0.5"/></g><path d="M14.6 17.4H34.6L33 15.6H17Z"/><rect x="24.4" y="11.4" width="2.0" height="4.4" rx="0.5"/><rect x="2.4" y="10.4" width="44.6" height="1.4" rx="0.7"/><path d="M4 21L2.4 12.6H5.4L9 20.6Z"/><rect x="5" y="19.4" width="7" height="1.2" rx="0.5"/><line x1="37" y1="30" x2="37" y2="32.6" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><circle cx="37" cy="34" r="1.8"/><line x1="21" y1="30" x2="21" y2="32.6" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><circle cx="21" cy="34" r="1.9"/><circle cx="4.6" cy="23.6" r="1"/></symbol>
+  <symbol id="a-multirotor-drone" viewBox="1 1 46 46" fill="currentColor"><g transform="translate(24 24) scale(.84) translate(-24 -24)"><line x1="11" y1="11" x2="37" y2="37" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/><line x1="37" y1="11" x2="11" y2="37" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/><circle cx="11" cy="11" r="7.4" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="37" cy="11" r="7.4" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="11" cy="37" r="7.4" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="37" cy="37" r="7.4" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="11" cy="11" r="1.6"/><circle cx="37" cy="11" r="1.6"/><circle cx="11" cy="37" r="1.6"/><circle cx="37" cy="37" r="1.6"/><rect x="18.4" y="17" width="11.2" height="14" rx="3"/><g style="fill:var(--avatar-bg,#fff)"><rect x="20.6" y="19.6" width="6.8" height="4.4" rx="1.4"/></g><rect x="9" y="40.6" width="30" height="1.4" rx="0.7"/></g></symbol>
+  <symbol id="a-fixed-wing-drone" viewBox="1 1 46 46" fill="currentColor"><g transform="translate(24 24) scale(.84) translate(-24 -24)"><path d="M24 6C25.6 6 26.6 7.6 26.6 10V36H21.4V10C21.4 7.6 22.4 6 24 6Z"/><rect x="2" y="17" width="44" height="4.4" rx="1.4"/><rect x="11" y="9" width="2" height="26" rx="1"/><rect x="35" y="9" width="2" height="26" rx="1"/><circle cx="12" cy="9" r="4.4" fill="none" stroke="currentColor" stroke-width="1.1"/><circle cx="12" cy="35" r="4.4" fill="none" stroke="currentColor" stroke-width="1.1"/><circle cx="36" cy="9" r="4.4" fill="none" stroke="currentColor" stroke-width="1.1"/><circle cx="36" cy="35" r="4.4" fill="none" stroke="currentColor" stroke-width="1.1"/><rect x="17" y="36" width="14" height="2" rx="0.8"/><ellipse cx="24" cy="40" rx="5.4" ry="1"/></g></symbol>
+  <symbol id="a-glider" viewBox="1 1 46 46" fill="currentColor"><path d="M46 24.4C46 23 44 22.2 41 21.8L36 20.2C34.4 19.4 31 19.4 29.6 20.4L28 21.4L8 22.6H4.4V24.6L8 25.2L28 27H40C44 27 46 25.8 46 24.4Z"/><g style="fill:var(--avatar-bg,#fff)"><path d="M35.8 21.4C34.6 20.4 31.6 20.4 30.4 21.4Z"/></g><path d="M4.6 22.8L5.6 12H8.4L12 22.6Z"/><rect x="3.4" y="11.2" width="8.2" height="1.2" rx="0.6"/><rect x="22" y="22.2" width="11" height="1.4" rx="0.6"/><circle cx="30.4" cy="28" r="1.6"/></symbol>
+  <symbol id="a-balloon" viewBox="1 1 46 46" fill="currentColor"><path d="M24 2.6C32.6 2.6 38.6 8.4 38.6 16.4C38.6 23.6 31.6 29 27.2 32.6H20.8C16.4 29 9.4 23.6 9.4 16.4C9.4 8.4 15.4 2.6 24 2.6Z"/><g style="fill:var(--avatar-bg,#fff)"><path d="M19.6 4.4C17.4 9 17 20 21.4 31.6H22.6C19.4 20 19.8 9 21.6 3.8Z"/><path d="M28.4 4.4C30.6 9 31 20 26.6 31.6H25.4C28.6 20 28.2 9 26.4 3.8Z"/></g><line x1="21" y1="32.6" x2="21.6" y2="38.6" stroke="currentColor" stroke-width="0.7" stroke-linecap="round"/><line x1="27" y1="32.6" x2="26.4" y2="38.6" stroke="currentColor" stroke-width="0.7" stroke-linecap="round"/><rect x="20.4" y="38.2" width="7.2" height="6.0" rx="0.8"/></symbol>
+  <symbol id="a-trike" viewBox="1 1 46 46" fill="currentColor"><path d="M2 17.6L42 8.4C43.6 8.2 44.6 9 44.2 10.2L43.6 11.4L4 19.8Z"/><line x1="26" y1="13.6" x2="24" y2="25" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="26" y1="13.6" x2="34.6" y2="22.6" stroke="currentColor" stroke-width="0.9" stroke-linecap="round"/><line x1="26" y1="13.6" x2="30.6" y2="23.4" stroke="currentColor" stroke-width="0.9" stroke-linecap="round"/><line x1="30.6" y1="23.4" x2="34.6" y2="22.6" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/><path d="M38 27.4C38 25.4 36 24 33 24H24L20 25V29.4H34C36.6 29.4 38 28.8 38 27.4Z"/><ellipse cx="18.4" cy="27.2" rx="1" ry="6.2"/><line x1="34" y1="29.4" x2="35" y2="32.6" stroke="currentColor" stroke-width="1" stroke-linecap="round"/><circle cx="35" cy="34.2" r="1.8"/><line x1="23" y1="29.4" x2="22" y2="32.6" stroke="currentColor" stroke-width="1" stroke-linecap="round"/><circle cx="22" cy="34.2" r="1.9"/></symbol>
+  <symbol id="a-powered-parachute" viewBox="1 1 46 46" fill="currentColor"><path d="M4 13C10 4 38 4 44 13L41.6 14.6C35.6 8 12.4 8 6.4 14.6Z"/><line x1="7" y1="14" x2="22" y2="30" stroke="currentColor" stroke-width="0.6" stroke-linecap="round"/><line x1="17" y1="8.4" x2="23" y2="30" stroke="currentColor" stroke-width="0.6" stroke-linecap="round"/><line x1="31" y1="8.4" x2="25" y2="30" stroke="currentColor" stroke-width="0.6" stroke-linecap="round"/><line x1="41" y1="14" x2="26" y2="30" stroke="currentColor" stroke-width="0.6" stroke-linecap="round"/><path d="M34 32C34 30.2 32 29 29 29H20L16 30V34H30C32.6 34 34 33.4 34 32Z"/><circle cx="14.4" cy="31" r="5.2" fill="none" stroke="currentColor" stroke-width="1"/><circle cx="29" cy="36.4" r="1.7"/><circle cx="20" cy="36.4" r="1.8"/></symbol>
+</svg>

data/app/assets/javascripts/easy/flyer.js

@@ -0,0 +1,100 @@
+// The plane of render "easy/flyer": across the sky in 14 seconds on a gentle wave, nose along it, its trail behind it.
+// On a holiday, by the visitor's own calendar, it flies in the day's colors with a line of smoke per color: every day
+// is in this file, so whatever cached it, it's right at midnight. No plane where motion is off. ES5, for old phones.
+(function () {
+  if (!document.querySelectorAll || !document.createElementNS || !window.requestAnimationFrame) { return; }
+  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { return; }
+
+  var SKY = { trail: ['#5aa9e6'], opacity: 0.45 }, HANUKKAH = { plane: '#2f6fd0', trail: ['#2f6fd0', '#cfd8e3'] };
+  var GOLD = { plane: '#d4a514', trail: ['#d4a514', '#a8b0b8'] };
+  var USA = { plane: '#2f5fc4', trail: ['#d63a3a', '#ffffff', '#2f5fc4'] };
+  // Hanukkah's first day (25 Kislev) as a day of December, 2025 to 2045 (Nov 28 is -2); its days yield to the others.
+  var KISLEV_25 = [15, 5, 25, 13, 2, 21, 10, -2, 17, 7, 26, 14, 3, 22, 12, 0, 18, 8, 27, 15, 5];
+
+  // The holidays of a year, by "month-day": the plane's color, then its trail's, top to bottom. National Aviation Day
+  // is in pilot's-wings gold and blue, Wright Brothers Day in the Wright Flyer's muslin and spruce.
+  function holidays(year) {
+    var easter = easterOf(year), days = {};
+    for (var k = 0; k < 16; k++) { // last year's eight days of Hanukkah, reaching into January, then this year's
+      var y = year - 1 + (k >> 3), day = new Date(y, 11, KISLEV_25[y - 2025] + k % 8);
+      if (day.getFullYear() === year) { days[(day.getMonth() + 1) + '-' + day.getDate()] = HANUKKAH; }
+    }
+    days['1-1'] = days['12-31'] = GOLD;
+    days['2-14'] = { plane: '#e0457b', trail: ['#d62f4b', '#f07aa0'] };
+    days['3-17'] = { plane: '#1f9d55', trail: ['#1f9d55', '#7cc576'] };
+    days[easter] = { plane: '#a77bd6', trail: ['#f2c94c', '#a77bd6', '#6fcf97'] };
+    days['5-' + weekday(year, 5, 1, -1)] = days['7-4'] = days['11-11'] = USA;
+    days['8-19'] = { plane: '#1a70d0', trail: ['#e0b43a', '#5aa9e6'] };
+    days['10-31'] = { plane: '#f28c28', trail: ['#f28c28', '#7b3fa0'] };
+    days['11-' + weekday(year, 11, 4, 4)] = { plane: '#c0662b', trail: ['#e0a526', '#c0662b', '#8a4b2a'] };
+    days['12-17'] = { plane: '#8a6a43', trail: ['#d9c9a3', '#8a6a43'] };
+    days['12-25'] = { plane: '#d42f2f', trail: ['#1f8a4c', '#d42f2f'] };
+    return days;
+  }
+
+  // The day of the month of its nth weekday (0 Sunday), the last for n -1: Memorial Day, Thanksgiving.
+  function weekday(year, month, day, n) {
+    if (n < 0) { var last = new Date(year, month, 0); return last.getDate() - (last.getDay() - day + 7) % 7; }
+    return 1 + (day - new Date(year, month - 1, 1).getDay() + 7) % 7 + (n - 1) * 7;
+  }
+
+  // Easter Sunday's "month-day": the anonymous Gregorian algorithm.
+  function easterOf(y) {
+    var a = y % 19, b = Math.floor(y / 100), c = y % 100, f = Math.floor((b + 8) / 25);
+    var h = (19 * a + b - Math.floor(b / 4) - Math.floor((b - f + 1) / 3) + 15) % 30;
+    var l = (32 + 2 * (b % 4) + 2 * Math.floor(c / 4) - h - c % 4) % 7, m = Math.floor((a + 11 * h + 22 * l) / 451);
+    return Math.floor((h + l - 7 * m + 114) / 31) + '-' + ((h + l - 7 * m + 114) % 31 + 1);
+  }
+
+  // The sky's colors: its data-date's ("2026-12-25"), to see a holiday on any day, or today's.
+  function colorsOf(sky) {
+    var date = /^(\d{4})-(\d\d)-(\d\d)$/.exec(sky.getAttribute('data-date') || '');
+    var day = date ? new Date(+date[1], date[2] - 1, +date[3]) : new Date();
+    return holidays(day.getFullYear())[(day.getMonth() + 1) + '-' + day.getDate()] || SKY;
+  }
+
+  function svg(name, attributes, parent) {
+    var node = document.createElementNS('http://www.w3.org/2000/svg', name);
+    for (var key in attributes) { node.setAttribute(key, attributes[key]); }
+    return parent.appendChild(node);
+  }
+
+  function fly(sky, n) {
+    var flyer = sky.querySelector('.js-flyer'), trail = sky.querySelector('.js-trail'), colors = colorsOf(sky);
+    var defs = svg('defs', {}, trail), lines = [], fades = [];
+    if (colors.plane) { flyer.style.color = colors.plane; }
+    // One line per color, 3px apart, each fading in from the sky's left edge to the tail.
+    for (var i = 0; i < colors.trail.length; i++) {
+      var id = 'flyer-' + n + '-' + i, color = colors.trail[i];
+      var fade = svg('linearGradient', { id: id, gradientUnits: 'userSpaceOnUse', x1: 0, y1: 0, x2: 100, y2: 0 }, defs);
+      svg('stop', { offset: 0, 'stop-color': color, 'stop-opacity': 0 }, fade);
+      svg('stop', { offset: 1, 'stop-color': color, 'stop-opacity': colors.opacity || 0.7 }, fade);
+      fades.push(fade);
+      lines.push(svg('polyline', { fill: 'none', stroke: 'url(#' + id + ')', 'stroke-width': 2, 'stroke-linecap': 'round' }, trail));
+    }
+    var span = 14000, size = 34, began = null;
+    function wave(x, width) { return 14 + 9 * Math.sin((x / width) * Math.PI * 3); }
+    function frame(now) {
+      if (began === null) { began = now; }
+      var width = sky.offsetWidth, t = ((now - began) % span) / span;
+      var x = -size - 40 + (width + size + 80) * t, y = wave(x + size / 2, width);
+      var angle = Math.atan(wave(x + size / 2 + 1, width) - y) * 180 / Math.PI;
+      var move = 'translate(' + x.toFixed(1) + 'px,' + (y - size / 2).toFixed(1) + 'px) rotate(' + angle.toFixed(1) + 'deg)';
+      flyer.style.webkitTransform = move; flyer.style.transform = move;
+      // The tail is the plane's left edge, at its middle, turned with it.
+      var tailX = x + size / 2 - (size / 2 - 3) * Math.cos(angle * Math.PI / 180);
+      for (var i = 0; i < lines.length; i++) {
+        var shift = (i - (lines.length - 1) / 2) * 3, points = [];
+        for (var px = 0; px < tailX; px += 6) { points.push(px + ',' + (wave(px, width) + shift).toFixed(1)); }
+        if (tailX > 0) { points.push(tailX.toFixed(1) + ',' + (wave(tailX, width) + shift).toFixed(1)); }
+        lines[i].setAttribute('points', points.join(' '));
+        fades[i].setAttribute('x2', Math.max(tailX, 1).toFixed(1));
+      }
+      if (sky.className.indexOf('is-gone') < 0) { window.requestAnimationFrame(frame); } // freed (easy/konami)
+    }
+    window.requestAnimationFrame(frame);
+  }
+
+  var skies = document.querySelectorAll('.js-sky');
+  for (var i = 0; i < skies.length; i++) { fly(skies[i], i); }
+})();

data/app/assets/javascripts/easy/konami.js

@@ -0,0 +1,68 @@
+// The easter egg of render "easy/flyer": the Konami code sets the plane free, ↑ ↑ ↓ ↓ ← → ← → B A on a keyboard,
+// or on a phone swipes up, up, down, down, left, right, left, right and two taps. It leaves its wave, wanders the
+// window at random until it flies out of it, and never comes back in this browser (localStorage, per site).
+// Included with easy/flyer; where motion is turned off there is no plane, and nothing to free.
+// ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  if (!document.querySelectorAll || !document.addEventListener || !window.requestAnimationFrame) { return; }
+  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { return; }
+  var GONE = 'easy-plane-gone', CODES = ['UUDDLRLRBA', 'UUDDLRLRTT'];
+  var KEYS = { 38: 'U', 40: 'D', 37: 'L', 39: 'R', 66: 'B', 65: 'A' };
+  var skies = document.querySelectorAll('.js-sky'), typed = '', start = null, freed = false;
+
+  // A sky gone keeps no plane, and its trail fades; easy/flyer stops drawing it.
+  function gone() { for (var i = 0; i < skies.length; i++) { skies[i].className += ' is-gone'; } }
+  try { if (window.localStorage.getItem(GONE)) { gone(); return; } } catch (err) { /* no storage: it comes back */ }
+
+  // The plane, out of its sky and over the window, where it was and heading as it was: at 160px a second, it turns
+  // one way then the other, never sharper than a loop in three seconds, until it is past an edge.
+  function fly(flyer) {
+    var box = flyer.getBoundingClientRect(), plane = flyer.cloneNode(true), size = 34;
+    var rotation = /rotate\((-?[\d.]+)deg\)/.exec(flyer.style.transform || '');
+    var x = box.left + box.width / 2 - size / 2, y = box.top + box.height / 2 - size / 2;
+    var heading = rotation ? rotation[1] * Math.PI / 180 : 0, turn = 0, last = null;
+    if (!box.width) { return; }
+    function place() {
+      var move = 'translate(' + x.toFixed(1) + 'px,' + y.toFixed(1) + 'px) rotate(' + (heading * 180 / Math.PI).toFixed(1) + 'deg)';
+      plane.style.webkitTransform = move; plane.style.transform = move;
+    }
+    plane.className = 'flyer is-free';
+    place();
+    document.body.appendChild(plane);
+    function frame(now) {
+      var dt = last === null ? 16 : Math.min(now - last, 50);
+      last = now;
+      turn = Math.max(-0.002, Math.min(0.002, turn + (Math.random() - 0.5) * 0.00002 * dt));
+      heading += turn * dt;
+      x += Math.cos(heading) * 0.16 * dt; y += Math.sin(heading) * 0.16 * dt;
+      place();
+      if (x < -size || y < -size || x > window.innerWidth || y > window.innerHeight) { return document.body.removeChild(plane); }
+      window.requestAnimationFrame(frame);
+    }
+    window.requestAnimationFrame(frame);
+  }
+
+  function free() {
+    try { window.localStorage.setItem(GONE, '1'); } catch (err) { /* no storage: it comes back */ }
+    for (var i = 0; i < skies.length; i++) { fly(skies[i].querySelector('.js-flyer')); }
+    gone();
+  }
+
+  function push(symbol) {
+    typed = (typed + symbol).slice(-10);
+    if (!freed && (typed === CODES[0] || typed === CODES[1])) { freed = true; free(); }
+  }
+
+  document.addEventListener('keydown', function (event) { push(KEYS[event.keyCode] || '-'); });
+  // A swipe is its longer way, 30px at least; a touch that hardly moved is a tap.
+  document.addEventListener('touchstart', function (event) {
+    start = event.touches.length === 1 ? { x: event.touches[0].clientX, y: event.touches[0].clientY } : null;
+  }, { passive: true });
+  document.addEventListener('touchend', function (event) {
+    if (!start) { return; }
+    var dx = event.changedTouches[0].clientX - start.x, dy = event.changedTouches[0].clientY - start.y;
+    var far = Math.max(Math.abs(dx), Math.abs(dy));
+    if (far < 10) { push('T'); } else if (far < 30) { push('-'); } else if (Math.abs(dx) > Math.abs(dy)) { push(dx > 0 ? 'R' : 'L'); } else { push(dy > 0 ? 'D' : 'U'); }
+    start = null;
+  }, { passive: true });
+})();

data/app/assets/javascripts/easy/modal.js

@@ -0,0 +1,48 @@
+// Every dialog of render "easy/modal" lets its reader out: its ×, Esc or a click around it closes it where it is, without loading a page,
+// and the address becomes the × link's (the page without what opened it), or loses the #id that opened it. A link to
+// that #id opens it again. Without the script, the × is a plain link.
+// ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  if (!document.querySelector || !document.addEventListener) { return; }
+
+  function close(modal) {
+    var link = modal.querySelector('.modal-x'), href = link && link.getAttribute('href');
+    modal.className = modal.className.replace(/\s*\bis-(open|closed)\b/g, '') + ' is-closed';
+    if (!window.history || !history.replaceState) { return; }
+    if (href && href.charAt(0) !== '#') { history.replaceState(null, '', href + location.hash); }
+    else if (location.hash === '#' + modal.id) { history.replaceState(null, '', location.pathname + location.search); }
+  }
+
+  // The dialog showing: drawn open, or the one the address's #id names.
+  function shown() {
+    var target = location.hash.length > 1 && document.getElementById(location.hash.slice(1));
+    var open = document.querySelector('.modal.is-open');
+    if (open) { return open; }
+    return target && /(^|\s)modal(\s|$)/.test(target.className) && !/\bis-closed\b/.test(target.className) ? target : null;
+  }
+
+  // The node or its nearest ancestor with the class: old browsers have no closest().
+  function up(node, name) {
+    var pattern = new RegExp('(^|\\s)' + name + '(\\s|$)');
+    while (node && node.nodeType === 1 && !pattern.test(node.className)) { node = node.parentNode; }
+    return node && node.nodeType === 1 ? node : null;
+  }
+
+  // The ×, or the dimmed page around the box (the dialog itself, not what it holds).
+  document.addEventListener('click', function (event) {
+    var x = up(event.target, 'modal-x');
+    var modal = x ? up(x, 'modal') : /(^|\s)modal(\s|$)/.test(event.target.className) && event.target;
+    if (!modal) { return; }
+    event.preventDefault();
+    close(modal);
+  });
+  document.addEventListener('keydown', function (event) {
+    if (event.key !== 'Escape' && event.key !== 'Esc' && event.keyCode !== 27) { return; }
+    var modal = shown();
+    if (modal) { event.preventDefault(); close(modal); }
+  });
+  window.addEventListener('hashchange', function () {
+    var target = location.hash.length > 1 && document.getElementById(location.hash.slice(1));
+    if (target) { target.className = target.className.replace(/\s*\bis-closed\b/g, ''); }
+  });
+})();

data/app/assets/javascripts/easy/pin_code.js

@@ -0,0 +1,43 @@
+// The 6-digit code of render "easy/pin_code": its six slots show what its one real field holds, the next one to fill
+// lit, and six digits submit the form without a click, typed, pasted or offered by the phone from the email. A field
+// the page empties redraws on an input event; a code refused is the page's to mark, is-invalid on the .pin-code,
+// which the next digit clears. A .pin-code already drawn is left alone, so including the script twice is harmless.
+// ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  if (!document.querySelectorAll || !document.addEventListener) { return; }
+
+  // The form's own submit, so its handlers run first: requestSubmit, or an old browser's submit event.
+  function submit(form) {
+    if (form.requestSubmit) { form.requestSubmit(); return; }
+    var event = document.createEvent('Event');
+    event.initEvent('submit', true, true);
+    if (form.dispatchEvent(event)) { form.submit(); }
+  }
+
+  function drawn(pin) {
+    var input = pin.querySelector('.pin-code-input'), slots = pin.querySelectorAll('.pin-code-slots span');
+    function draw() {
+      var value = input.value.replace(/\D/g, '').slice(0, 6), focused = document.activeElement === input;
+      if (value !== input.value) { input.value = value; }
+      for (var i = 0; i < slots.length; i++) {
+        slots[i].textContent = value.charAt(i);
+        slots[i].className = focused && i === Math.min(value.length, 5) ? 'is-active' : '';
+      }
+      return value;
+    }
+    input.addEventListener('input', function () {
+      pin.className = pin.className.replace(/\s*\bis-invalid\b/g, '');
+      input.removeAttribute('aria-invalid');
+      if (draw().length === 6 && input.form) { submit(input.form); }
+    });
+    input.addEventListener('focus', draw);
+    input.addEventListener('blur', draw);
+    pin.className += ' is-drawn';
+    draw();
+  }
+
+  var pins = document.querySelectorAll('.pin-code');
+  for (var i = 0; i < pins.length; i++) {
+    if (!/\bis-drawn\b/.test(pins[i].className)) { drawn(pins[i]); }
+  }
+})();

data/app/assets/javascripts/easy/report_sort.js

@@ -0,0 +1,44 @@
+// The sort button of easy/report_head: flips the list named by data-sort-list by each row's data-sort, remembered in
+// this browser. ES5 alone. A page that redraws its list calls window.easyReportSort() after. Without this script the
+// list stays as the server sent it, and the button hidden.
+(function () {
+  function saved(head) {
+    try { return localStorage.getItem('report-sort:' + head.getAttribute('data-sort-list')); } catch (blocked) { return null; }
+  }
+
+  function save(head, order) {
+    try { localStorage.setItem('report-sort:' + head.getAttribute('data-sort-list'), order); } catch (blocked) { return; }
+  }
+
+  function order(head) { return head.easyOrder || saved(head) || head.getAttribute('data-sort-default'); }
+
+  function compared(a, b) {
+    return a.getAttribute('data-sort').localeCompare(b.getAttribute('data-sort'), undefined, { numeric: true });
+  }
+
+  function apply(head) {
+    var list = document.querySelector(head.getAttribute('data-sort-list')), item = head.querySelector('.sort-button-item');
+    if (!list || !item) { return; }
+    var way = order(head), newest = way === 'newest';
+    Array.prototype.slice.call(list.children).filter(function (row) { return row.hasAttribute('data-sort'); })
+      .sort(function (a, b) { return newest ? compared(b, a) : compared(a, b); })
+      .forEach(function (row) { list.appendChild(row); });
+    item.hidden = false;
+    item.querySelector('.js-sort-label').textContent = newest ? 'Newest first' : 'Oldest first';
+    var icon = item.querySelector('use'), ref = icon.getAttribute('href').split('#')[0] + '#i-' + way;
+    icon.setAttribute('href', ref);
+    icon.setAttribute('xlink:href', ref);
+  }
+
+  window.easyReportSort = function () { Array.prototype.forEach.call(document.querySelectorAll('[data-sort-list]'), apply); };
+
+  document.addEventListener('click', function (event) {
+    var button = event.target.closest && event.target.closest('.js-sort'), head = button && button.closest('[data-sort-list]');
+    if (!head) { return; }
+    head.easyOrder = order(head) === 'newest' ? 'oldest' : 'newest';
+    save(head, head.easyOrder);
+    apply(head);
+  });
+
+  window.easyReportSort();
+}());