easyfaa 0.20.0 → 1.0.0

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

@@ -0,0 +1,54 @@
+// Marks the words of a search in the rows it leaves (easy/switches calls it at each draw): every place a word is
+// found in a row's text is wrapped in mark.search-hit, and the marks of the search before are taken out first. Words
+// are found within one piece of text, never across two elements, and never in a form: what it asks is the
+// same in every row, and what is typed there is the reader's.
+// ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  var SKIP = /^(FORM|SCRIPT|STYLE)$/;
+
+  // Straight in a flex or grid box each piece of text is laid out apart, losing the space beside it: the text is
+  // first put whole in a span, one piece as it was, and marked inside it.
+  function texts(node, found) {
+    var laid = /flex|grid/.test(window.getComputedStyle(node).display);
+    for (var child = node.firstChild; child; child = child.nextSibling) {
+      if (child.nodeType === 3 && laid && /\S/.test(child.nodeValue)) {
+        var whole = document.createElement('span');
+        node.replaceChild(whole, child);
+        whole.appendChild(child);
+        found.push(child);
+        child = whole;
+      } else if (child.nodeType === 3) { found.push(child); } else if (child.nodeType === 1 && !SKIP.test(child.nodeName)) { texts(child, found); }
+    }
+    return found;
+  }
+
+  // Wraps the first word found in the text, then goes on in what follows it.
+  function mark(text, words) {
+    var lower = text.nodeValue.toLowerCase(), at = -1, size = 0;
+    for (var w = 0; w < words.length; w++) {
+      var index = lower.indexOf(words[w]);
+      if (index >= 0 && (at < 0 || index < at)) { at = index; size = words[w].length; }
+    }
+    if (at < 0) { return; }
+    var hit = text.splitText(at), rest = hit.splitText(size), wrap = document.createElement('mark');
+    wrap.className = 'search-hit';
+    hit.parentNode.replaceChild(wrap, hit);
+    wrap.appendChild(hit);
+    mark(rest, words);
+  }
+
+  window.easyHighlight = function (box, rows, words) {
+    var marks = box.querySelectorAll('mark.search-hit'), typed = [];
+    for (var m = 0; m < marks.length; m++) {
+      var parent = marks[m].parentNode;
+      parent.replaceChild(document.createTextNode(marks[m].textContent), marks[m]);
+      parent.normalize();
+    }
+    for (var w = 0; w < words.length; w++) { if (words[w]) { typed.push(words[w]); } }
+    if (!typed.length) { return; }
+    for (var r = 0; r < rows.length; r++) {
+      var found = texts(rows[r], []);
+      for (var t = 0; t < found.length; t++) { mark(found[t], typed); }
+    }
+  };
+})();

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

@@ -0,0 +1,73 @@
+// 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 turn = (heading * 180 / Math.PI).toFixed(1);
+      var move = 'translate(' + x.toFixed(1) + 'px,' + y.toFixed(1) + 'px) rotate(' + turn + '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,49 @@
+// 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; }
+    var open = target && /(^|\s)modal(\s|$)/.test(target.className) && !/\bis-closed\b/.test(target.className);
+    return open ? 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,57 @@
+// The sort button of easy/report_head: flips every list data-sort-list names, each by its rows' 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 () {
+  // A page with two heads links the script twice: the second would flip every list back.
+  if (window.easyReportSort) { return; }
+
+  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 lists = document.querySelectorAll(head.getAttribute('data-sort-list'));
+    var item = head.querySelector('.sort-button-item');
+    if (!lists.length || !item) { return; }
+    var way = order(head), newest = way === 'newest';
+    Array.prototype.forEach.call(lists, function (list) {
+      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');
+    var 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();
+}());

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

