easyfaa 0.20.0 → 1.0.0

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

@@ -0,0 +1,533 @@
+/* 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:36px;padding:0 16px;border-radius:999px;border:1px solid var(--color-line);background:var(--color-bg);color:var(--color-text);font:inherit;font-size:15px;font-weight:600;line-height:34px;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:var(--shadow-raise);transition:box-shadow .08s,background-color .12s,border-color .12s}
+.pill .i{margin-right:7px;vertical-align:-2px}
+.pill.primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}
+/* A pill is raised and stays where it is under the pointer: its shadow deepens and its edge darkens, a solid one's blue
+   deepens; pressed, it sits flat. Never underlined. One size on every page. */
+.pill:hover{text-decoration:none;color:var(--color-text);border-color:var(--color-text-muted);box-shadow:var(--shadow-raise-hover)}
+.pill:active{box-shadow:none}
+.pill.primary:hover{background:var(--color-primary-strong);border-color:var(--color-primary-strong);color:var(--color-on-primary)}
+.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")}
+/* part-card: a plane card about a part, its head gray in both themes and embossed with a wrench and a bolt, a gear
+   and a hex nut, two to a row, lit from above */
+.plane-card.part-card .plane-card-head{background-color:#3a3a3a;color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='56' viewBox='0 0 112 56'%3E%3Cdefs%3E%3Cpath id='w' d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.5.5-1.1 0-1.4z'/%3E%3Cpath id='h' fill-rule='evenodd' d='M12 2l8.66 5v10L12 22l-8.66-5V7zM12 8.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 1 0 0-7z'/%3E%3Cpath id='g' fill-rule='evenodd' d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3Cpath id='b' d='M6 2h12v5H6zM9.5 8h5v2l-5 1zM9.5 12.5l5-1v2l-5 1zM9.5 16l5-1v2l-5 1zM9.5 19.5l5-1v1.5L12 22.5 9.5 20z'/%3E%3C/defs%3E%3Cuse href='%23w' transform='translate(3.65 3.1) scale(.9)' fill='%23fff' fill-opacity='0.16'/%3E%3Cuse href='%23w' transform='translate(4.35 4.9) scale(.9)' fill='%23000' fill-opacity='0.5'/%3E%3Cuse href='%23w' transform='translate(4 4) scale(.9)' fill='%233a3a3a'/%3E%3Cuse href='%23h' transform='translate(87.65 31.1) scale(.9)' fill='%23fff' fill-opacity='0.16'/%3E%3Cuse href='%23h' transform='translate(88.35 32.9) scale(.9)' fill='%23000' fill-opacity='0.5'/%3E%3Cuse href='%23h' transform='translate(88 32) scale(.9)' fill='%233a3a3a'/%3E%3Cuse href='%23g' transform='translate(31.65 31.1) scale(.9)' fill='%23fff' fill-opacity='0.16'/%3E%3Cuse href='%23g' transform='translate(32.35 32.9) scale(.9)' fill='%23000' fill-opacity='0.5'/%3E%3Cuse href='%23g' transform='translate(32 32) scale(.9)' fill='%233a3a3a'/%3E%3Cuse href='%23b' transform='translate(59.65 3.1) scale(.9)' fill='%23fff' fill-opacity='0.16'/%3E%3Cuse href='%23b' transform='translate(60.35 4.9) scale(.9)' fill='%23000' fill-opacity='0.5'/%3E%3Cuse href='%23b' transform='translate(60 4) scale(.9)' fill='%233a3a3a'/%3E%3C/svg%3E")}
+/* appliance-card: a plane card about an appliance, gray as a part's, embossed with a radio and a battery, a propeller
+   and an oxygen bottle, two to a row, lit from above */
+.plane-card.appliance-card .plane-card-head{background-color:#3a3a3a;color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='56' viewBox='0 0 112 56'%3E%3Cdefs%3E%3Cg id='r'%3E%3Cpath fill-rule='evenodd' d='M1.5 6.5h21v11h-21zM3.5 8.5v4h10v-4zM18.5 9.6a2.4 2.4 0 1 0 0 4.8a2.4 2.4 0 1 0 0-4.8zM3.5 14v1.8h3V14zM8 14v1.8h3V14z'/%3E%3C/g%3E%3Cg id='b'%3E%3Cpath fill-rule='evenodd' d='M2 7h20v13H2zM7.3 11.2h1.4v1.3H10v1.4H8.7v1.3H7.3v-1.3H6v-1.4h1.3zM14 12.5h4v1.4h-4z'/%3E%3Cpath d='M5 4.5h4V7H5zM15 4.5h4V7h-4z'/%3E%3C/g%3E%3Cg id='p' transform='rotate(35 12 12)'%3E%3Cpath d='M12 1.5c1.7 0 2.3 3.2 1.9 8.3h-3.8C9.7 4.7 10.3 1.5 12 1.5zM10.1 14.2h3.8c.4 5.1-.2 8.3-1.9 8.3s-2.3-3.2-1.9-8.3z'/%3E%3Cpath d='M12 9.2a2.8 2.8 0 1 0 0 5.6a2.8 2.8 0 1 0 0-5.6z'/%3E%3C/g%3E%3Cg id='o'%3E%3Cpath d='M8 9a4 4 0 0 1 8 0v12a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1z'/%3E%3Cpath d='M10.5 3h3v2.6h-3z'/%3E%3Cpath d='M8.5 1.5h7v1.5h-7z'/%3E%3Cpath d='M13.5 3.6h3v1.3h-3z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23r' transform='translate(3.65 3.1) scale(.9)' fill='%23fff' fill-opacity='.16'/%3E%3Cuse href='%23r' transform='translate(4.35 4.9) scale(.9)' fill='%23000' fill-opacity='.5'/%3E%3Cuse href='%23r' transform='translate(4 4) scale(.9)' fill='%233a3a3a'/%3E%3Cuse href='%23b' transform='translate(59.65 3.1) scale(.9)' fill='%23fff' fill-opacity='.16'/%3E%3Cuse href='%23b' transform='translate(60.35 4.9) scale(.9)' fill='%23000' fill-opacity='.5'/%3E%3Cuse href='%23b' transform='translate(60 4) scale(.9)' fill='%233a3a3a'/%3E%3Cuse href='%23p' transform='translate(31.65 31.1) scale(.9)' fill='%23fff' fill-opacity='.16'/%3E%3Cuse href='%23p' transform='translate(32.35 32.9) scale(.9)' fill='%23000' fill-opacity='.5'/%3E%3Cuse href='%23p' transform='translate(32 32) scale(.9)' fill='%233a3a3a'/%3E%3Cuse href='%23o' transform='translate(87.65 31.1) scale(.9)' fill='%23fff' fill-opacity='.16'/%3E%3Cuse href='%23o' transform='translate(88.35 32.9) scale(.9)' fill='%23000' fill-opacity='.5'/%3E%3Cuse href='%23o' transform='translate(88 32) scale(.9)' fill='%233a3a3a'/%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:not(:focus-visible){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 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.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:6px 10px;cursor:pointer;white-space:nowrap}
+/* The order: a button, since it changes the list, but a quiet one: a tint under the pointer. */
+.sort-button:hover{background:var(--color-surface-2)}
+.sort-button .i{margin-right:8px}
+
+/* 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:not(:focus-visible){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}
+.part-tabs a .part-tabs-dot{display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;vertical-align:2px;background:var(--color-midnight)}
+.part-tabs a .part-tabs-dot[hidden]{display:none}
+@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}
+.has-js .js-switches ol.ad-card-list li.ad-card.superseded:not([hidden]){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)}
+.level-chip.due{background:var(--color-midnight);color:var(--color-bg)}
+
+/* modal: a dialog; has-tip: why a control is off, in a bubble over it; 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:not(:focus-visible){outline:0}
+.modal-x:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
+/* The bubble shows on hover or focus (a tap focuses it), its text the data-tip; the ring is the keyboard's alone */
+.has-tip{position:relative;display:inline-block}
+.has-tip[data-tip]:hover::after,.has-tip[data-tip]:focus::after,.has-tip[data-tip]:focus-within::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:10px;width:max-content;max-width:min(280px,80vw);padding:6px 10px;border-radius:6px;background:var(--color-text);color:var(--color-bg);font-size:13px;font-weight:600;line-height:1.35;pointer-events:none;z-index:60}
+.has-tip[data-tip]:hover::before,.has-tip[data-tip]:focus::before,.has-tip[data-tip]:focus-within::before{content:'';position:absolute;bottom:calc(100% + 2px);left:24px;border:6px solid transparent;border-bottom:0;border-top-color:var(--color-text);pointer-events:none;z-index:60}
+.has-tip:focus:not(:focus-visible){outline:0}.has-tip:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:6px}
+.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-text-muted);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:hover{background:var(--color-primary-strong)}
+.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:not(:focus-visible){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}
+/* Its tries are links, a row of them. */
+.search-hint a{display:inline-block;margin:12px 6px 0;font-variant-numeric:tabular-nums}
+.search-form + .search-hint{margin-left:auto;margin-right:auto}
+/* A page the member opened is a removable: its link, then the × that forgets it. */
+.search-hint .search-hint-recent{display:inline-flex;align-items:center;margin:12px 4px 0;padding:3px 3px 3px 12px;border-radius:10px;background:var(--color-surface-2);color:var(--color-text);white-space:nowrap}
+.search-hint .search-hint-recent a{margin:0}
+.search-hint .search-hint-recent form{display:inline}
+.search-hint .search-hint-recent .x-button{width:26px;height:26px;margin-left:4px;opacity:.65}
+.search-hint .search-hint-recent .x-button:hover{opacity:1}
+.mini label{display:block;font-weight:600;margin-bottom:6px}
+/* mini: a field and a button, each its own: the field sunk, the button the main one. */
+.mini .search-field{border:0;border-radius:0;box-shadow:none;overflow:visible;background:none;align-items:center}
+.mini .search-field:focus-within{box-shadow:none}
+.mini .search-field input{font-size:17px;height:44px;padding:0 12px;margin-right:8px;border:1px solid var(--color-line);border-radius:10px;background:var(--color-bg);box-shadow:var(--shadow-sunk)}
+.mini .search-field input:focus{outline:3px solid var(--color-focus);outline-offset:1px}
+.mini .search-field button{height:36px;min-width:0;padding:0 16px;border-radius:999px;font-size:15px;box-shadow:var(--shadow-raise)}
+.mini .search-field button:hover{box-shadow:var(--shadow-raise-hover)}
+.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-text-muted);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;box-shadow:none}
+.pill.danger{background:var(--color-bad);border-color:var(--color-bad);color:var(--color-bg)}
+.pill.danger:hover{-webkit-filter:brightness(.88);filter:brightness(.88);color:var(--color-bg);border-color:var(--color-bad)}
+/* soft danger: destroys something, always after a confirmation; never the main step */
+.pill.soft.danger{background:var(--color-bg);border-color:var(--color-line);color:var(--color-bad)}
+.pill.soft.danger:hover{-webkit-filter:none;filter:none;background:var(--color-bg);color:var(--color-bad);border-color:var(--color-bad)}
+.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;padding:10px 0 8px}
+.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;box-shadow:var(--shadow-sunk)}
+.field-list input[readonly]{background:var(--color-surface-1);color:var(--color-text-2)}
+.field-list li.side{flex-basis:100%;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}
+.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,.steps-bar .is-done 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}
+}
+/* A step that can't be opened is muted, one that can is underlined light on hover; is-done is a step with nothing
+   left to do; show-keys rings the number of every step that can be opened, while a key is held */
+.steps-bar li>span:not(.is-on){opacity:.55}
+.steps-bar a:hover{border-bottom-color:var(--color-line)}
+@media (min-width:1024px){.steps-bar{display:flex;justify-content:space-between;column-gap:12px}.steps-bar li>:first-child{padding-left:0;padding-right:0}}
+.steps-bar.show-keys a b{box-shadow:0 0 0 2px var(--color-primary)}
+
+/* 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%}
+/* logo (render layout: "easy/logo"): an app's logo in the header, its ink the theme's, its plane wiggling under the pointer */
+.logo{display:inline-block;vertical-align:middle}
+.logo .ink{fill:#15202e}
+.logo .ink-stroke{stroke:#15202e}
+:root[data-theme="dark"] .logo .ink{fill:#f3f5f8}
+:root[data-theme="dark"] .logo .ink-stroke{stroke:#f3f5f8}
+@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo .ink{fill:#f3f5f8}:root:not([data-theme="light"]) .logo .ink-stroke{stroke:#f3f5f8}}
+.logo .plane{transform-origin:28px 28px}
+.site-brand:hover .plane,.site-brand:focus .plane{animation:plane-wiggle .7s ease-in-out}
+@keyframes plane-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-10deg) translateY(-1px)}45%{transform:rotate(7deg)}70%{transform:rotate(-4deg)}85%{transform:rotate(2deg)}}
+/* A heading a link jumps to stops under the header, which stays at the top on a wide window */
+@media (min-width:601px){html{scroll-padding-top:72px}}
+/* legal: the terms and the privacy page, each with the day it last changed (updated) */
+.legal h1{font-size:32px;line-height:1.2;margin:24px 0 4px}
+.legal h2{font-size:21px;margin:32px 0 8px}
+.legal .updated{color:var(--color-text-muted);font-size:15px;margin:0 0 24px}
+/* none-here: what a list says when nothing is on it, or nothing is left by its switches and search: plain words, with the
+   way to add the first where there is one */
+.none-here{color:var(--color-text-muted);margin:14px 0}
+.part-tabs-panel .none-here{margin-top:0}
+.none-here[hidden]{display:none}
+/* search-hit: a word of the search, marked where a row has it (easy/highlight) */
+mark.search-hit{background:var(--color-primary-soft);color:inherit;border-radius:2px}
+/* alert-cta: the one thing a page asks of its reader (sign in, get alerts, subscribe), one a page at most and never in
+   a heading: the main button, large. Done (alert-on), it tells and no longer asks: a removable, green. */
+.alert-cta{display:inline-block;box-sizing:border-box;min-height:54px;padding:14px 30px;border-radius:27px;border:1px solid var(--color-primary);background:var(--color-primary);color:var(--color-on-primary);font-family:inherit;font-size:19px;font-weight:600;line-height:24px;text-decoration:none;cursor:pointer;box-shadow:var(--shadow-raise);transition:box-shadow .08s,background-color .12s,border-color .12s}
+.alert-cta:hover,.alert-cta:focus{text-decoration:none;background:var(--color-primary-strong);border-color:var(--color-primary-strong);color:var(--color-on-primary);box-shadow:var(--shadow-raise-hover)}
+.alert-cta.alert-on,.alert-cta.alert-on:hover{display:inline-flex;align-items:center;min-height:0;padding:6px 6px 6px 14px;border-radius:10px;border-color:transparent;background:var(--color-ok-bg);color:var(--color-ok);font-size:16px;box-shadow:none;cursor:default}
+/* removable: something kept for the reader that they can let go of (a recent page, alerts for an aircraft). A flat
+   tinted rectangle, as what tells is, with the small × that removes it at its end: never a capsule, which is a
+   button's shape. ok: in green, for what is on. */
+.removable{display:inline-flex;align-items:center;margin:4px;padding:3px 3px 3px 12px;border-radius:10px;background:var(--color-surface-2);color:var(--color-text);font-size:15px;white-space:nowrap}
+.removable.ok{padding:6px 6px 6px 14px;background:var(--color-ok-bg);color:var(--color-ok);font-size:16px;font-weight:600}
+.removable-x{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:4px;padding:0;border:0;border-radius:50%;background:none;color:inherit;opacity:.65;cursor:pointer}
+.removable-x:hover{opacity:1;background:rgba(11,30,58,.10)}
+/* switch: a setting that is on or off, saved the moment it is flipped; the track and knob of the filters'. Its word
+   keeps its room, so nothing beside it moves, and is gray while the server has not answered (aria-busy). */
+.switch{position:relative;display:inline-flex;align-items:center;min-width:5.4em;min-height:28px;padding:0 0 0 44px;border:0;background:none;color:var(--color-text);font:inherit;cursor:pointer}
+.switch::before{content:"";position:absolute;left:0;top:50%;margin-top:-10px;width:35px;height:20px;box-sizing:border-box;border:1px solid var(--color-line);border-radius:10rem;background:var(--color-surface-3);transition:background-color .15s}
+.switch::after{content:"";position:absolute;left:2px;top:50%;margin-top:-8px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
+.switch[aria-checked="true"]::before{background:var(--color-primary);border-color:var(--color-primary)}
+.switch[aria-checked="true"]::after{left:17px}
+.switch[aria-checked="false"],.switch[aria-busy="true"]{color:var(--color-text-muted)}
+.switch[aria-busy="true"]{cursor:progress}
+.switch[aria-busy="true"]::before{opacity:.55}
+/* plus-link: opens a form in place, or adds a row to one, and changes nothing until that form is saved: blue bold
+   words after a plus. */
+.plus-link{display:inline;padding:0;border:0;background:none;color:var(--color-primary);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
+.plus-link:hover{color:var(--color-primary-strong);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
+/* add-rows: things added together. A plus-link (add-rows-add) draws each row (add-row) from the box's template, its
+   fields labelled above them and its Remove (add-row-drop) at its end; the box's button (add-rows-save), which counts
+   them, saves them all, or the form the box is in does with its own. easy/add_rows draws and counts. */
+.add-rows-list:empty{display:none}
+.add-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin:0 0 12px}
+.add-row label{display:flex;flex-direction:column;gap:4px;flex:1 1 9rem;min-width:0;margin:0;font-weight:600}
+.add-row label.wide{flex:3 1 16rem}
+.add-row label.check-line{flex:0 0 auto;flex-direction:row;align-items:center;gap:6px;height:44px;font-weight:400}
+.add-row input:not([type=checkbox]),.add-row select{width:100%;height:44px;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;font-weight:400;
+  box-shadow:var(--shadow-sunk)}
+.add-rows-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:4px 0 0}
+/* go-link: the way forward that only goes, a bold link, with its arrow. */
+.go-link{font-weight:600;text-decoration:none}
+.go-link:hover{text-decoration:underline}
+/* step-foot: how a step ends, the same on every step: what is left to do on it, then the way on, a go-link when it
+   only goes and the main button when it saves the step first. In the page's flow at the step's end; once the step's
+   top has left the window (easy/step_foot) it also keeps to the window's foot, coming up with the smallest bounce.
+   It spans the window, whatever holds it, under a hairline: its ground is an image drawn past the window's
+   sides (border-image's outset, which takes no room), and below it while it rises, so nothing shows under it. */
+.step-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:28px -16px 0;padding:12px 16px;z-index:20;border-image:linear-gradient(var(--color-line) 0 1px,var(--color-bg) 1px) fill 0/0/0 100vmax}
+.step-foot > *{margin:3px 0}
+.step-foot-left{color:var(--color-text-2);font-size:15px}
+.step-foot-left b{color:var(--color-text)}
+.step-foot .go-link{font-size:17px}
+.step-foot.is-stuck{position:sticky;bottom:0}
+/* The card a foot ends has no room of its own under it. */
+.flow-card:has(.step-foot){margin-bottom:0}
+.step-foot.is-rising{animation:step-foot-rise .3s cubic-bezier(.2,.8,.3,1.06);border-image-outset:0 100vmax 40px}
+@keyframes step-foot-rise{from{transform:translateY(110%)}to{transform:none}}
+/* flow-hero: a first page's search-hero as wide as the page, its field glowing until typed in (pulse), with what it
+   costs above the title (free) */
+.free{display:inline-block;background:var(--color-ok-bg);color:var(--color-ok);font-weight:700;border-radius:999px;padding:4px 12px;font-size:15px;margin-bottom:10px}
+.flow-hero{position:relative;overflow:hidden;padding-bottom:28px}
+.flow-hero .page-width{position:relative}
+.flow-hero .search-hero-lede,.flow-hero .search-form,.flow-hero .search-hero-stats,.flow-hero .step-cards{max-width:none}
+.flow-hero h1{margin-bottom:4px}
+.flow-hero .search-hero-lede{margin-bottom:28px}
+.flow-hero .search-form label{font-size:20px;color:var(--color-midnight)}
+.search-field.pulse{-webkit-animation:glow 2.4s ease-in-out infinite;animation:glow 2.4s ease-in-out infinite}
+@-webkit-keyframes glow{0%,100%{box-shadow:0 6px 24px rgba(11,30,58,.12),0 0 0 0 rgba(26,112,208,.35)}50%{box-shadow:0 6px 24px rgba(11,30,58,.12),0 0 0 10px rgba(26,112,208,0)}}
+@keyframes glow{0%,100%{box-shadow:0 6px 24px rgba(11,30,58,.12),0 0 0 0 rgba(26,112,208,.35)}50%{box-shadow:0 6px 24px rgba(11,30,58,.12),0 0 0 10px rgba(26,112,208,0)}}
+.flow-hero .search-field button{font-size:22px}
+@media (max-width:480px){.flow-hero .search-field button .t{position:static;width:auto;height:auto;overflow:visible;clip:auto}}

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

@@ -0,0 +1,47 @@
+/* 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-strong);text-decoration:underline;text-decoration-thickness:2px}
+.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-strong);text-decoration:underline;text-decoration-thickness:2px}
+@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). */
+.sky-band{margin:0 0 14px;padding:6px 0}
+
+/* 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}
+/* Gray among gray words, the footer's links are underlined at rest: nothing else says they are links. */
+.site-footer a{color:var(--color-text-2);text-decoration:underline}
+.site-footer a:hover{color:var(--color-primary-strong)}
+.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}