/* The Architect portal. Green brand (no blue/purple); every text/background pair meets WCAG 2.2 AA in light,
   dark and high-contrast modes. Accessibility classes are set on <html> by theme-init.js / app.js, the same
   panel as the main Synch website. Dark mode is Precursor teal-black with ion-green light (--ion*); the
   construction effects (logo, headings, cards) are at the end of the file. */
:root {
  --green: #1A7F52; --green-ink: #146140; --green-wash: #E8F5EE; --on-green: #FFFFFF;
  --bg: #FFFFFF; --bg-2: #F5F7F5; --panel: #FFFFFF; --line: #DDE3DF;
  --ink: #111714; --ink-2: #39443E; --mute: #5E6A63;
  --warn: #B45309; --warn-wash: #FFF4E5; --bad: #B42318; --bad-wash: #FDECEA; --good: var(--green); --good-wash: var(--green-wash);
  --ion: #1FB874; --ion-hi: #7FE3B4; --arch-bg: #12261C; --arch-stone: #3DBE7F; --arch-key: #8BE3B5;
  --radius: 12px; --wrap: 1120px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --green: #3DBE7F; --green-ink: #6FD6A1; --green-wash: #10261D; --on-green: #0E1311;
    --bg: #08110E; --bg-2: #0D1814; --panel: #101C17; --line: #213429;
    --ink: #EEF2EF; --ink-2: #C5CEC8; --mute: #95A39A;
    --warn: #F5A524; --warn-wash: #2A1F0B; --bad: #F97066; --bad-wash: #2C1412; color-scheme: dark;
    --ion: #3DFFB0; --ion-hi: #D2FFEC;
  }
}
:root[data-theme="dark"] {
  --green: #3DBE7F; --green-ink: #6FD6A1; --green-wash: #10261D; --on-green: #0E1311;
  --bg: #08110E; --bg-2: #0D1814; --panel: #101C17; --line: #213429;
  --ink: #EEF2EF; --ink-2: #C5CEC8; --mute: #95A39A;
  --warn: #F5A524; --warn-wash: #2A1F0B; --bad: #F97066; --bad-wash: #2C1412; color-scheme: dark;
  --ion: #3DFFB0; --ion-hi: #D2FFEC;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); }
a { color: var(--green-ink); }
h1, h2, h3 { line-height: 1.25; margin: 1.4em 0 .5em; }
h1 { font-size: 1.9rem; margin-top: .6em; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; }
p, ul, ol { margin: 0 0 1em; }
code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 0 .3em; font-size: .9em; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px 48px; }
.skip { position: absolute; left: -9999px; top: 8px; } .skip:focus { left: 16px; z-index: 100; background: var(--panel); padding: 8px 12px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--mute); } .small { font-size: .85rem; }
.lead { font-size: 1.1rem; color: var(--ink-2); max-width: 60ch; }

/* nav */
.nav { border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 20; }
.nav__in { max-width: var(--wrap); margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); text-decoration: none; }
.brand__mark { width: 28px; height: 28px; border-radius: 7px; display: block; }
.nav__links { display: flex; gap: 14px; flex: 1; flex-wrap: wrap; }
.nav__links a { color: var(--ink-2); text-decoration: none; font-weight: 500; padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav__links a:hover { color: var(--ink); } .nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--green); }
.nav__end { display: flex; align-items: center; gap: 8px; }
.icon-btn { background: none; border: 1px solid var(--line); border-radius: 8px; width: 38px; height: 38px; display: grid; place-items: center; color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { color: var(--ink); border-color: var(--mute); }
/* server pages: sidebar with the server's sections, page on the right */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 28px; }
.shell__main > h1 { margin-top: 0; }
.shell__main > h2:first-of-type { margin-top: 1.2em; }
.side { position: sticky; top: 76px; display: grid; gap: 14px; }
.side__server { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.side__server img { border-radius: 50%; flex: none; }
.side__name { margin: 0; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.side__group { margin: 14px 0 4px; padding-left: 10px; font-size: .85rem; font-weight: 600; color: var(--mute); }
.side__group:first-child { margin-top: 0; }
.side__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side__nav a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.side__nav a:hover { background: var(--bg-2); color: var(--ink); }
.side__nav a[aria-current="page"] { background: var(--green-wash); color: var(--green-ink); font-weight: 600; }
.side__toggle { display: none; }
.server-card img { border-radius: 50%; }
.avatar-fallback { width: 40px; height: 40px; border-radius: 50%; background: var(--green-wash); color: var(--green-ink); display: grid; place-items: center; font-weight: 700; flex: none; }
.foot { border-top: 1px solid var(--line); color: var(--mute); font-size: .9rem; padding-top: 20px; margin-top: 24px; }

/* controls */
.btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--green); background: var(--green); color: var(--on-green); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.06); }
.btn--quiet { background: transparent; color: var(--green-ink); }
.btn--danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn--sm { min-height: 32px; padding: 4px 12px; font-size: .9rem; }
.inline { display: inline; }
.shell__main > .inline { display: inline-block; margin: 0 0 16px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stack { display: grid; gap: 14px; max-width: 640px; margin: 12px 0 20px; } .stack.tight { gap: 6px; margin: 0 0 6px; }
label { display: grid; gap: 4px; font-weight: 500; } label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--mute); border-radius: 8px; padding: 7px 10px; min-height: 38px; }
textarea { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; width: 100%; }
input[type="checkbox"] { min-height: 0; width: 18px; height: 18px; accent-color: var(--green); }
input[type="color"] { padding: 2px; width: 46px; }