@@ -0,0 +1,35 @@
+// The search box's placeholder types what the box finds, one example after another, until the visitor types their
+// own: each app gives its examples on the field, <input data-rotating-placeholder='["N714AD", "O-320-H2AD"]'>, and
+// its resting placeholder, which comes back once something is typed. Where motion is turned off, it holds still.
+// ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  if (!document.querySelectorAll || !window.JSON) { return; }
+  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { return; }
+
+  function rotate(input) {
+    var examples;
+    try { examples = JSON.parse(input.getAttribute('data-rotating-placeholder')); } catch (err) { return; }
+    if (!examples || !examples.length) { return; }
+    var resting = input.getAttribute('placeholder') || examples[0], ex = 0, at = 0, typing = null;
+    function tick() {
+      var word = examples[ex];
+      if (at <= word.length) {
+        input.setAttribute('placeholder', word.slice(0, at) || word.charAt(0));
+        at++;
+        typing = setTimeout(tick, at > word.length ? 1600 : 140);
+        return;
+      }
+      ex = (ex + 1) % examples.length; at = 1; typing = setTimeout(tick, 140);
+    }
+    // Typing stops the show; being in the field doesn't, nor a key that typed nothing (the Tab that got there).
+    function typed() {
+      if (input.value && typing) { clearTimeout(typing); typing = null; input.setAttribute('placeholder', resting); }
+    }
+    input.addEventListener('input', typed);
+    input.addEventListener('keyup', typed);
+    typing = setTimeout(tick, 900);
+  }
+
+  var inputs = document.querySelectorAll('[data-rotating-placeholder]');
+  for (var i = 0; i < inputs.length; i++) { rotate(inputs[i]); }
+})();

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

@@ -0,0 +1,17 @@
+// A step's foot (step-foot) is in the page's flow, at the step's end. Once the step's top has left the window (the
+// steps bar, or what data-top names) the foot also keeps to the window's foot (is-stuck), coming up from below
+// (is-rising, until it has risen) unless its own place is already in view, as at the end of a short step; back at the
+// top it lets go.
+// Without this script the foot stays at the step's end. ES5 alone, for the browsers that can watch an element.
+(function () {
+  var foot = document.querySelector && document.querySelector('.step-foot');
+  var top = foot && document.querySelector(foot.getAttribute('data-top') || '.steps-bar');
+  if (!top || !window.IntersectionObserver) { return; }
+  new IntersectionObserver(function (entries) {
+    var gone = !entries[0].isIntersecting && entries[0].boundingClientRect.top < 0;
+    var below = foot.getBoundingClientRect().top >= window.innerHeight;
+    foot.className = foot.className.replace(/ ?is-(stuck|rising)/g, '') + (gone ? ' is-stuck' + (below ? ' is-rising' : '') : '');
+  }).observe(top);
+  // Risen, it draws nothing below itself any longer: at the page's end the site's footer is there.
+  foot.addEventListener('animationend', function () { foot.className = foot.className.replace(/ ?is-rising/g, ''); });
+})();

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

