wordmark 0.21.0 → 0.23.0

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/stylesheets/easy/base.css

@@ -0,0 +1,35 @@
+/* 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{color:var(--color-primary)}
+a:focus,button:focus,input:focus,summary:focus{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}}

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

@@ -0,0 +1,388 @@
+/* The easy design system's components, each under its name (inventory.md): its parts start with
+   its name, its variants are one more word, its states start with is-. */
+
+/* pill: every action button (primary, soft); share-bar: bookmark, share to networks, copy link */
+/* As much room above the buttons as below them: 8px under each, then the status line (4px + 1.5em of 14px). */
+.share-bar{margin:28px 0 0;padding:33px 0 0;border-top:1px solid var(--color-line);text-align:center;max-width:100%}
+.share-bar-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
+.share-bar-list li{margin:0 8px 8px 0}
+.share-bar-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--color-text-2);cursor:pointer;padding:0;font:inherit;text-decoration:none}
+.share-bar-button .i{width:22px;height:22px;display:block}
+.share-bar-button.x{color:#000}.share-bar-button.fb{color:#1877f2}.share-bar-button.li{color:#0a66c2}.share-bar-button.rd{color:#ff4500}.share-bar-button.wa{color:#1fa855}.share-bar-button.em{color:var(--color-text-2)}
+:root[data-theme="dark"] .share-bar-button.x{color:#f1f2f3}
+@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .share-bar-button.x{color:#f1f2f3}}
+.share-bar-button.cp{border:1px solid var(--color-line);background:transparent;color:var(--color-text-2)}
+.share-bar-button:focus-visible{-webkit-filter:brightness(1.12);filter:brightness(1.12)}
+@media (hover:hover){.share-bar-button:hover{-webkit-filter:brightness(1.12);filter:brightness(1.12)}.share-bar-button.cp:hover{background:var(--color-surface-2)}}
+.pill{display:inline-block;height:44px;line-height:42px;padding:0 16px;border-radius:22px;border:1px solid var(--color-primary);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
+.pill .i{margin-right:7px;vertical-align:-2px}
+.pill.primary{background:var(--color-primary);color:var(--color-on-primary)}
+.pill.soft{background:var(--color-bg);color:var(--color-primary);border-color:var(--color-primary)}
+/* A pill changes colour on hover, never underlined: a solid one darkens, an outlined one fills with its own colour */
+.pill:hover{text-decoration:none}
+.pill.primary:hover,.pill.danger:hover{-webkit-filter:brightness(.88);filter:brightness(.88)}
+.pill.soft:hover{background:var(--color-primary);color:var(--color-on-primary)}
+/* small: a pill acting on one thing from inside its card (Remove, Reopen); a pill that submits a form or moves the flow
+   on keeps the regular size, the height of the fields beside it */
+.pill.small{height:30px;line-height:28px;padding:0 12px;font-size:13px}
+.share-bar-list .share-bar-sep{width:1px;height:28px;background:var(--color-line);margin:0 12px 8px 4px}
+@media (max-width:480px){.share-bar-list .share-bar-sep{display:none}}
+.share-bar-status{min-height:1.5em;margin:4px 0 0;font-size:14px;color:var(--color-text-2)}
+
+/* plane-card: the navy card with the big title and its facts (glance: the facts alone, boxed); title-row: a title with something beside it; key-values: label and value rows */
+.plane-card{border:1px solid var(--color-line);border-radius:18px;overflow:hidden;background:var(--color-bg);box-shadow:0 1px 3px rgba(0,0,0,.06)}
+.plane-card-head{background-color:var(--color-midnight);color:var(--color-bg);padding:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
+.plane-card-head .plane-card-cta{margin:8px 0 8px 16px}
+@media (max-width:640px){.plane-card-head .plane-card-cta{flex:1 1 100%;margin:20px 0 0;text-align:center}.plane-card-cta .alert-cta{display:block;padding:12px 16px}}
+:root[data-theme="dark"] .plane-card-head{background-color:#0c2338;color:#f1f2f3}
+@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .plane-card-head{background-color:#0c2338;color:#f1f2f3}}
+.plane-card-head h1{margin:0;font-size:40px;letter-spacing:.02em}
+.plane-card-head p{margin:4px 0 0;font-size:18px;opacity:.9}
+/* engine-card: a plane card about an engine, its head patterned with engines */
+.engine-card .plane-card-head{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='%23ffffff' fill-opacity='.07' transform='translate(4 4) scale(.9)' d='M7 4v2h3v2H7l-2 2v3H3v-3H1v8h2v-3h2v3h3l2 2h8v-4h2v3h3V9h-3v3h-2V8h-6V6h3V4z'/%3E%3Cpath fill='%23ffffff' fill-opacity='.07' transform='translate(32 32) scale(.9)' d='M7 4v2h3v2H7l-2 2v3H3v-3H1v8h2v-3h2v3h3l2 2h8v-4h2v3h3V9h-3v3h-2V8h-6V6h3V4z'/%3E%3C/svg%3E")}
+/* model-card: a plane card about a model, its head patterned with planes */
+.model-card .plane-card-head{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='%23ffffff' fill-opacity='.07' transform='translate(4 4) scale(.9)' 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'/%3E%3Cpath fill='%23ffffff' fill-opacity='.07' transform='translate(32 32) scale(.9)' 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'/%3E%3C/svg%3E")}
+.plane-card-facts{display:flex;flex-wrap:wrap;margin:0;padding:12px 16px}
+.plane-card-facts div{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%;padding:8px;min-width:0}
+@media (min-width:880px){.plane-card-facts div{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}}
+@media (max-width:380px){.plane-card-facts div{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}}
+.plane-card-facts dt{font-size:13px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}
+.plane-card-facts dd{margin:2px 0 0;font-weight:600}
+.plane-card-facts.glance{border:1px solid var(--color-line);border-radius:12px;margin:16px 0 0}.plane-card-foot{border-top:1px solid var(--color-line);padding:14px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;background:var(--color-surface-1)}
+.plane-card-foot p{margin:4px 0}
+.title-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
+.title-row h1{margin:0 12px 0 0}
+.title-row p{margin:0;color:var(--color-text-2);text-align:right}
+.key-values{margin:0}
+.key-values div{display:flex;justify-content:space-between;border-bottom:1px solid var(--color-surface-3);padding:8px 0}
+.key-values div:last-child{border-bottom:0}
+.key-values dt{color:var(--color-text-muted);margin-right:12px}
+.key-values dd{margin:0;font-weight:600;text-align:right}
+
+/* switches: counts that turn a list on and off; list-tools: the row holding them, the sort button and the word search */
+.switches{display:flex;flex-wrap:wrap;align-items:center;margin:0 -6px;padding:0;list-style:none}
+.switches li{margin:6px;padding:5px 8px;border-radius:6px;font-weight:600}
+.switches .ok{background:var(--color-bad-bg);color:var(--color-bad)}
+.switches .warn{background:var(--color-warn-bg);color:var(--color-warn)}
+.switches .all{background:var(--color-surface-2);color:var(--color-text)}
+.switches .none{background:var(--color-surface-2);color:var(--color-text-muted);font-weight:500}
+.switches .none a{color:inherit;text-decoration:none}
+.switches .none a:hover{text-decoration:underline}
+.switches .i{margin-right:6px}
+.switches .switches-toggle{cursor:pointer;user-select:none;-webkit-user-select:none;border:2px solid transparent}
+.switches .switches-toggle:focus{outline:0}
+.switches .switches-toggle:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
+/* Each badge a switch, drawn as Bootstrap 6 draws one: a track, gray and bordered when off, filled
+   when on, with a white knob that slides across. The parts are gray; the levels keep their colors,
+   the good news ("do not apply", "superseded") in green. */
+.switches li.switches-toggle{position:relative;padding-left:52px;border:1px solid var(--color-line)}
+.switches li.switches-toggle::before{content:"";position:absolute;left:9px;top:50%;margin-top:-10px;width:35px;height:20px;box-sizing:border-box;border:1px solid var(--color-primary);border-radius:10rem;background:var(--color-primary);box-shadow:inset 0 1px 2px rgba(0,0,0,.05);transition:background-color .15s ease-in-out}
+.switches li.switches-toggle::after{content:"";position:absolute;left:26px;top:50%;margin-top:-8px;width:16px;height:16px;border-radius:10rem;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1);transition:left .15s ease-in-out}
+.switches li.switches-toggle.is-off{background:transparent;color:var(--color-text-muted)}
+.switches li.switches-toggle.is-off::before{background:var(--color-surface-3);border-color:var(--color-line)}
+.switches li.switches-toggle.is-off::after{left:11px}
+.switches.parts li{background:var(--color-surface-1);color:var(--color-text)}
+.switches.levels .none{background:var(--color-ok-bg);color:var(--color-ok);font-weight:600}
+.switches-line{display:flex;align-items:center;justify-content:space-between}
+.switches-line .switches{flex:1 1 auto}
+.list-tools{margin:6px 0 6px}
+.list-tools[hidden]{display:none}
+.word-search{display:flex;align-items:center;border:1px solid var(--color-line);border-radius:8px;background:var(--color-bg);padding:0 10px}
+.word-search:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}
+.word-search .i{color:var(--color-text-muted);margin-right:8px;flex:none}
+.word-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--color-text);font:inherit;font-size:16px;padding:5px 0;outline:0}
+.switches li.sort-button-item{margin:6px 0 6px auto;padding:0;border:0;background:none}
+.sort-button-item .sort-button{margin:0}
+@media (max-width:600px){.switches li.sort-button-item{margin-left:6px}}
+.report-search[hidden]{display:none}
+.sort-button{flex:none;margin:6px 0 6px 12px;display:inline-flex;align-items:center;border:0;border-radius:8px;background:none;color:var(--color-text);font:inherit;font-size:15px;font-weight:600;padding:8px 4px;cursor:pointer;white-space:nowrap}
+.sort-button .i{margin-right:8px}
+.sort-button:hover{color:var(--color-primary)}
+
+/* report: a list with its sticky head; part-tabs: Airframe, Engine, Propeller, Appliances, each with its panel */
+.report-head{background:var(--color-bg);margin:24px -16px 8px;padding:12px 16px 24px;border-bottom:1px solid var(--color-line)}
+.report-head h2{font-size:26px;margin:0 0 8px}
+@media (max-width:600px){.report-head h2{font-size:20px;margin-bottom:4px}}
+.report-head .switches{margin-bottom:6px}
+.report-head p{margin:6px 0 0;color:var(--color-text-2)}
+.part-tabs{display:flex;flex-wrap:wrap;align-items:flex-end;margin:24px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--color-line)}
+.part-tabs li{margin:0 4px -1px 0}
+.part-tabs a{display:block;padding:12px 16px;border:1px solid transparent;border-bottom:0;border-radius:12px 12px 0 0;color:var(--color-text-2);text-decoration:none;font-weight:600}
+.part-tabs a .i{margin-right:7px}
+.part-tabs a:hover{color:var(--color-text);background:var(--color-surface-1)}
+.part-tabs .n{font-weight:400;color:var(--color-text-muted);margin-left:5px}
+.part-tabs a.is-on{background:var(--color-bg);border-color:var(--color-line);border-top:3px solid var(--color-text-2);padding-top:10px;color:var(--color-text)}
+/* A clicked tab shows it's chosen without the focus ring, which a keyboard still gets. */
+.part-tabs a:focus{outline:0}
+.part-tabs a:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
+.part-tabs .part-tabs-records{margin:0 0 -1px auto}
+@media (max-width:640px){.part-tabs a{padding:10px 9px;font-size:15px}.part-tabs a.is-on{padding-top:8px}.part-tabs .n{display:none}}
+.part-tabs-panel{border:1px solid var(--color-line);border-top:0;border-radius:0 0 14px 14px;padding:18px 18px 4px;margin-bottom:16px}
+.has-js .part-tabs-panel.is-off{display:none}
+.part-tabs-panel > h2{font-size:22px;margin:0 0 10px}
+.has-js .part-tabs-panel > h2{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
+.report .report-head{position:-webkit-sticky;position:sticky;top:0;z-index:10}
+@media (min-width:601px){.report .report-head{top:61px}}
+
+/* ad-card: one AD in a list, its edge the level's colour, its icon the part's; level-chip; tie-chip; why-box; chip-list */
+.ad-card-list{list-style:none;margin:16px 0 0;padding:0}
+.ad-card{position:relative;border:1px solid var(--color-line);border-left-width:6px;border-radius:14px;padding:18px 20px;margin:0 0 14px;background:var(--color-bg)}
+.ad-card.applies{border-left-color:var(--color-bad)}
+.ad-card.may_apply{border-left-color:var(--color-warn-line)}
+.ad-card.not_applying{border-left-color:var(--color-ok-line);background:var(--color-surface-1)}
+.ad-card.not_applying h4 a{color:var(--color-text-2)}
+/* What of the aircraft an AD reaches it through: its icon, repeated down the card's left side,
+   so the edge's color is the level's alone. */
+.ad-card.airframe,.ad-card.engine,.ad-card.propeller,.ad-card.appliance{padding-left:44px;background-repeat:repeat-y;background-position:14px 20px;background-size:16px auto}
+.ad-card.airframe{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44'%3E%3Cpath fill='%238c96a0' fill-opacity='.45' 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'/%3E%3C/svg%3E")}
+.ad-card.engine{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44'%3E%3Cpath fill='%238c96a0' fill-opacity='.45' d='M7 4v2h3v2H7l-2 2v3H3v-3H1v8h2v-3h2v3h3l2 2h8v-4h2v3h3V9h-3v3h-2V8h-6V6h3V4z'/%3E%3C/svg%3E")}
+.ad-card.propeller{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 29'%3E%3Cg fill='%238c96a0' fill-opacity='.45'%3E%3Cpath d='M8 7.4C5.4 6 5.3 2.1 8 .5c2.7 1.6 2.6 5.5 0 6.9z'/%3E%3Cpath 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)'/%3E%3Cpath 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)'/%3E%3Ccircle cx='8' cy='8' r='2.1'/%3E%3C/g%3E%3C/svg%3E")}
+.ad-card.appliance{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 29'%3E%3Cpath fill='%238c96a0' fill-opacity='.45' 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'/%3E%3C/svg%3E")}
+/* file: a file on a list, drawn as an ad-card is, its symbol down the left side: a paper clip, or a picture for a photo (is-image) */
+.file{border:1px solid var(--color-line);border-radius:14px;padding:12px 16px;margin:0 0 10px;background:var(--color-bg);overflow:hidden}
+.file{border-left:6px solid var(--color-surface-3);padding-left:44px;background-repeat:repeat-y;background-position:14px 20px;background-size:16px auto;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44'%3E%3Cg fill='%238c96a0' fill-opacity='.45'%3E%3Cpath fill='none' stroke='%238c96a0' stroke-opacity='.45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20 11l-8.5 8.5a5 5 0 0 1-7-7L13 3.8a3.3 3.3 0 0 1 4.7 4.7l-8.6 8.6a1.7 1.7 0 0 1-2.4-2.4L14.5 7'/%3E%3C/g%3E%3C/svg%3E")}
+.file.is-image{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44'%3E%3Cg fill='%238c96a0' fill-opacity='.45'%3E%3Cpath fill-rule='evenodd' d='M2 4h20v16H2zM4 6v12h16V6z'/%3E%3Cpath d='M5 17l4.5-5.5 3.5 3.5 2.5-2.5 3.5 4.5z'/%3E%3Ccircle cx='15.5' cy='9' r='1.7'/%3E%3C/g%3E%3C/svg%3E")}
+.ad-card.superseded{border-left-color:var(--color-ok-line);background:var(--color-surface-1)}
+.ad-card.superseded h4 a{color:var(--color-text-2)}
+.ad-card-replaced-by{font-family:"Outfit","Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:19px;line-height:1.2;margin:10px 0 2px;color:var(--color-text-2)}
+.ad-card-replaced-by a{font-weight:600;text-decoration:none}
+.ad-card-replaced-by a:hover{text-decoration:underline}
+ol.ad-card-list li.ad-card.superseded{display:none}
+ol.ad-card-list.js-live li.ad-card.superseded{display:block}
+.ad-card-top{position:relative;display:flex;flex-wrap:wrap;align-items:center}
+.ad-card-top > *{margin:0 10px 6px 0}
+.level-chip{display:inline-block;font-weight:700;font-size:14px;padding:5px 10px;border-radius:6px;border:1px solid var(--color-line)}
+.level-chip .i{margin-right:5px}
+.level-chip.applies{background:var(--color-bad-bg);color:var(--color-bad)}
+.level-chip.may_apply{background:var(--color-warn-bg);color:var(--color-warn)}
+.level-chip.not_applying{background:var(--color-ok-bg);color:var(--color-ok)}
+.level-chip.superseded{background:var(--color-ok-bg);color:var(--color-ok)}
+.ad-card-top .ad-card-kind{font-size:14px;padding:5px 10px;border-radius:999px;background:var(--color-surface-2)}
+.tie-chip{font-size:13px;color:var(--color-text-2);border:1px solid var(--color-line);border-radius:999px;padding:4px 10px}
+.ad-card-effective{font-size:14px;color:var(--color-text-muted);margin-left:auto!important}
+.ad-card h3,.ad-card h4{font-family:"Outfit","Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:19px;line-height:1.2;margin:4px 0 6px}
+.ad-card h3 a,.ad-card h4 a{text-decoration:none}
+.ad-card h3 a:hover,.ad-card h4 a:hover{text-decoration:underline}
+.ad-card h3 .t,.ad-card h4 .t{display:block;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:400;color:var(--color-text-2);font-size:16px;margin-top:2px}
+.why-box{margin:8px 0 0;padding:12px 14px;border-radius:10px;background:var(--color-surface-1)}
+.why-box b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:2px}
+.chip-list{list-style:none;margin:0 -4px 16px;padding:0;display:flex;flex-wrap:wrap}
+.chip-list li{margin:4px;padding:6px 12px;border-radius:999px;background:var(--color-surface-2);font-size:14px}
+.chip-list .in{background:var(--color-ok-bg);color:var(--color-ok);font-weight:600}
+.chip-list .part .i{margin-right:6px}
+.level-chip.reaches{background:var(--color-surface-2);color:var(--color-text)}
+.ad-card.reaches{border-left-color:var(--color-surface-3)}
+
+/* ad-card and level-chip, the accidents' level */
+.ad-card.accident{border-left-color:var(--color-warn-line)}
+.level-chip.event{background:var(--color-warn-bg);color:var(--color-warn)}
+
+/* modal: a dialog; tooltip: a hover or tap explanation; pin-code: the six-digit code */
+.modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:rgba(11,30,58,.55);align-items:center;justify-content:center;padding:16px}
+.modal:target,.modal.is-open{display:flex}
+.modal.is-closed:not(.is-open){display:none}
+.modal-box{position:relative;width:100%;max-width:760px;max-height:100%;overflow:auto;background:var(--color-bg);color:var(--color-text);border-radius:18px;padding:28px 24px 24px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
+.modal-box h2{font-size:22px;margin:0 32px 6px 0}
+.modal-box h2 > span[aria-hidden="true"]:first-child{margin-right:.35em}
+.modal-x{position:absolute;top:10px;right:14px;font-size:28px;line-height:1;color:var(--color-text-muted);text-decoration:none}
+/* The dialog gives the ✕ focus when it opens: ringed only for a keyboard, as a clicked link is not */
+.modal-x:focus{outline:0}
+.modal-x:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
+.tooltip{display:inline-block;margin:0 10px 6px 0}
+a.tooltip-trigger{text-decoration:none;cursor:help}
+a.tooltip-trigger:hover,a.tooltip-trigger:focus{box-shadow:0 0 0 2px currentColor}
+.tooltip-pop{display:none;position:absolute;left:0;top:100%;z-index:5;margin-top:4px;width:100%;max-width:28rem;padding:12px 14px;border-radius:10px;background:var(--color-text);color:var(--color-bg);font-size:14px;line-height:1.45;box-shadow:0 6px 20px rgba(0,0,0,.25)}
+.tooltip-pop strong{color:inherit}
+.tooltip:hover .tooltip-pop,.tooltip-trigger:focus + .tooltip-pop,.tooltip.is-open .tooltip-pop{display:block}
+.tooltip.is-shut .tooltip-pop{display:none!important}
+.modal-lede{margin:0 0 4px;color:var(--color-text-2)}
+.modal-fine{margin:14px 0 0;font-size:13px;color:var(--color-text-muted)}
+/* The sign-in code: one real field over six slots (shared/_sign_in), as bh's pin_field draws
+   one. Until the script has drawn them, the field shows as any other. */
+.pin-code{position:relative;max-width:380px;margin:14px auto 4px}
+.pin-code-slots{display:none}
+.pin-code.is-drawn .pin-code-slots{display:flex}
+.pin-code-slots span{flex:1 1 0;min-width:0;height:56px;margin:0 4px;border:1px solid var(--color-line);border-radius:10px;background:var(--color-bg);display:flex;align-items:center;justify-content:center;font:600 26px/1 "Outfit","Helvetica Neue",Arial,sans-serif}
+.pin-code-slots span.is-active{border-color:var(--color-focus);box-shadow:0 0 0 3px var(--color-primary-soft)}
+.pin-code-input{display:block;width:100%;box-sizing:border-box;height:56px;padding:0 12px;border:1px solid var(--color-line);border-radius:10px;font-family:inherit;font-weight:600;font-size:24px;line-height:1;letter-spacing:.3em;text-align:center;background:var(--color-bg);color:var(--color-text)}
+.pin-code.is-drawn .pin-code-input{position:absolute;top:0;left:0;height:100%;opacity:0;font-size:16px;cursor:text}
+
+/* pin-code, refused */
+.pin-code.is-invalid .pin-code-slots span,.pin-code.is-invalid .pin-code-input{border-color:var(--color-bad)}
+.pin-code.is-invalid .pin-code-slots span.is-active{box-shadow:0 0 0 3px var(--color-bad-bg)}
+
+/* note (warn, info): a boxed message; small-note: small grey text beside what it explains */
+.note.warn{border:1px solid var(--color-warn-line);background:var(--color-warn-bg);color:var(--color-warn);padding:12px 16px;border-radius:12px;margin:16px 0}
+.small-note,.note.info{font-size:14px;color:var(--color-text-muted)}
+.note.info{background:var(--color-surface-1);border-left:4px solid var(--color-warn-line);padding:12px 16px;border-radius:0 8px 8px 0;margin:16px 0 32px 0}
+
+/* search-hero: the home page's big search, its lede and figures; search-form and search-field: a labelled search box (mini: the small one); search-hint: the tries and recent pages under it; results: search results */
+.search-hero{padding:20px 0 12px;text-align:center}
+.search-hero h1{font-size:30px;margin:0 auto 0px;color:var(--color-midnight)}
+@media (min-width:720px){.search-hero h1{font-size:44px}}
+.search-hero-lede{font-size:18px;color:var(--color-text-2);max-width:43rem;margin:0 auto 18px}
+.search-form{max-width:40rem;margin:0 auto;text-align:left}
+.search-form label{display:block;font-weight:600;margin-bottom:8px;text-align:center}
+@media (max-width:430px){.search-form label{font-size:13px}}
+.search-field{display:flex;background:var(--color-bg);border:2px solid var(--color-primary);border-radius:14px;box-shadow:0 6px 24px rgba(11,30,58,.12);overflow:hidden}
+.search-field input{flex:1;min-width:0;width:100%;border:0;background:transparent;color:var(--color-text);font-size:20px;padding:16px 18px;font-family:inherit}
+/* The field, rounded, shows where typing goes: the input's own outline would be square inside it. */
+.search-field input:focus{outline:0}
+.search-field:focus-within{box-shadow:0 0 0 4px var(--color-primary-soft);border-color:var(--color-focus)}
+.search-field button{border:0;background:var(--color-primary);color:var(--color-on-primary);font:600 18px/1 inherit;font-family:inherit;padding:0 22px;cursor:pointer;min-width:56px}
+.search-field button .i{width:22px;height:22px;vertical-align:-5px}
+/* A click on the button draws no ring over the field; a keyboard's focus is ringed inside it. */
+.search-field button:focus{outline:0}
+.search-field button:focus-visible{outline:3px solid var(--color-on-primary);outline-offset:-6px}
+@media (max-width:480px){.search-field button .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}}
+.search-hint{color:var(--color-text-2);font-size:15px;margin:4px 0 0;text-align:center}
+.search-hint a{display:inline-block;margin:12px 6px 0;padding:6px 12px;border-radius:999px;background:var(--color-primary-soft);color:var(--color-on-primary-soft);text-decoration:none;font-variant-numeric:tabular-nums}
+.search-hint a:hover{text-decoration:underline}
+.search-form + .search-hint{margin-left:auto;margin-right:auto}
+/* A page the member opened, in place of a Try pill: its link and its × share one pill, which takes
+   the focus ring for either. */
+.search-hint .search-hint-recent{display:inline-flex;align-items:center;margin:12px 6px 0;padding:0 3px 0 0;border-radius:999px;background:var(--color-primary-soft);color:var(--color-on-primary-soft)}
+.search-hint .search-hint-recent a{margin:0;padding:6px 4px 6px 12px;background:none}
+.search-hint .search-hint-recent a:focus{outline:0;text-decoration:underline}
+.search-hint .search-hint-recent form{display:inline}
+.search-hint .search-hint-recent .x-button{width:26px;height:26px}
+.search-hint .search-hint-recent .x-button:focus{outline:0}
+.search-hint .search-hint-recent:focus-within{outline:3px solid var(--color-focus);outline-offset:2px}
+.mini label{display:block;font-weight:600;margin-bottom:6px}
+.mini .search-field{border-width:1px;box-shadow:none;border-radius:10px}
+.mini .search-field:focus-within{box-shadow:0 0 0 3px var(--color-primary-soft)}
+.mini .search-field input{font-size:17px;padding:12px}
+.mini .search-field button{font-size:16px;padding:0 14px}
+.results{padding-bottom:48px}
+.results h2{font-size:20px;margin:32px 0 8px}
+.results ul{list-style:none;margin:0;padding:0}
+.results li{margin:0 0 8px}
+.results li a{display:flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid var(--color-line);border-radius:12px;background:var(--color-bg);text-decoration:none;color:var(--color-primary);font-weight:600}
+.results li a::after{content:"\203A";margin-left:auto;padding-left:12px;font-size:24px;line-height:1;color:var(--color-text-muted)}
+.results li a:hover{background:var(--color-surface-1);border-color:var(--color-primary)}
+.results li a:hover .results-name{text-decoration:underline}
+.results .results-meta{color:var(--color-text-muted);font-weight:400;font-size:15px;white-space:nowrap}
+.results .results-pick{color:var(--color-text-2);margin:4px 0 0}
+
+/* search-hint, recent pages; search-hero's figures */
+.search-hint.recent-pages{margin:14px 0 0}
+.search-hint.recent-pages[hidden]{display:none}
+.search-hero-stats{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;margin:22px auto 0;padding:0;max-width:56rem}
+.search-hero-stats li{flex:1 1 12rem;margin:6px;color:var(--color-text-2);font-size:15px}
+.search-hero-stats strong{display:block;color:var(--color-midnight);font:700 30px/1.1 "Outfit","Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums}
+
+/* band: a section with a heading; latest-list: a dated list; columns: main and side */
+.band{padding-top:20px;padding-bottom:20px}
+.band h2{font-size:22px;margin:0 0 12px}
+.band .latest-list + h2{margin-top:32px}
+.latest-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-line)}
+.latest-list li{border-bottom:1px solid var(--color-line)}
+.latest-list a{display:flex;flex-wrap:wrap;align-items:baseline;padding:9px 4px;text-decoration:none;color:var(--color-text)}
+.latest-list a:hover .latest-list-num{text-decoration:underline}
+.latest-list-num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--color-primary);margin-right:12px;white-space:nowrap}
+.latest-list .latest-list-title{overflow-wrap:anywhere;min-width:0}
+.latest-list .latest-list-when{margin-left:auto;color:var(--color-text-muted);font-size:14px;padding-left:12px}
+@media (max-width:560px){.latest-list a{flex-direction:column;align-items:flex-start}.latest-list .latest-list-when{margin-left:0;padding-left:0}}
+.columns{display:flex;flex-wrap:wrap;margin:24px -12px 0}
+.columns > *{padding:0 12px}
+.columns-main{flex:2 1 28rem;min-width:0}
+.columns-side{flex:1 1 16rem;min-width:0}
+
+/* placeholder-bar (b1 to b4): grey bars standing in for hidden text */
+.placeholder-bar{display:block;height:10px;border-radius:5px;background:var(--color-surface-3);margin:0 0 8px}
+.placeholder-bar.b1{width:22%}.placeholder-bar.b2{width:68%;height:14px}.placeholder-bar.b3{width:84%}.placeholder-bar.b4{width:46%}
+
+/* step-cards: numbered cards, one per step (steps-bar stays easyAnnual's progress bar) */
+.step-cards{list-style:none;margin:28px auto 0;padding:0;display:flex;flex-wrap:wrap;max-width:56rem;text-align:left;counter-reset:step}
+.step-cards{margin-left:-8px;margin-right:-8px}
+.step-cards li{flex:1 1 14rem;margin:8px;padding:14px 20px 18px;position:relative;border:1px solid var(--color-line);border-radius:14px;background:var(--color-bg)}
+/* The step's number beside its title, the line under both. */
+.step-cards li::before{counter-increment:step;content:counter(step);position:absolute;left:20px;top:12px;color:var(--color-sky);font:700 34px/1 "Outfit","Helvetica Neue",Arial,sans-serif}
+.step-cards h2{font-size:18px;margin:0 0 6px;padding-left:38px;line-height:34px}
+.step-cards p{margin:0;color:var(--color-text-2);font-size:15px}
+
+/* pill: danger, for what can't be undone; disabled, until a form is complete; note bad: an alert line in the danger colour */
+.pill[disabled]{opacity:.45;cursor:not-allowed}
+.pill.danger{background:var(--color-bad);border-color:var(--color-bad);color:var(--color-bg)}
+/* soft danger: destroys something, always after a confirmation; never the main step */
+.pill.soft.danger{background:var(--color-bg);border-color:var(--color-bad);color:var(--color-bad)}
+.pill.soft.danger:hover{-webkit-filter:none;filter:none;background:var(--color-bad);color:var(--color-bg)}
+.note.bad{color:var(--color-bad);font-weight:600;margin:0 0 12px}
+
+/* flow-card: a form page's card, its title, line and actions (narrow: one column, for a short form); field-list: labels, fields and their help (wide and side items: the whole row, side a heading) */
+.flow-card{margin:24px 0 40px;padding:12px 0 0}
+.flow-card h1,.flow-card h2{font-size:26px;margin:0 0 8px}
+@media (max-width:600px){.flow-card h1,.flow-card h2{font-size:20px;margin-bottom:4px}}
+.flow-card h2 > span[aria-hidden="true"]:first-child{margin-right:.35em}
+.flow-card > p{color:var(--color-text-2);margin:0 0 16px}
+.field-list{margin:8px -12px 0;padding:0;list-style:none;display:flex;flex-wrap:wrap}
+.field-list li{flex:1 1 22rem;margin:0 12px;border-top:1px solid var(--color-line);padding:16px 0 14px}
+.field-list label{display:block;font-weight:600}
+.field-list input{display:block;width:100%;margin-top:6px;height:46px;padding:0 12px;border:1px solid var(--color-line);border-radius:10px;background:var(--color-bg);color:var(--color-text);font:inherit;font-size:16px}
+.field-list input[readonly]{background:var(--color-surface-1);color:var(--color-text-2)}
+.field-list li.side{flex-basis:100%;border-top:0;padding-bottom:0}
+.field-list li.side h2{margin:12px 0 0;font-size:1.15rem}
+.field-list .field-help{margin:6px 0 0;font-size:14px;color:var(--color-text-muted)}
+.flow-card-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:18px}
+.flow-card-actions .pill{height:50px;line-height:48px;font-size:17px;padding:0 24px}
+.field-list .side h2{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between}
+.flow-card.narrow{max-width:30rem;margin:24px auto 40px}
+.flow-card.narrow .field-list li{flex-basis:100%}
+.flow-card-actions .pill{text-decoration:none;text-align:center}
+/* ruled: parts of a page ruled apart, a thin line over each but the first, fading out toward both ends */
+.ruled+.ruled::before{content:"";display:block;height:3px;margin:8px 0 28px;border-radius:2px;opacity:.6;
+  background:linear-gradient(90deg,transparent,var(--color-line) 30%,var(--color-line) 70%,transparent)}
+.field-list li.wide{flex-basis:100%}
+.field-list li.side{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
+.field-list select{display:block;width:100%;margin-top:6px;height:46px;padding:0 12px;border:1px solid var(--color-line);border-radius:10px;background:var(--color-bg);color:var(--color-text);font:inherit;font-size:16px}
+
+/* steps-bar: a job's steps, the one it's at (is-on), the ones done (is-past), each a link back while open; on a phone, the step's number alone but the current one's */
+.steps-bar{display:flex;flex-wrap:wrap;list-style:none;margin:16px 0 0;padding:0;border-bottom:1px solid var(--color-line)}
+.steps-bar li{margin:0 4px -1px 0}
+.steps-bar span{display:block;padding:10px 14px;color:var(--color-text-2);font-weight:600;border-bottom:3px solid transparent}
+.steps-bar b{display:inline-block;width:22px;height:22px;line-height:22px;margin-right:6px;border-radius:50%;background:var(--color-surface-2);text-align:center;font-size:13px}
+.steps-bar .is-on{color:var(--color-text);border-bottom-color:var(--color-primary)}
+.steps-bar .is-on b{background:var(--color-primary);color:var(--color-on-primary)}
+.steps-bar .is-past b{background:var(--color-ok-bg);color:var(--color-ok)}
+.steps-bar a{display:block;padding:10px 14px;color:var(--color-text-2);font-weight:600;text-decoration:none;border-bottom:3px solid transparent}
+.steps-bar a:hover{color:var(--color-text)}
+.steps-bar .steps-bar-name{display:inline;padding:0;border:0}
+@media(max-width:480px){.steps-bar{flex-wrap:nowrap;justify-content:space-between}.steps-bar li>span,.steps-bar a{padding:10px 2px;white-space:nowrap}.steps-bar b{margin-right:4px}.steps-bar li{margin-right:0}.steps-bar li>a>.steps-bar-name,.steps-bar li>span:not(.is-on)>.steps-bar-name{display:none}}
+
+/* record-table: an AD record's table in the format of AC 43-9D, one part (record-table-part) for the airframe and each engine, propeller and appliance, scrolling sideways on a phone; an open row grey, one not complied with red */
+.record-table-part{border:1px solid var(--color-line);border-radius:14px;padding:18px 18px 12px;margin-top:14px}
+.record-table-part>h2{font-size:22px;margin:0 0 10px}
+.record-table tr.is-open td{background:var(--color-surface-1)}.record-table tr.is-not-complied td{background:var(--color-bad-bg)}
+.record-table-scroll{overflow-x:auto;margin-top:10px}
+.record-table{width:100%;border-collapse:collapse;font-size:14px}
+.record-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);text-align:left;padding:6px 8px;border-bottom:2px solid var(--color-line)}
+.record-table td{padding:8px;border-bottom:1px solid var(--color-line);vertical-align:top}
+
+/* logbook-entry: a logbook entry to print on label paper and stick in, its signature line (-sign), and while a draft, a line saying so (-draft) */
+.logbook-entry-draft{display:block;margin-top:10px;color:var(--color-bad);font-weight:600}
+.logbook-entry{border:1px solid var(--color-line);border-radius:14px;padding:16px 18px;margin:14px 0 0;background:var(--color-surface-1);white-space:pre-line}
+.logbook-entry-sign{display:block;margin-top:22px;border-top:1px solid var(--color-text-2);max-width:26rem;padding-top:4px;font-size:14px;color:var(--color-text-2);white-space:normal}
+
+/* record-table and logbook-entry, printed: each row and entry whole on its page, the entry cut out along its dashed line, a row not complied with striped red on paper too */
+@media print{.logbook-entry{break-inside:avoid;background:none;width:6.5in;max-width:100%;border:1px dashed #000;border-radius:0;color:#000}.record-table tr{break-inside:avoid}.record-table-part{border:0;padding:0}}
+@media print{.record-table tr.is-not-complied td{background:#fbe1e1 repeating-linear-gradient(135deg,transparent 0 7px,rgba(170,20,20,.22) 7px 9px)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;color:#000;font-weight:700;border-top:2px solid #a11}.record-table tr.is-not-complied td:first-child{border-left:5px solid #a11}}
+
+/* sky (render "easy/flyer"): a plane crossing the top of a hero, inside anything positioned (relative, overflow hidden),
+   flown by easy/flyer.js, which draws its trail along the same rise and fall. Without the script, or with motion turned
+   off, there is no plane. */
+.sky{display:none;position:absolute;top:10px;left:0;right:0;height:56px;pointer-events:none}
+.has-js .sky{display:block}
+.sky svg.trail{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible}
+.flyer{position:absolute;top:0;left:0;color:var(--color-sky);opacity:.8;-webkit-transform-origin:17px 17px;transform-origin:17px 17px}
+.flyer .i{display:block;width:34px;height:34px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}
+@media (prefers-reduced-motion: reduce){.has-js .sky{display:none}}
+/* The plane set free by easy/konami: over the window, the header too, its sky left empty and its trail fading. */
+.flyer.is-free{position:fixed;z-index:30}
+.sky .trail{-webkit-transition:opacity 1.2s;transition:opacity 1.2s}
+.sky.is-gone .trail{opacity:0}
+.sky.is-gone .flyer{visibility:hidden}
+
+/* aircraft-avatar (easy_aircraft_avatar): an aircraft's silhouette in a circle until it has a picture, in the soft
+   primary of the theme; the silhouette's windows show the circle through (--avatar-bg). */
+.aircraft-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--color-primary-soft);color:var(--color-on-primary-soft);--avatar-bg:var(--color-primary-soft);vertical-align:middle;overflow:hidden}
+.aircraft-avatar svg{width:88%;height:88%}

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

@@ -0,0 +1,44 @@
+/* The easy design system's layout (layouts/easy/site): the skip link, the header with the app's
+   brand and nav, the theme toggle, the sky band, the page and its width, and the footer. */
+.skip-link{position:absolute;left:-9999px;top:0;z-index:10;background:var(--color-bg);color:var(--color-primary);padding:12px 16px}
+.skip-link:focus{left:8px;top:8px}
+.i-moon{display:none}
+:root[data-theme="dark"] .i-sun{display:none}
+:root[data-theme="dark"] .i-moon{display:inline-block}
+@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .i-sun{display:none}:root:not([data-theme="light"]) .i-moon{display:inline-block}}
+.page-width{max-width:var(--page-max);margin:0 auto;padding:0 16px}
+.site-header{border-bottom:1px solid var(--color-line);background:var(--color-bg)}
+.site-header .page-width{display:flex;align-items:center;justify-content:space-between;min-height:60px}
+.site-header .page-width>div{white-space:nowrap}
+.site-brand{display:inline-block;text-decoration:none;white-space:nowrap;line-height:0}
+.site-nav{display:inline}
+.site-nav a{margin-left:16px;color:var(--color-text-2);text-decoration:none;padding:10px 0;display:inline-block}
+.site-nav a:hover{color:var(--color-primary);text-decoration:underline}
+.site-nav form{display:inline}
+.site-nav form button{margin-left:16px;background:none;border:0;padding:10px 0;font:inherit;color:var(--color-text-2);cursor:pointer;text-decoration:none;display:inline-block}
+.site-nav form button:hover{color:var(--color-primary);text-decoration:underline}
+@media (max-width:560px){.site-nav a.phone-hidden{display:none}}
+.theme-toggle{margin-left:12px;background:transparent;color:var(--color-text-2);border:1px solid var(--color-line);border-radius:999px;padding:8px 12px;font:inherit;font-size:14px;cursor:pointer;min-height:40px}
+.theme-toggle .i{margin:0}
+.theme-toggle-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+/* On a laptop the header stays at the top as the page scrolls. */
+@media (min-width:601px){.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:20}}
+
+/* Room under the header, over the page's blue (easy/base.css, body); slim on the pages that need room. */
+.sky-band{margin:0 0 20px;padding:16px 0}
+.sky-band.slim{padding:6px 0;margin:0 0 14px}
+
+/* The page: its width, or the whole window (wide) for content that lays out its own (.page-width). */
+/* It grows to fill the window's height, so the footer under it is at the window's bottom (easy/base.css, body). */
+.page{max-width:var(--page-max);margin:0 auto;padding:0 16px;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;-ms-flex-item-align:stretch;align-self:stretch;width:100%}
+.page.wide{max-width:none;padding:0}
+
+.site-footer{-ms-flex-negative:0;flex-shrink:0;background:var(--color-surface-1);border-top:1px solid var(--color-line);font-size:15px;color:var(--color-text-2)}
+.site-footer-inner{max-width:var(--page-max);margin:0 auto;padding:0 16px}
+.site-footer a{color:var(--color-text-2)}
+.site-footer a:hover{color:var(--color-primary)}
+.site-footer-note{text-align:center;margin:0 auto;padding:12px 0;line-height:1.7}
+.site-footer-bar{padding:12px;text-align:center;font-size:14px}
+.site-footer-bar ul{list-style:none;margin:0;padding:0}
+.site-footer-bar li{display:inline-block;margin:0 10px}
+.site-footer-bar li a{display:inline-block;padding:6px 0}

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

@@ -0,0 +1,9 @@
+/* The easy design system's tokens: every colour any easy app draws with, light and dark. The
+   dark ones follow the system unless the visitor picks a theme (data-theme on <html>). Plain hex:
+   every page has to work on old iPhones, Androids and Windows browsers. */
+:root{color-scheme:light;--color-bg:#ffffff;--color-surface-1:#f6f7f8;--color-surface-2:#f1f2f3;--color-surface-3:#e2e5e7;--color-text:#2c2f32;--color-text-2:#50575d;--color-text-muted:#636c74;--color-line:#c6cbcf;--color-primary:#1a70d0;--color-on-primary:#ffffff;--color-primary-soft:#dfe5ff;--color-on-primary-soft:#215aa5;--color-ok:#19753e;--color-bad:#b3261e;--color-bad-bg:#fbe3e0;--color-bad-line:#ee9b93;--color-ok-bg:#d8f0dd;--color-ok-line:#87d29a;--color-warn:#7e6317;--color-warn-bg:#fff4d5;--color-warn-line:#ffde80;--color-engine-bg:#f3e6d8;--color-engine:#6f4219;--color-engine-line:#c08a57;--color-propeller-bg:#ece4f7;--color-propeller:#5b2a86;--color-propeller-line:#a47fd0;--color-appliance-bg:#d9f0ec;--color-appliance:#1b5e55;--color-appliance-line:#6fb3a8;--color-midnight:#0b1e3a;--color-sky:#5aa9e6;--color-focus:#1a70d0;--color-sky-band-top:#eaf3fb;--color-sky-band-bottom:#ffffff;}
+@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark;--color-bg:#131415;--color-surface-1:#202223;--color-surface-2:#2c2f32;--color-surface-3:#3d4347;--color-text:#f1f2f3;--color-text-2:#abb2b8;--color-text-muted:#8c96a0;--color-line:#50575d;--color-primary:#689dff;--color-on-primary:#131415;--color-primary-soft:#1d3155;--color-on-primary-soft:#bccdff;--color-ok:#59c27a;--color-bad:#ff8a80;--color-bad-bg:#4a1d1a;--color-bad-line:#c4453a;--color-ok-bg:#173e24;--color-ok-line:#13924c;--color-warn:#ffd352;--color-warn-bg:#564415;--color-warn-line:#d2a511;--color-engine-bg:#3d2a1a;--color-engine:#e8c29c;--color-engine-line:#9a6a3a;--color-propeller-bg:#2e1f44;--color-propeller:#d6bdf2;--color-propeller-line:#7a55a8;--color-appliance-bg:#16332f;--color-appliance:#9fd9cf;--color-appliance-line:#3f8a7f;--color-midnight:#cfe3f6;--color-sky:#5aa9e6;--color-focus:#689dff;--color-sky-band-top:#0c2338;--color-sky-band-bottom:#131415;}}
+:root[data-theme="dark"]{color-scheme:dark;--color-bg:#131415;--color-surface-1:#202223;--color-surface-2:#2c2f32;--color-surface-3:#3d4347;--color-text:#f1f2f3;--color-text-2:#abb2b8;--color-text-muted:#8c96a0;--color-line:#50575d;--color-primary:#689dff;--color-on-primary:#131415;--color-primary-soft:#1d3155;--color-on-primary-soft:#bccdff;--color-ok:#59c27a;--color-bad:#ff8a80;--color-bad-bg:#4a1d1a;--color-bad-line:#c4453a;--color-ok-bg:#173e24;--color-ok-line:#13924c;--color-warn:#ffd352;--color-warn-bg:#564415;--color-warn-line:#d2a511;--color-engine-bg:#3d2a1a;--color-engine:#e8c29c;--color-engine-line:#9a6a3a;--color-propeller-bg:#2e1f44;--color-propeller:#d6bdf2;--color-propeller-line:#7a55a8;--color-appliance-bg:#16332f;--color-appliance:#9fd9cf;--color-appliance-line:#3f8a7f;--color-midnight:#cfe3f6;--color-sky:#5aa9e6;--color-focus:#689dff;--color-sky-band-top:#0c2338;--color-sky-band-bottom:#131415;}
+/* The one width every page, its header and its footer are capped at: what an account's page reaches, its 280px
+   sidebar beside 64rem of content and its 32px gutters (1368px). */
+:root{--page-max:85.5rem}

data/app/controllers/wordmark/errors_controller.rb

@@ -0,0 +1,41 @@
+module Wordmark
+  # The pages every app shows for 400, 404, 422 and 500 (config.exceptions_app, set by the
+  # engine). Plain ActionController::Base, not the host's ApplicationController: a 500 is exactly
+  # the moment the database or a session might be what broke, so nothing here may depend on either.
+  class ErrorsController < ActionController::Base
+    layout 'wordmark/errors'
+    before_action :set_site
+
+    # Heading and sentence by status.
+    MESSAGES = {
+      400 => ['Bad request', 'The request could not be understood.'],
+      404 => ['Page not found', 'You may have mistyped the address, or the page may have moved.'],
+      422 => ['Can’t process that', 'The change was rejected, often because a page had been ' \
+                                    'left open too long. Going back and trying again usually ' \
+                                    'fixes it.',],
+      500 => ['Something went wrong', 'We’ve been notified and are looking into it. Try again ' \
+                                      'in a moment.',],
+    }.freeze
+
+    # The page for the status the route names, whatever format was asked for.
+    def show
+      @status = params[:status].to_i
+      @heading, @message = MESSAGES.fetch @status, MESSAGES.fetch(500)
+      render status: @status, formats: :html
+    end
+
+    # The page shown while the app is down for maintenance.
+    def down
+      @heading = 'Down for maintenance'
+      @message = "#{@site_name} is being updated and will be back in a few minutes."
+      render :show, formats: :html
+    end
+
+  private
+
+    # The site's name and address, as the app names it for the request (Wordmark.site).
+    def set_site
+      @site_name, @site_url = Wordmark.site.call request
+    end
+  end
+end

data/app/helpers/wordmark/easy_helper.rb

@@ -0,0 +1,28 @@
+module Wordmark
+  # The easy design system's icons, for every view of every app (Wordmark::Engine): one sprite every
+  # page shares (app/assets/images/easy/sprite.svg), one file the browser keeps for a year rather
+  # than a copy in every page.
+  module EasyHelper
+    # Where an icon is in the sprite: its address, then the icon's id after the #.
+    # @param name [String] "sun", "newest": its id in the sprite, without the i-.
+    # @param kind ["i", "s"] an icon of the design system's, or a social network's.
+    def easy_icon_href(name, kind = 'i') = "#{asset_path 'easy/sprite.svg'}##{kind}-#{name}"
+
+    # An icon, hidden from screen readers: the text beside it says what it is.
+    # @param href [String] easy_icon_href's answer, or a name in the sprite.
+    # @param class [String] the svg's classes, "i" for an icon drawn the size of the text around it.
+    def easy_icon(href, class: 'i')
+      href = easy_icon_href(href) unless href.include? '#'
+      # Both hrefs: the old Safaris every page is meant for read only xlink:href.
+      tag.svg(tag.use('xlink:href': href, href:), class:, aria: { hidden: true }, focusable: false)
+    end
+
+    # An aircraft's avatar until it has a picture: its silhouette in a circle, like a contact's.
+    # @param name [String] AircraftAvatar.for's answer, "high-wing-tailwheel".
+    # @param size [Integer] the circle's width and height in pixels.
+    def easy_aircraft_avatar(name, size: 40)
+      icon = easy_icon easy_icon_href(name, 'a'), class: nil
+      tag.span icon, class: 'aircraft-avatar', style: "width:#{size}px;height:#{size}px"
+    end
+  end
+end