/* content */
.hero { padding: 40px 0 8px; } .hero h1 { font-size: 2.4rem; max-width: 20ch; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.grid { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.promo { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; max-width: 640px; } .promo img { border-radius: 10px; flex: none; }
.promo h2 { margin: 0 0 4px; font-size: 1rem; } .promo p { margin: 0 0 10px; }
.server-card { display: flex; gap: 12px; align-items: center; } .server-card h2 { margin: 0 0 6px; font-size: 1rem; } .card h3 { margin-top: 0; }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 24px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 2px; color: var(--ink-2); }
.stat__n { font-size: 1.8rem; font-weight: 700; color: var(--ink); }
.notice { background: var(--bg-2); border: 1px solid var(--line); border-left: 4px solid var(--mute); border-radius: 8px; padding: 10px 14px; }
.notice.good { background: var(--good-wash); border-left-color: var(--good); } .notice.warn { background: var(--warn-wash); border-left-color: var(--warn); } .notice.bad { background: var(--bad-wash); border-left-color: var(--bad); }
.notice ul { margin: 6px 0 0; }
.findings, .diff { list-style: none; padding: 0; display: grid; gap: 6px; }
.findings li, .diff li { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.steps { max-height: 420px; overflow: auto; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); margin: 12px 0; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--bg-2); font-size: .85rem; } tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
td.indent { padding-left: 32px; }
.grid-table td { white-space: nowrap; font-size: .85rem; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-right: 8px; border: 1px solid var(--line); vertical-align: -1px; }
.prose { max-width: 72ch; }
details > summary { cursor: pointer; font-weight: 600; margin: 8px 0; }

/* template editor (app.js) */
.ed-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 10px 0; background: var(--panel); }
.ed-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.ed-row input[type="text"] { flex: 1 1 160px; }

/* accessibility panel (same as the main Synch website) */
.a11y { position: fixed; z-index: 50; top: 64px; right: max(16px, calc((100vw - var(--wrap)) / 2 + 16px)); width: min(360px, calc(100vw - 32px));
  max-height: calc(100dvh - 80px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18); padding: 18px 18px 16px; animation: a11y-in .2s cubic-bezier(.2, .7, .2, 1); }