@@ -0,0 +1,96 @@
+// Switches over a list: inside js-switches, each count of a switches row (li[data-state]) shows or hides the rows of
+// that state, anything else carrying the same data-state; one with data-off="true" starts off. Words typed in
+// js-words keep the rows that have them all outside their forms, and are marked in them (easy/highlight). A js-none line shows while
+// nothing beside it is left to show, a js-group hides while nothing inside it is, and a tab (js-tabs) whose number is
+// a js-count counts the rows left in its panel that carry data-counted. A row carrying data-keep shows whatever its
+// switch says, until a switch is flipped or a word typed. A page that redraws its rows or its switches calls
+// window.easySwitches() after. Without the script every row shows, the counts are plain and the search hidden.
+// ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  // A page with two heads links the script twice: its boxes are wired once.
+  if (window.easySwitches || !document.querySelectorAll || !document.addEventListener) { return; }
+  var drawn = [];
+
+  function each(list, callback) { for (var i = 0; i < list.length; i++) { callback(list[i]); } }
+  function has(el, name) { return (' ' + el.className + ' ').indexOf(' ' + name + ' ') >= 0; }
+  function within(el, name, stop) {
+    for (; el && el !== stop; el = el.parentNode) { if (el.className && has(el, name)) { return el; } }
+    return null;
+  }
+  // What a row says, without what its forms ask: "Complied with" in every card's form is no reason to show them all.
+  function said(node) {
+    var text = '';
+    for (var child = node.firstChild; child; child = child.nextSibling) {
+      if (child.nodeType === 3) { text += child.nodeValue; } else if (child.nodeType === 1 && child.nodeName !== 'FORM') { text += said(child); }
+    }
+    return text;
+  }
+  function holds(el, rows) {
+    for (var i = 0; i < rows.length; i++) { if (el.contains(rows[i])) { return true; } }
+    return false;
+  }
+
+  function wire(box) {
+    var on = box.easySwitches = {}, field = box.querySelector('.js-words'), input = field && field.querySelector('input');
+    function switches() { return box.querySelectorAll('.switches li[data-state]'); }
+    function toggle(target) {
+      for (; target && target !== box; target = target.parentNode) {
+        if (target.getAttribute && target.getAttribute('data-state') && within(target, 'switches', box)) { return target; }
+      }
+      return null;
+    }
+
+    function shown(row, want) {
+      if (on[row.getAttribute('data-state')] === false && !row.hasAttribute('data-keep')) { return false; }
+      var text = want.join('') ? said(row).toLowerCase() : '';
+      for (var w = 0; w < want.length; w++) { if (text.indexOf(want[w]) < 0) { return false; } }
+      return true;
+    }
+
+    function draw() {
+      var want = (input ? input.value : '').toLowerCase().split(/\s+/), left = [];
+      each(switches(), function (li) {
+        var state = li.getAttribute('data-state');
+        if (on[state] === undefined) { on[state] = li.getAttribute('data-off') !== 'true'; }
+        li.className = li.className.replace(/ ?(switches-toggle|is-off)\b/g, '') + ' switches-toggle' + (on[state] ? '' : ' is-off');
+        li.setAttribute('role', 'button');
+        li.setAttribute('tabindex', '0');
+        li.setAttribute('aria-pressed', on[state] ? 'true' : 'false');
+      });
+      each(box.querySelectorAll('[data-state]'), function (row) {
+        if (within(row, 'switches', box)) { return; }
+        row.hidden = !shown(row, want);
+        if (!row.hidden) { left.push(row); }
+      });
+      each(box.querySelectorAll('.js-none'), function (none) { none.hidden = holds(none.parentNode, left); });
+      each(box.querySelectorAll('.js-group'), function (group) { group.hidden = !holds(group, left); });
+      each(box.querySelectorAll('.js-tabs a'), function (tab) {
+        var count = tab.querySelector('.js-count'), panel = document.getElementById(tab.getAttribute('href').slice(1)), n = 0;
+        if (!count || !panel) { return; }
+        each(left, function (row) { if (row.hasAttribute('data-counted') && panel.contains(row)) { n++; } });
+        count.textContent = n;
+      });
+      if (window.easyHighlight) { window.easyHighlight(box, left, want); }
+    }
+
+    function changed() {
+      each(box.querySelectorAll('[data-keep]'), function (row) { row.removeAttribute('data-keep'); });
+      draw();
+    }
+    function flip(li) { on[li.getAttribute('data-state')] = !on[li.getAttribute('data-state')]; changed(); }
+
+    box.addEventListener('click', function (event) { var li = toggle(event.target); if (li) { flip(li); } });
+    box.addEventListener('keydown', function (event) {
+      var li = toggle(event.target);
+      if (li && (event.key === 'Enter' || event.key === ' ' || event.keyCode === 13 || event.keyCode === 32)) {
+        event.preventDefault(); flip(li);
+      }
+    });
+    if (input) { field.hidden = false; input.addEventListener('input', changed); }
+    drawn.push(draw);
+    draw();
+  }
+
+  window.easySwitches = function () { each(drawn, function (draw) { draw(); }); };
+  each(document.querySelectorAll('.js-switches'), wire);
+})();

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

@@ -0,0 +1,39 @@
+// Keeps what a js-switches box carrying data-address is set to in the page's address, so the page can be reloaded or
+// shared as it is: ?q= the words typed, ?off= the switches that are off, when they are not the ones that start off
+// ("off=" alone, then, for all of them on). Linked after easy/switches. ES5 alone.
+(function () {
+  var box = document.querySelector('.js-switches[data-address]');
+  if (!box || !box.easySwitches || !window.history || !history.replaceState) { return; }
+  var on = box.easySwitches, input = box.querySelector('.js-words input'), starts = [];
+
+  function params() {
+    var all = {}, pairs = location.search.replace(/^\?/, '').split('&');
+    for (var i = 0; i < pairs.length; i++) {
+      var pair = pairs[i].split('=');
+      if (pairs[i]) { all[decodeURIComponent(pair[0])] = decodeURIComponent((pair[1] || '').replace(/\+/g, ' ')); }
+    }
+    return all;
+  }
+  function off() {
+    var states = [];
+    for (var state in on) { if (on.hasOwnProperty(state) && !on[state]) { states.push(state); } }
+    return states.sort().join(',');
+  }
+  function remember() {
+    var all = params(), words = input ? input.value.replace(/^\s+|\s+$/g, '') : '', pairs = [];
+    delete all.q; delete all.off;
+    if (words) { all.q = words; }
+    if (off() !== starts) { all.off = off(); }
+    for (var key in all) { if (all.hasOwnProperty(key)) { pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(all[key])); } }
+    history.replaceState(history.state, '', location.pathname + (pairs.length ? '?' + pairs.join('&') : '') + location.hash);
+  }
+
+  starts = off();
+  var asked = params();
+  if (asked.off !== undefined) { for (var state in on) { if (on.hasOwnProperty(state)) { on[state] = (',' + asked.off + ',').indexOf(',' + state + ',') < 0; } } }
+  if (asked.q && input) { input.value = asked.q; }
+  window.easySwitches();
+  box.addEventListener('click', remember);
+  box.addEventListener('keydown', remember);
+  box.addEventListener('input', remember);
+})();

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

@@ -0,0 +1,35 @@
+// Tabs over panels (part-tabs with js-tabs): each tab is a link to its panel's #id. A click shows that panel and hides
+// the others (is-on on the tab, is-off on a panel), and the address takes the #id, which opens the same tab when the
+// page is loaded with it, as does the #id of anything inside a panel. Without the script the panels show one under the other and the tabs jump to each.
+// ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  if (!document.querySelectorAll || !document.addEventListener) { return; }
+
+  function strip(el, name) { el.className = el.className.replace(new RegExp('\\s*\\b' + name + '\\b', 'g'), ''); }
+  function id(link) { return link.getAttribute('href').slice(1); }
+
+  function wire(links) {
+    function show(shown) {
+      for (var i = 0; i < links.length; i++) {
+        var panel = document.getElementById(id(links[i]));
+        strip(links[i], 'is-on'); strip(panel, 'is-off');
+        if (id(links[i]) === shown) { links[i].className += ' is-on'; } else { panel.className += ' is-off'; }
+      }
+    }
+    for (var i = 0; i < links.length; i++) {
+      links[i].addEventListener('click', function (event) {
+        event.preventDefault();
+        show(id(this));
+        if (window.history && history.replaceState) { history.replaceState(null, '', '#' + id(this)); }
+      });
+      // The tab the address names, or the one whose panel holds what it names, brought into view: a hidden panel is
+      // nowhere to scroll to. Any other address leaves the tab the page was drawn with.
+      var named = window.location.hash.slice(1), at = named && document.getElementById(named);
+      if (id(links[i]) === named) { show(named); }
+      if (at && id(links[i]) !== named && document.getElementById(id(links[i])).contains(at)) { show(id(links[i])); at.scrollIntoView(); }
+    }
+  }
+
+  var lists = document.querySelectorAll('.js-tabs');
+  for (var l = 0; l < lists.length; l++) { wire(lists[l].getElementsByTagName('a')); }
+})();

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