@keyframes a11y-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .a11y__head h2 { font-size: 1.1rem; margin: 0; }
.a11y__close { background: none; border: 1px solid var(--line); border-radius: 8px; width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink-2); cursor: pointer; }
.a11y__group { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.a11y__group legend { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; padding: 0; }
.seg { display: flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; }
.seg label { flex: 1; position: relative; display: block; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; min-height: 0; }
.seg span { display: grid; place-items: center; min-height: 36px; border-radius: 7px; font-weight: 600; font-size: .9rem; color: var(--ink-2); }
.seg input:checked + span { background: var(--ink); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 1px; }
.a11y__toggles { display: grid; border-top: 1px solid var(--line); margin-top: 4px; }
.switch { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__text { flex: 1; display: grid; gap: 1px; } .switch__text b { font-weight: 600; font-size: .95rem; } .switch__text small { font-size: .82rem; color: var(--mute); line-height: 1.4; }
.switch__ui { flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--line); position: relative; }
.switch__ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s; }
.switch input:checked ~ .switch__ui { background: var(--green); } .switch input:checked ~ .switch__ui::after { transform: translateX(16px); }
.switch input:focus-visible ~ .switch__ui { outline: 2px solid var(--green); outline-offset: 2px; }
.a11y__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: .8rem; color: var(--mute); }
@media (max-width: 520px) {
  .a11y { top: auto; bottom: 0; right: 0; left: 0; width: auto; max-height: 85dvh; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .hero h1 { font-size: 1.8rem; }
}

/* accessibility preferences */
:root[data-text="1"] { font-size: 112.5%; } :root[data-text="2"] { font-size: 125%; } :root[data-text="3"] { font-size: 140%; }
:root[data-text] body { font-size: 1rem; }
:root.a11y-contrast { --green: #0F5F3A; --green-ink: #0B4A2D; --green-wash: #DDF0E5; --ink: #000; --ink-2: #141A16; --mute: #2F3833; --line: #6F7D75; --bg-2: #EFF2F0; }
:root.a11y-contrast[data-theme="dark"] { --green: #8BE3B5; --green-ink: #A8ECC8; --green-wash: #0D2A1B; --on-green: #000; --bg: #000; --bg-2: #0A0D0B; --panel: #0C100D; --ink: #FFF; --ink-2: #EEF2EF; --mute: #C9D3CD; --line: #7D8B83; }
@media (prefers-color-scheme: dark) {
  :root.a11y-contrast:not([data-theme="light"]) { --green: #8BE3B5; --green-ink: #A8ECC8; --green-wash: #0D2A1B; --on-green: #000; --bg: #000; --bg-2: #0A0D0B; --panel: #0C100D; --ink: #FFF; --ink-2: #EEF2EF; --mute: #C9D3CD; --line: #7D8B83; }
}
.a11y-contrast .card, .a11y-contrast .btn, .a11y-contrast .notice, .a11y-contrast .table-wrap { border-width: 2px; }
.a11y-contrast .muted { color: var(--ink-2); }
.a11y-underline a:not(.btn):not(.brand) { text-decoration: underline; text-underline-offset: 3px; }
.a11y-underline .side__nav a, .a11y-underline .nav__links a { text-decoration: underline; }
.a11y-spacing body { letter-spacing: .05em; word-spacing: .16em; }
.a11y-spacing p, .a11y-spacing li, .a11y-spacing .lead { line-height: 1.9; }
:root.a11y-font { --font: Verdana, Tahoma, 'Segoe UI', sans-serif; }
.a11y-still *, .a11y-still *::before, .a11y-still *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }
.a11y-still, .a11y-still body { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* marketplace */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.subtabs a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-weight: 500; }
.subtabs a[aria-current="page"] { background: var(--green); border-color: var(--green); color: var(--on-green); }
.filters { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 20px;
  display: grid; gap: 12px 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: end; }
.filters label.check { min-height: 38px; }
.filters .btn { justify-self: start; }
.listing h2 { margin: 4px 0 6px; font-size: 1.1rem; }
.two-col { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.role-list, .chan-list { list-style: none; padding: 0; display: grid; gap: 4px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }

/* plain lists and status words (no badges) */
.howto { padding-left: 1.4em; display: grid; gap: 6px; max-width: 70ch; }
.findings li.sev.bad { border-left: 4px solid var(--bad); } .findings li.sev.warn { border-left: 4px solid var(--warn); }
.findings strong, .diff strong { color: var(--ink); }
.risk-high { color: var(--bad); } .risk-medium { color: var(--warn); } .risk-low { color: var(--ink-2); }
.grid-table td.lv-hidden { color: var(--mute); }
.grid-table td.lv-post, .grid-table td.lv-moderate, .grid-table td.lv-moderate-voice { font-weight: 600; }

/* tablets and phones: the sidebar folds behind a "Sections" button (app.js; without it the list just shows) */
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 16px; }
  .side { position: static; gap: 10px; }
  .side__server { padding-bottom: 10px; }
  .js .side__toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 8px 14px;
    font: inherit; font-weight: 600; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
  .js .side__toggle::after { content: ''; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin: -4px 4px 0 12px; }
  .js .side__toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }
  .js .side__nav { display: none; border: 1px solid var(--line); border-radius: 10px; padding: 12px 8px; background: var(--panel); }
  .js .side__nav.open { display: block; }
}

/* phones: compact header (links scroll in their own row), two numbers per row, form tables stack */
td select { max-width: 100%; }
@media (max-width: 640px) {
  .nav__in { gap: 8px 12px; padding: 8px 16px; }
  .nav__end { margin-left: auto; }
  .nav__links { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: 16px; padding-bottom: 2px; }
  .nav__links a { white-space: nowrap; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 10px; } .stat__n { font-size: 1.4rem; }
  .form-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .form-table tr, .form-table td { display: block; }
  .form-table td { border-bottom: 0; padding: 6px 12px; }
  .form-table tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .form-table td.indent { padding-left: 12px; }
  .form-table select { width: 100%; }
  h1 { font-size: 1.6rem; } .hero h1 { font-size: 1.9rem; }
}

/* ── construction effects: the site builds itself, Precursor style. All of it is decoration: without CSS
   animations, JS, or with "Stop animations" on (.a11y-still zeroes every duration), the page is simply there. ── */

/* the arch mark: nav logo (builds once per visit: html.arch-build from theme-init.js) and the home hero (every visit) */
.arch { display: block; flex: none; overflow: visible; }
.arch__bg { fill: var(--arch-bg); }
.arch__ground, .arch__pillar, .arch__v { fill: var(--arch-stone); }
.arch__ground { opacity: .55; }
.arch__key { fill: var(--arch-key); }
.arch > * { transform-box: fill-box; }
.arch__v1 { --dx: -270px; --dy: 30px; --at: .5s; } .arch__v6 { --dx: 270px; --dy: 30px; --at: .58s; }
.arch__v2 { --dx: -240px; --dy: -180px; --at: .66s; } .arch__v5 { --dx: 240px; --dy: -180px; --at: .74s; }
.arch__v3 { --dx: -120px; --dy: -270px; --at: .82s; } .arch__v4 { --dx: 120px; --dy: -270px; --at: .9s; }
.arch-build .brand__mark > *, .arch--hero > * { animation-fill-mode: backwards; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
.arch-build .brand__mark .arch__bg, .arch--hero .arch__bg { animation: arch-fade .3s backwards; }
.arch-build .brand__mark .arch__ground, .arch--hero .arch__ground { transform-origin: center; animation: arch-ground .35s .1s backwards; }
.arch-build .brand__mark .arch__pillar, .arch--hero .arch__pillar { transform-origin: bottom; animation: arch-rise .35s .3s backwards; }
.arch-build .brand__mark .arch__v, .arch--hero .arch__v { animation: arch-lock .35s var(--at) backwards, arch-ion .7s calc(1.35s + var(--at) / 3) ease-out; }
.arch-build .brand__mark .arch__key, .arch--hero .arch__key { animation: arch-drop .4s 1.05s cubic-bezier(.3, 1.5, .5, 1) backwards, arch-ion .7s 1.4s ease-out; }
@keyframes arch-fade { from { opacity: 0; } }
@keyframes arch-ground { from { transform: scaleX(0); } }
@keyframes arch-rise { from { transform: scaleY(0); } }
@keyframes arch-lock { from { transform: translate(var(--dx), var(--dy)) scale(.85); opacity: 0; } }
@keyframes arch-drop { from { transform: translateY(-420px); opacity: 0; } }
@keyframes arch-ion { 30% { fill: var(--ion-hi); } }
.hero--arch { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; }
.arch--hero { width: 200px; height: 200px; }
.arch--hero .arch__bg { display: none; }
@media (max-width: 640px) { .hero--arch { grid-template-columns: minmax(0, 1fr); } .arch--hero { display: none; } }

/* the page heading decodes from glyphs (app.js); the real text stays in a .sr span, the letters underneath never move */
.dc-ch { position: relative; }
.dc-ch.is-scr { color: transparent; }
.dc-ch.is-scr::after { content: attr(data-g); position: absolute; left: 50%; top: 0; transform: translateX(-50%); color: var(--green-ink); font-weight: 600; }

/* cards and numbers fabricate: revealed from the bottom up behind an ion edge, a few at a time */
.card, .stat { animation: fab .5s cubic-bezier(.3, 0, .2, 1) backwards; }
:is(.grid, .stats) > :nth-child(2) { animation-delay: .05s; } :is(.grid, .stats) > :nth-child(3) { animation-delay: .1s; }
:is(.grid, .stats) > :nth-child(4) { animation-delay: .15s; } :is(.grid, .stats) > :nth-child(n+5) { animation-delay: .2s; }
@keyframes fab { from { clip-path: inset(100% 0 0 0); border-top-color: var(--ion); } 70% { clip-path: inset(0); border-top-color: var(--ion); } }

/* work in progress: an ion cube pulses beside a running change, and a pressed button carries a sweep of light */
[data-job-poll]::before { content: ''; display: inline-block; width: .6em; height: .6em; margin-right: .7em; vertical-align: .05em;
  background: var(--ion); transform: rotate(45deg); animation: ion-pulse 1.4s ease-in-out infinite; }
@keyframes ion-pulse { 50% { background: var(--ion-hi); transform: rotate(45deg) scale(.7); } }
.btn.is-building { background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); background-size: 250% 100%; animation: ion-sweep 1.1s linear infinite; }
@keyframes ion-sweep { from { background-position: 100% 0; } to { background-position: -150% 0; } }