@@ -0,0 +1,41 @@
+// The theme a reader picks on this browser, light or dark, kept in localStorage and set on <html> before the page
+// paints (layouts/easy/site). Two ways to pick: the header's button (js-theme), which turns to the other one, and
+// radio buttons (inside js-theme-choice, valued light, dark or device), where device forgets the choice and follows
+// the system again. ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  if (!document.querySelectorAll || !document.addEventListener) { return; }
+  var root = document.documentElement;
+
+  function stored() { var theme = root.getAttribute('data-theme'); return theme === 'dark' || theme === 'light' ? theme : null; }
+  function system() { return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; }
+  function each(selector, callback) {
+    var list = document.querySelectorAll(selector);
+    for (var i = 0; i < list.length; i++) { callback(list[i]); }
+  }
+
+  function paint() {
+    var dark = (stored() || system()) === 'dark';
+    each('.js-theme', function (button) {
+      var label = button.querySelector('.js-theme-label, .theme-toggle-label');
+      button.setAttribute('aria-pressed', dark ? 'true' : 'false');
+      if (label) { label.textContent = dark ? 'Light theme' : 'Dark theme'; }
+    });
+    each('.js-theme-choice input', function (radio) { radio.checked = radio.value === (stored() || 'device'); });
+  }
+
+  function pick(theme) {
+    if (theme === 'device') { root.removeAttribute('data-theme'); } else { root.setAttribute('data-theme', theme); }
+    try {
+      if (theme === 'device') { localStorage.removeItem('theme'); } else { localStorage.setItem('theme', theme); }
+    } catch (e) {}
+    paint();
+  }
+
+  each('.js-theme', function (button) {
+    button.addEventListener('click', function () { pick((stored() || system()) === 'dark' ? 'light' : 'dark'); });
+  });
+  each('.js-theme-choice input', function (radio) {
+    radio.addEventListener('change', function () { pick(radio.value); });
+  });
+  paint();
+})();

data/app/assets/stylesheets/easy/base.css

@@ -0,0 +1,42 @@
+/* The easy design system's base: Outfit (the headings' face, served from here, one variable file
+   for every weight as Google Fonts serves it, ranges and all), the reset, type and utilities. */
+@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url("outfit-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
+@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url("outfit-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url("outfit-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
+@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url("outfit-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+@font-face{font-family:"Outfit";font-style:normal;font-weight:700;font-display:swap;src:url("outfit-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
+@font-face{font-family:"Outfit";font-style:normal;font-weight:700;font-display:swap;src:url("outfit-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
+
+*,*::before,*::after{box-sizing:border-box}
+a,button{-webkit-tap-highlight-color:rgba(0,0,0,0)}
+html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
+html,body{overflow-x:hidden}
+/* hidden makes the body its own scroller, where nothing can stick: clip keeps the page from scrolling sideways without that */
+@supports (overflow-x:clip){html,body{overflow-x:clip}}
+/* The page fills the window at least, its footer last (layouts/easy/site): on a short page the footer sits at the
+   window's bottom, never in its middle, as the page grows (easy/layout.css, .page). Old WebKits read the boxes'
+   first syntax; a browser without flex boxes draws the footer right after the page, as on any page. Behind it all,
+   blue fading to white over its first 250px, however long the page. */
+body{margin:0;background:var(--color-bg);background:var(--color-bg) linear-gradient(180deg,var(--color-sky-band-top),var(--color-sky-band-bottom)) no-repeat 0 0/100% 250px;color:var(--color-text);min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
+img,svg{max-width:100%}
+.i{width:1em;height:1em;vertical-align:-.125em;fill:currentColor;flex-shrink:0}
+/* A link goes somewhere: blue words, no box. Underlined inside a sentence; on its own (a title, a list, a menu) the
+   underline comes under the pointer, where the blue deepens. :where keeps the hover as light as a class, so any
+   component's own rule for its links still wins. */
+a{color:var(--color-primary);text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .12s}
+p a,dd a,.in-text a{text-decoration:underline}
+:where(a):hover{color:var(--color-primary-strong);text-decoration:underline;text-decoration-thickness:2px}
+a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),summary:focus:not(:focus-visible){outline:0}
+/* The focus ring is the keyboard's (and a text field's, which is always "visible"); a click draws none */
+a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
+@media (prefers-reduced-motion: reduce){
+  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
+}
+.no-wrap{white-space:nowrap}
+.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+[hidden]{display:none!important}
+
+body{font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
+h1,h2,h3,.site-brand{font-family:"Outfit","Helvetica Neue",Arial,sans-serif;font-weight:600;line-height:1.2}
+.phone-only{display:none}
+@media (max-width:560px){.phone-hidden{display:none}.phone-only{display:inline}}