New REM client: REM-Client 8db8f8c, 64-bit (modern REM UI for all windows, switchable with modern_ui: main menu, options, dealers, nav map, inventory, chat with history and settings, PM windows, notifications, flight HUD in FL's shape with HUD editor, colour themes; NeuroNet icons fly to the screen's middle; cursor / crosshair colour presets; dealers open at bases with real dealer rooms; text fields take typed keys)

EXE/THIRD_PARTY_NOTICES.md

@@ -59,3 +59,39 @@ LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+## The modern interface (docs/rem/ui-modern.md)
+
+The modern windows are drawn with these libraries and fonts, shipped unchanged:
+
+- RmlUi 6.3, https://github.com/mikke89/RmlUi -- src/RmlUi/vendor, license below.
+- FreeType 2.14.3, https://freetype.org -- src/freetype/vendor. Portions of this software are
+  copyright (c) 2026 The FreeType Project (www.freetype.org). All rights reserved. Used under the
+  FreeType License (src/freetype/vendor/FTL.TXT).
+- Saira Semi Condensed, Barlow and IBM Plex Mono (Google Fonts) -- assets/remui/fonts, each under
+  the SIL Open Font License 1.1 (the OFL-*.txt files beside the fonts).
+
+RmlUi:
+
+MIT License
+
+Copyright (c) 2008-2014 CodePoint Ltd, Shift Technology Ltd, and contributors
+Copyright (c) 2019-2026 The RmlUi Team, and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

EXE/rem.ini

@@ -26,11 +26,13 @@ dpi_aware = true                   ; per monitor DPI aware: Windows display scal
 draw_time_extrapolation = true     ; multiplayer: moving objects drawn as of the frame's time (false: as of the last physics step, retail)
 
 ; ---- Cursor and mouse ----
-cursor_color_custom = false        ; draw every cursor in the colour below
+cursor_color = 0                   ; cursor colour: 0 game default, 1 red, 2 green, 3 blue, 4 yellow, 5 pink
+cursor_color_custom = false        ; older switch (no preset chosen): every cursor in the colour below
 cursor_color_r = 255
 cursor_color_g = 255
 cursor_color_b = 255
 more_cursor_colors = false         ; target cursor in group / trade-request colour
+lead_marker_color = 0              ; crosshair (lead cross) colour: 0 game default, 1 red, 2 green, 3 blue, 4 yellow, 5 pink
 lead_marker_color_custom = false   ; the lead cross (aim point) in the colour below (ClientHook "crosshair colour")
 lead_marker_color_r = 191
 lead_marker_color_g = 29
@@ -52,6 +54,23 @@ zone_messages = true               ; "Entered <zone>." / "Left <zone>." in the a
 join_server_button = true          ; JOIN SERVER in the main menu: straight to the first rem_servers entry
 chat_widescreen_shift = true       ; the chat window at the left screen edge on wide screens (adoxa HudShift, chat groups)
 rem_bar = true                     ; REM bar top left (NeuroNet bar twin with the REM windows) *
+modern_ui = true                   ; the modern windows (new design, docs/rem/ui-modern.md) where there are some; off: all classic
+modern_ui_scale = 1.0              ; size of the modern windows (1 = 1 dp per pixel at 1080 lines)
+hud_scale = 1.0                    ; size of the modern flight HUD (the parts keep their own size from the HUD editor)
+hud_opacity = 1.0                  ; opacity of the modern flight HUD
+ui_theme = 0                       ; colours of the modern windows: 0 REM, 1 neon blue, 2 red, 3 green, 4 purple, 5 high contrast
+colorblind_mode = 0                ; friend / foe colours: 0 FL red / green, 1 orange / blue (red-green), 2 red / cyan (blue-yellow)
+; chat colours per channel (the chat settings, gear in the chat line): rrggbb, empty = FL's own
+chat_color_universe =
+chat_color_system =
+chat_color_local =
+chat_color_group =
+chat_color_private =
+chat_color_server =
+chat_color_console =
+chat_timestamps = true             ; times in the modern chat history
+chat_ignore =                      ; ignored players (the chat menu on a name), names joined by |
+modern_ui_debugger = false         ; F8 shows the RmlUi debugger over the modern windows *
 rem_protocol_log = true            ; every REM server message in LOGS\rem_protocol.log *
 rem_servers = srv.rem-freelancer.moe:2302 ; servers always in the multiplayer list (host:port, comma separated) *
 copy_paste_feature = false         ; Ctrl+C / Ctrl+V in text boxes

EXE/remgfx.ini

@@ -111,6 +111,8 @@ WeaponGlow = 1.6
 ; white), 3 motion vectors (grey = still, magenta = unknown), 4 material class (glass, nomad,
 ; planet water, engine glow ... one colour each), 5 game object (one colour per object), 6 phase
 DebugView = 0
+; motion diagnostics in remgfx.log after each statistics line (planet surfaces, own ship, camera): 1 on
+MotionLog = 0
 ; R16 distortion: heat haze behind engines and around explosions, refraction at shield hits and
 ; cloaks, a swirl in the jump tunnel; Distortion switches all of it, the others scale each kind
 ; (0 = off). Needs Taa = 1 (it shares the scene's extra targets with the motion vectors).

EXE/remui/account.rml

@@ -0,0 +1,28 @@
+<rml>
+<head>
+    <title>Account</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .explain { white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 14dp; }
+        .label { margin-bottom: 6dp; }
+    </style>
+</head>
+<body class="window small" data-model="account">
+    <div class="win-head">
+        <span class="title">MULTIPLAYER ACCOUNT</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="explain">{{ explain }}</div>
+            <div class="label">Account key</div>
+            <input class="text" type="text" data-value="key" maxlength="40"/>
+            <div class="actions" style="margin-top: 14dp;">
+                <div class="btn primary" data-class-disabled="key == ''" data-action="go">Continue<div class="tip">Checks the key and goes on to the server list.</div></div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <div class="btn" data-action="back">Back</div>
+    </div>
+</body>
+</rml>

EXE/remui/base.rml

@@ -0,0 +1,571 @@
+<rml>
+<head>
+    <title>Base manager</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* pages: one or two columns that fill the content area */
+        .page { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .page.col { flex-direction: column; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.side { flex: 0 0 340dp; margin-right: 18dp; }
+        .colm.gap { margin-right: 18dp; }
+        .col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
+        .col-h .hint { margin-left: auto; }
+        .grow { flex: 1; min-height: 0; }
+        .search { margin-bottom: 8dp; }
+        .panel { border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 12dp; margin-bottom: 12dp; }
+        .panel .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; margin-bottom: 4dp; }
+        .amount { display: flex; flex-direction: row; align-items: center; margin: 8dp 0 10dp 0; }
+        .amount .label { margin-right: 10dp; }
+        .amount .v { font-family: "IBM Plex Mono"; width: 90dp; text-align: right; margin-left: 10dp; }
+        .amount .btn { margin: 0 0 0 10dp; padding: 3dp 10dp; }
+        .jobs .job { margin-bottom: 8dp; }
+        .jobs .line { display: flex; flex-direction: row; font-size: 14dp; margin-bottom: 3dp; }
+        .jobs .line .left { margin-left: auto; font-family: "IBM Plex Mono"; color: #8197ad; }
+        .slots { display: flex; flex-direction: row; margin-bottom: 12dp; }
+        .slot { flex: 1; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 10dp; margin-right: 10dp; }
+        .slot.last { margin-right: 0; }
+        .slot .v { font-family: "Saira SemiCondensed"; font-size: 16dp; margin: 4dp 0 8dp 0; }
+        .row.short .c2, .row.short .c3 { color: #ef6a5b; }
+
+        /* SYSTEM */
+        .sys-head { display: flex; flex-direction: row; align-items: center; }
+        .sys-head .sys-claim { margin-left: auto; }
+        .sys-view { display: flex; flex-direction: row; margin-bottom: 8dp; }
+        .model { flex: 0 0 55%; height: 260dp; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); margin-right: 14dp; }
+        .sys-type { flex: 1; min-width: 0; }
+        .sys-type .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; }
+        .sys-type .p { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
+        .ware { display: flex; flex-direction: row; font-size: 14dp; padding: 3dp 0; border-bottom: 1dp #ffffff08; }
+        .ware .n { margin-left: auto; font-family: "IBM Plex Mono"; }
+        .sys-info { margin-bottom: 8dp; }
+
+        /* DRONES */
+        .dlist { flex: 1; overflow-y: auto; }
+        .drone
+        {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            padding: 9dp 10dp;
+            margin-bottom: 6dp;
+            border: 1dp #24405c;
+            border-radius: 3dp;
+            background-color: #122033;
+        }
+        .drone:hover { border-color: #5cc8f0; }
+        .drone.selected { border-color: #f2b13c; }
+        .drone .ico
+        {
+            width: 34dp;
+            height: 34dp;
+            line-height: 32dp;
+            text-align: center;
+            border: 2dp #3d6d96;
+            border-radius: 17dp;
+            font-family: "Saira SemiCondensed";
+            font-size: 13dp;
+            color: #5cc8f0;
+            margin-right: 10dp;
+        }
+        .drone .mid { flex: 1; min-width: 0; }
+        .drone .line1 { display: flex; flex-direction: row; align-items: center; }
+        .drone .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; flex: 1; }
+        .drone .s { font-size: 13dp; color: #8197ad; margin: 2dp 0 5dp 0; white-space: nowrap; overflow: hidden; }
+        .add
+        {
+            text-align: center;
+            padding: 9dp;
+            border: 2dp #3d6d96;
+            border-radius: 3dp;
+            color: #5cc8f0;
+            font-family: "Saira SemiCondensed";
+            letter-spacing: 1.1dp;
+            text-transform: uppercase;
+            font-size: 14dp;
+            margin-top: 4dp;
+        }
+        .add:hover { background-color: #122033; }
+        .d-head { display: flex; flex-direction: row; align-items: center; margin-bottom: 12dp; }
+        .d-head .kind { margin: 0 14dp; }
+        .pane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+        .pane .table { flex: 1; margin: 8dp 0 10dp 0; }
+        .route { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
+        .stop { flex: 1; border: 1dp #24405c; border-radius: 3dp; padding: 8dp 10dp; background-color: #122033; }
+        .stop .v { font-family: "Saira SemiCondensed"; font-size: 16dp; margin-bottom: 4dp; }
+        .arrow { color: #f2b13c; font-family: "IBM Plex Mono"; margin: 0 10dp; }
+        .namefield { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
+        .namefield .label { margin-right: 10dp; }
+        .namefield input.text { flex: 1; }
+    </style>
+</head>
+<body class="window" data-model="base">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_base.3db"/><span class="title">BASE MANAGER</span>
+        <span class="loc">{{ base_name }}</span>
+        <span class="spacer"></span>
+        <span class="chip">Credits <span class="v">{{ money }}</span></span>
+        <span class="chip">Drones <span class="v">{{ count }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="nav">
+            <div class="item" data-class-active="page == 0" data-action="page" data-arg="0"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/><span>Depot</span><span class="badge" data-if="depot.size &gt; 0">{{ depot.size }}</span></div>
+            <div class="item" data-class-active="page == 1" data-action="page" data-arg="1"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/><span>All depots</span></div>
+            <div class="item" data-class-active="page == 2" data-action="page" data-arg="2"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/><span>Market</span></div>
+            <div class="item" data-class-active="page == 3" data-action="page" data-arg="3"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/><span>Sell</span></div>
+            <div class="sep"></div>
+            <div class="item" data-class-active="page == 4" data-action="page" data-arg="4"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_crafting.3db"/><span>Crafting</span><span class="badge" data-if="craft_jobs.size &gt; 0">{{ craft_jobs.size }}</span></div>
+            <div class="item" data-class-active="page == 5" data-action="page" data-arg="5"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_rank.3db"/><span>Research</span><span class="badge" data-if="research_jobs.size &gt; 0">{{ research_jobs.size }}</span></div>
+            <div class="sep"></div>
+            <div class="item" data-class-active="page == 6" data-action="page" data-arg="6"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_construction.3db"/><span>System</span></div>
+            <div class="item" data-class-active="page == 7" data-action="page" data-arg="7"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/><span>Drones</span><span class="badge" data-if="drones.size &gt; 0">{{ drones.size }}</span></div>
+        </div>
+        <div class="content">
+            <div class="blocked" data-if="blocked != 0">
+                <div class="t">{{ blocked_title }}</div>
+                <div>{{ blocked_text }}</div>
+            </div>
+
+            <!-- ================================================= DEPOT -->
+            <div class="page" data-if="blocked == 0 &amp;&amp; page == 0">
+                <div class="blocked" data-if="depot_state == 0">
+                    <div class="t">No depot on this base</div>
+                    <div class="hint">A depot keeps goods on this base, beside your cargo hold. Paid from the account bank.</div>
+                    <div class="actions" style="margin-top: 14dp;"><div class="btn primary" data-action="buy-depot">Buy a depot here</div></div>
+                </div>
+                <div class="colm gap" data-if="depot_state != 0">
+                    <div class="col-h"><h3>Depot on this base</h3><span class="hint">{{ depot.size }} kinds</span></div>
+                    <div class="table grow">
+                        <div class="head"><span class="c1">Item</span><span class="c2">Type</span><span class="c3">Amount</span></div>
+                        <div class="body">
+                            <div class="empty" data-if="depot.size == 0">{{ depot_state &lt; 0 ? 'Waiting for the server...' : 'The depot is empty.' }}</div>
+                            <div class="row" data-for="r : depot" data-class-selected="r.selected" data-action="pick-depot" data-attr-data-arg="r.key">
+                                <span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span><span class="c3">{{ r.c }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm" data-if="depot_state != 0">
+                    <div class="col-h"><h3>Cargo hold</h3><span class="hint">free {{ hold_free }}</span></div>
+                    <div class="table grow">
+                        <div class="head"><span class="c1">Item</span><span class="c3">Amount</span></div>
+                        <div class="body">
+                            <div class="empty" data-if="cargo.size == 0">Nothing in the hold.</div>
+                            <div class="row" data-for="r : cargo" data-class-selected="r.selected" data-action="pick-cargo" data-attr-data-arg="r.key">
+                                <span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="amount">
+                        <span class="label">Amount</span>
+                        <input class="range" type="range" min="1" step="1" data-attr-max="amount_max" data-value="amount"/>
+                        <span class="v">{{ amount_text }}</span>
+                        <div class="btn" data-action="amount-max">Max</div>
+                    </div>
+                    <div class="actions">
+                        <div class="btn primary" data-action="withdraw">Withdraw to hold<div class="tip">Moves the amount of the depot item you picked into your cargo hold.</div></div>
+                        <div class="btn primary" data-action="deposit">Deposit to depot<div class="tip">Moves the amount of the cargo you picked into the depot on this base.</div></div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ================================================= ALL DEPOTS -->
+            <div class="page col" data-if="blocked == 0 &amp;&amp; page == 1">
+                <div class="col-h"><h3>Your depots</h3><span class="hint">{{ depots.size }} bases</span></div>
+                <input class="text search" type="text" data-value="filter" maxlength="40"/>
+                <div class="table grow">
+                    <div class="head"><span class="c1">Base</span><span class="c3">Items</span></div>
+                    <div class="body">
+                        <div class="empty" data-if="depots.size == 0">No depots yet.</div>
+                        <div class="row" data-for="r : depots"><span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span></div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ================================================= MARKET -->
+            <div class="page col" data-if="blocked == 0 &amp;&amp; page == 2">
+                <div class="blocked" data-if="market_state == 0">
+                    <div class="t">No galactic market here</div>
+                    <div class="hint">The galactic market is open on trade hubs only.</div>
+                </div>
+                <div class="colm" data-if="market_state != 0">
+                    <div class="col-h"><h3>Galactic market</h3><span class="hint">{{ listings.size }} offers</span></div>
+                    <input class="text search" type="text" data-value="filter" maxlength="40"/>
+                    <div class="table grow">
+                        <div class="head"><span class="c1">Item</span><span class="c3">Amount</span><span class="c4">Price / unit</span><span class="c2">Seller</span><span class="c2">Trade hub</span></div>
+                        <div class="body">
+                            <div class="empty" data-if="listings.size == 0">{{ market_state &lt; 0 ? 'Waiting for the server...' : 'No offers.' }}</div>
+                            <div class="row" data-for="r : listings" data-class-selected="r.selected" data-action="pick-listing" data-attr-data-arg="r.key">
+                                <span class="c1">{{ r.a }}</span><span class="c3">{{ r.b }}</span><span class="c4">{{ r.c }}</span><span class="c2">{{ r.d }}</span><span class="c2">{{ r.e }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="hint" style="margin-top: 8dp;">{{ listing_pick == '' ? 'Pick an offer in the table.' : listing_pick }}</div>
+                    <div class="amount">
+                        <span class="label">Amount</span>
+                        <input class="range" type="range" min="1" step="1" data-attr-max="amount_max" data-value="amount"/>
+                        <span class="v">{{ amount_text }}</span>
+                        <div class="btn" data-action="amount-max">Max</div>
+                    </div>
+                    <div class="actions"><div class="btn primary" data-action="market-buy">Buy<div class="tip">Buys the amount; it goes into the depot on the seller's trade hub.</div></div></div>
+                </div>
+            </div>
+
+            <!-- ================================================= SELL -->
+            <div class="page" data-if="blocked == 0 &amp;&amp; page == 3">
+                <div class="colm gap">
+                    <div class="col-h"><h3>Depot items</h3></div>
+                    <input class="text search" type="text" data-value="filter" maxlength="40"/>
+                    <div class="table grow">
+                        <div class="head"><span class="c1">Item</span><span class="c3">Amount</span></div>
+                        <div class="body">
+                            <div class="empty" data-if="depot.size == 0">{{ market_state == 0 ? 'No galactic market here (trade hubs only).' : 'The depot is empty.' }}</div>
+                            <div class="row" data-for="r : depot" data-class-selected="r.selected" data-action="pick-sell" data-attr-data-arg="r.key">
+                                <span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm side">
+                    <div class="panel">
+                        <div class="label">Offer on the galactic market</div>
+                        <div class="t">{{ sell_pick == '' ? 'Pick a depot item' : sell_pick }}</div>
+                        <div class="amount">
+                            <span class="label">Amount</span>
+                            <input class="range" type="range" min="1" step="1" data-attr-max="amount_max" data-value="amount"/>
+                            <span class="v">{{ amount_text }}</span>
+                        </div>
+                        <div class="namefield"><span class="label">Price / unit</span><input class="text" type="text" data-value="price" maxlength="12"/></div>
+                        <div class="actions"><div class="btn primary" data-action="market-list">List for sale<div class="tip">Puts the amount on the galactic market at that price per unit.</div></div></div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ================================================= CRAFTING -->
+            <div class="page" data-if="blocked == 0 &amp;&amp; page == 4">
+                <div class="colm side">
+                    <div class="col-h"><h3>Recipes</h3><span class="hint">{{ recipes.size }}</span></div>
+                    <input class="text search" type="text" data-value="filter" maxlength="40"/>
+                    <div class="table grow">
+                        <div class="body">
+                            <div class="empty" data-if="recipes.size == 0">Waiting for the server...</div>
+                            <div class="row" data-for="r : recipes" data-class-selected="r.selected" data-action="pick-recipe" data-attr-data-arg="r.key">
+                                <span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm">
+                    <div class="panel" data-if="has_recipe">
+                        <div class="t">{{ recipe_name }}</div>
+                        <div class="hint">{{ recipe_meta }}</div>
+                    </div>
+                    <div class="panel" data-if="!has_recipe">
+                        <div class="t">Pick a recipe</div>
+                        <div class="hint">Materials come from the depot on this base.</div>
+                    </div>
+                    <div class="table" data-if="has_recipe">
+                        <div class="head"><span class="c1">Material</span><span class="c2">Needed</span><span class="c3">In depot</span></div>
+                        <div class="row" data-for="r : materials" data-class-short="r.short">
+                            <span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span><span class="c3">{{ r.c }}</span>
+                        </div>
+                    </div>
+                    <div class="amount" data-if="has_recipe">
+                        <span class="label">How many</span>
+                        <input class="range" type="range" min="1" step="1" data-attr-max="amount_max" data-value="amount"/>
+                        <span class="v">{{ amount_text }}</span>
+                        <div class="btn" data-action="amount-max">Max</div>
+                    </div>
+                    <div class="actions" data-if="has_recipe"><div class="btn primary" data-action="craft">Craft<div class="tip">Starts a crafting job; the materials leave the depot now, the result arrives there when the job is done.</div></div></div>
+                    <div class="col-h" style="margin-top: 10dp;"><h3>Crafting jobs</h3></div>
+                    <div class="jobs grow scroll">
+                        <div class="hint" data-if="craft_jobs.size == 0">No crafting jobs.</div>
+                        <div class="job" data-for="j : craft_jobs">
+                            <div class="line"><span>{{ j.name }}</span><span class="left">{{ j.left }}</span></div>
+                            <div class="bar"><div class="fill" data-style-width="j.percent + '%'"></div></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ================================================= RESEARCH -->
+            <div class="page" data-if="blocked == 0 &amp;&amp; page == 5">
+                <div class="colm side">
+                    <div class="col-h"><h3>Research materials</h3><span class="hint">{{ research_goods.size }}</span></div>
+                    <input class="text search" type="text" data-value="filter" maxlength="40"/>
+                    <div class="table grow">
+                        <div class="body">
+                            <div class="empty" data-if="research_goods.size == 0">Waiting for the server...</div>
+                            <div class="row" data-for="r : research_goods" data-class-selected="r.selected" data-class-current="r.current" data-action="pick-research" data-attr-data-arg="r.key">
+                                <span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm">
+                    <div class="slots">
+                        <div class="slot"><div class="label">Weapon base</div><div class="v">{{ weapon }}</div><div class="btn" data-action="research-slot" data-arg="weapon">Use picked</div></div>
+                        <div class="slot"><div class="label">Material 1</div><div class="v">{{ mat1 }}</div><div class="btn" data-action="research-slot" data-arg="1">Use picked</div></div>
+                        <div class="slot last"><div class="label">Material 2</div><div class="v">{{ mat2 }}</div><div class="btn" data-action="research-slot" data-arg="2">Use picked</div></div>
+                    </div>
+                    <div class="namefield"><span class="label">New weapon's name</span><input class="text" type="text" data-value="research_name" maxlength="32"/></div>
+                    <div class="actions"><div class="btn primary" data-action="research">Start research<div class="tip">Researches a new weapon from the weapon base and the two materials. The name needs at least 5 letters.</div></div></div>
+                    <div class="col-h" style="margin-top: 10dp;"><h3>Research jobs</h3></div>
+                    <div class="jobs grow scroll">
+                        <div class="hint" data-if="research_jobs.size == 0">No research jobs.</div>
+                        <div class="job" data-for="j : research_jobs">
+                            <div class="line"><span>{{ j.name }}</span><span class="left">{{ j.left }}</span></div>
+                            <div class="bar"><div class="fill" data-style-width="j.percent + '%'"></div></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ================================================= SYSTEM -->
+            <div class="page col" data-if="blocked == 0 &amp;&amp; page == 6">
+                <div class="panel sys-head">
+                    <div><div class="t">{{ sys_title }}</div><div class="hint">{{ sys_line }}</div></div>
+                    <div class="actions sys-claim" data-if="sys_can_claim"><div class="btn primary" data-action="claim">{{ claim_text }}<div class="tip">Claims this system for you, for good. You can build here then.</div></div></div>
+                </div>
+                <div class="subtabs">
+                    <div class="tab" data-class-active="sys_sub == 0" data-action="sys-sub" data-arg="0">Build</div>
+                    <div class="tab" data-class-active="sys_sub == 1" data-action="sys-sub" data-arg="1">Objects</div>
+                </div>
+
+                <!-- BUILD: the catalog, the type's model and wares, placing a site -->
+                <div class="page" data-if="sys_sub == 0">
+                    <div class="colm side">
+                        <div class="table grow">
+                            <div class="head"><span class="c1">Catalog</span><span class="c3">Built</span></div>
+                            <div class="body">
+                                <div class="empty" data-if="catalog.size == 0">Nothing to build yet.</div>
+                                <div class="row" data-for="r : catalog" data-class-selected="r.selected" data-action="pick-type" data-attr-data-arg="r.key">
+                                    <span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="colm">
+                        <div class="sys-view">
+                            <div id="sys-model" class="model"></div>
+                            <div class="sys-type" data-if="has_type">
+                                <div class="t">{{ type_name }}</div>
+                                <div class="p">{{ type_meta }}</div>
+                                <div class="label" style="margin-top: 8dp;">Wares</div>
+                                <div class="hint" data-if="type_wares.size == 0">No wares needed.</div>
+                                <div class="ware" data-for="w : type_wares"><span>{{ w.a }}</span><span class="n">{{ w.b }}</span></div>
+                            </div>
+                        </div>
+                        <div class="hint sys-info">{{ type_info }}</div>
+                        <div data-if="sys_mine">
+                            <div class="amount"><span class="label">Distance</span><input class="range" type="range" min="50" max="2000" step="50" data-value="dist"/><span class="v">{{ dist_text }}</span></div>
+                            <div class="amount"><span class="label">Turn</span><input class="range" type="range" min="0" max="345" step="15" data-value="turn"/><span class="v">{{ turn_text }}</span></div>
+                            <div class="actions">
+                                <div class="btn" data-class-primary="show_site" data-action="show-site">{{ show_site ? 'Hide planned site' : 'Show site' }}<div class="tip">Shows the planned site as a ghost ahead of your ship; the sliders move it.</div></div>
+                                <div class="btn primary" data-action="site">{{ site_text }}<div class="tip">Builds a construction site of the picked type where the planned site is. Deliver its wares under Objects.</div></div>
+                            </div>
+                        </div>
+                        <div class="hint" data-if="!sys_mine &amp;&amp; sys_in">Claim the system to build here.</div>
+                    </div>
+                </div>
+
+                <!-- OBJECTS: the system's objects, the picked one -->
+                <div class="page" data-if="sys_sub == 1">
+                    <div class="colm side">
+                        <div class="table grow">
+                            <div class="head"><span class="c1">Object</span><span class="c4">State</span></div>
+                            <div class="body">
+                                <div class="empty" data-if="objects.size == 0">{{ sys_in ? 'Nothing built yet.' : 'Not in an uncharted system.' }}</div>
+                                <div class="row" data-for="r : objects" data-class-selected="r.selected" data-action="pick-object" data-attr-data-arg="r.key">
+                                    <span class="c1">{{ r.a }}</span><span class="c4">{{ r.c }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="actions" style="margin-top: 10dp;">
+                            <div class="btn" data-action="target">Target<div class="tip">Targets the picked object in space.</div></div>
+                            <div class="btn" data-action="waypoint">Waypoint<div class="tip">Sets a waypoint to the picked object.</div></div>
+                        </div>
+                    </div>
+                    <div class="colm">
+                        <div class="panel">
+                            <div class="t">{{ obj_title }}</div>
+                            <div class="hint">{{ obj_line }}</div>
+                            <div class="bar" data-if="obj_bar &gt;= 0" style="margin-top: 8dp;"><div class="fill" data-style-width="obj_bar + '%'"></div></div>
+                        </div>
+                        <div class="subtabs" data-if="obj_picked &amp;&amp; (obj_site || obj_edit)">
+                            <div class="tab" data-if="obj_site" data-class-active="sys_view == 0" data-action="sys-view" data-arg="0">Wares</div>
+                            <div class="tab" data-class-active="sys_view == 1" data-action="sys-view" data-arg="1">Rules</div>
+                            <div class="tab" data-if="!obj_site &amp;&amp; obj_edit" data-class-active="sys_view == 2" data-action="sys-view" data-arg="2">Loadout</div>
+                        </div>
+                        <!-- wares of a site -->
+                        <div class="pane" data-if="obj_site &amp;&amp; sys_view == 0">
+                            <div class="table grow">
+                                <div class="head"><span class="c1">Ware</span><span class="c2">Delivered</span><span class="c3">In hold</span></div>
+                                <div class="body">
+                                    <div class="empty" data-if="needs.size == 0">No wares needed.</div>
+                                    <div class="row" data-for="r : needs" data-class-selected="r.selected" data-action="pick-need" data-attr-data-arg="r.key">
+                                        <span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span><span class="c3">{{ r.c }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div data-if="can_deliver">
+                                <div class="amount"><span class="label">Amount</span><input class="range" type="range" min="1" step="1" data-attr-max="qty_max" data-value="qty"/><span class="v">{{ qty_text }}</span></div>
+                                <div class="actions"><div class="btn primary" data-action="deliver">Deliver<div class="tip">Hands the amount of the picked ware from your hold to the site.</div></div></div>
+                            </div>
+                        </div>
+                        <!-- rules: who it fires at / lets dock / lets deliver -->
+                        <div class="pane" data-if="obj_picked &amp;&amp; sys_view == 1">
+                            <div class="actions" data-if="obj_edit"><div class="btn primary" data-action="rule-mode">{{ rule_mode }}<div class="tip">Switches the rule mode: everybody, the list only, nobody.</div></div></div>
+                            <div class="hint" data-if="!obj_edit">{{ rule_mode }} - only the owner sets rules.</div>
+                            <div class="table grow">
+                                <div class="head"><span class="c1">Pilot</span><span class="c3">Rule</span></div>
+                                <div class="body">
+                                    <div class="empty" data-if="pilots.size == 0">No pilots online.</div>
+                                    <div class="row" data-for="r : pilots" data-class-selected="r.selected" data-action="pick-pilot" data-attr-data-arg="r.key">
+                                        <span class="c1">{{ r.a }}</span><span class="c3">{{ r.b }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div data-if="obj_edit">
+                                <div class="namefield" style="margin-top: 8dp;"><span class="label">Pilot</span><input class="text" type="text" data-value="sys_pilot" maxlength="32"/></div>
+                                <div class="actions">
+                                    <div class="btn" data-action="rule" data-arg="allow">{{ allow_text }}</div>
+                                    <div class="btn" data-action="rule" data-arg="deny">{{ deny_text }}</div>
+                                    <div class="btn danger" data-action="rule" data-arg="clear">Remove</div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- loadout of a built object (its owner) -->
+                        <div class="page" data-if="obj_picked &amp;&amp; !obj_site &amp;&amp; obj_edit &amp;&amp; sys_view == 2">
+                            <div class="colm gap">
+                                <div class="table grow">
+                                    <div class="head"><span class="c1">Hardpoint</span><span class="c2">Equipped</span></div>
+                                    <div class="body">
+                                        <div class="empty" data-if="slots.size == 0">Nothing to equip.</div>
+                                        <div class="row" data-for="r : slots" data-class-selected="r.selected" data-action="pick-slot" data-attr-data-arg="r.key"><span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span></div>
+                                    </div>
+                                </div>
+                                <div class="actions" style="margin-top: 8dp;"><div class="btn" data-action="unmount">Take off</div></div>
+                            </div>
+                            <div class="colm">
+                                <div class="table grow">
+                                    <div class="head"><span class="c1">In your hold</span><span class="c3">#</span></div>
+                                    <div class="body">
+                                        <div class="empty" data-if="gear.size == 0">No weapons or shields in the hold.</div>
+                                        <div class="row" data-for="r : gear" data-class-selected="r.selected" data-action="pick-gear" data-attr-data-arg="r.key"><span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span></div>
+                                    </div>
+                                </div>
+                                <div class="actions" style="margin-top: 8dp;"><div class="btn primary" data-action="mount">Mount</div></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ================================================= DRONES -->
+            <div class="page" data-if="blocked == 0 &amp;&amp; page == 7">
+                <div class="colm side">
+                    <div class="col-h"><h3>Your drones</h3><span class="hint">{{ count }}</span></div>
+                    <div class="dlist">
+                        <div class="hint" data-if="drones.size == 0">{{ empty_text }}</div>
+                        <div class="drone" data-for="d : drones" data-class-selected="d.selected" data-action="pick" data-attr-data-arg="d.slot">
+                            <div class="ico">{{ d.icon }}</div>
+                            <div class="mid">
+                                <div class="line1"><span class="n">{{ d.name }}</span><span data-attr-class="'state ' + d.state_class">{{ d.state }}</span></div>
+                                <div class="s">{{ d.kind }} &#183; {{ d.plan }}</div>
+                                <div class="bar"><div data-attr-class="'fill ' + d.hull_class" data-style-width="d.hull + '%'"></div></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="add" data-action="buy-page">+ Buy a drone</div>
+                </div>
+
+                <div class="colm">
+                    <div class="d-head" data-if="has_pick">
+                        <span class="big">{{ cur.name }}</span>
+                        <span class="kind">{{ cur.kind }} drone</span>
+                        <span data-attr-class="'state ' + cur.state_class">{{ cur.state }}</span>
+                    </div>
+                    <div class="actions" data-if="has_pick">
+                        <div class="btn primary" data-action="start">{{ cur_active ? 'Stop' : 'Start' }}<div class="tip">{{ cur_active ? 'Calls the drone back; it waits at its home base.' : 'Sends the drone out from ' + cur_home + '.' }}</div></div>
+                        <div class="btn" data-action="repair">Repair<span class="small" data-if="cur_repair != ''">{{ cur_repair }}</span><div class="tip">Repairs the hull to 100 %. Paid from your credits.</div></div>
+                        <div class="btn" data-action="home">Station here<div class="tip">Makes this base the drone's home; deliveries go into the depot here.</div></div>
+                        <div class="btn danger" data-class-armed="scrap_armed" data-action="scrap">{{ scrap_armed ? 'Really scrap?' : 'Scrap' }}<div class="tip">Scraps the drone for a part of its price. A second click within 3 s confirms.</div></div>
+                    </div>
+                    <div class="subtabs">
+                        <div class="tab" data-class-active="sub == 0" data-action="sub" data-arg="0" data-if="has_pick">Overview</div>
+                        <div class="tab" data-class-active="sub == 1" data-action="sub" data-arg="1" data-if="has_pick">Orders</div>
+                        <div class="tab" data-class-active="sub == 2" data-action="sub" data-arg="2">Buy</div>
+                    </div>
+
+                    <div class="pane" data-if="has_pick &amp;&amp; sub == 0">
+                        <div class="stats">
+                            <div class="cell"><div class="k">Hull</div><div class="v">{{ cur.hull }} %</div></div>
+                            <div class="cell"><div class="k">Cargo</div><div class="v">{{ cur_cargo }}</div></div>
+                            <div class="cell"><div class="k">Runs</div><div class="v">{{ cur_runs }}</div></div>
+                            <div class="cell last"><div class="k">Delivered</div><div class="v">{{ cur_delivered }}</div></div>
+                        </div>
+                        <div class="hint">Plan: {{ cur.plan }}</div>
+                        <div class="hint">Home base: {{ cur_home }}</div>
+                    </div>
+
+                    <div class="pane" data-if="has_pick &amp;&amp; sub == 1">
+                        <div data-if="cur.kind == 'Trade'">
+                            <div class="route">
+                                <div class="stop"><div class="label">Buys at</div><div class="v">{{ route_from }}</div><div class="label">Good out</div><div class="v">{{ route_good }}</div></div>
+                                <span class="arrow">&lt;&gt;</span>
+                                <div class="stop"><div class="label">Sells at</div><div class="v">{{ route_to }}</div><div class="label">Good back</div><div class="v">{{ route_back }}</div></div>
+                            </div>
+                            <div class="subtabs">
+                                <div class="tab" data-class-active="trade_page == 0" data-action="trade-page" data-arg="0">Buy at</div>
+                                <div class="tab" data-class-active="trade_page == 1" data-action="trade-page" data-arg="1">Sell at</div>
+                                <div class="tab" data-class-active="trade_page == 2" data-action="trade-page" data-arg="2">Good out</div>
+                                <div class="tab" data-class-active="trade_page == 3" data-action="trade-page" data-arg="3">Good back</div>
+                            </div>
+                        </div>
+                        <div class="actions" data-if="cur.kind == 'Escort'">
+                            <div class="btn" data-class-primary="cur_mode == 'defensive'" data-action="mode" data-arg="defensive">Defensive<div class="tip">Attacks only who attacks the protected pilot.</div></div>
+                            <div class="btn" data-class-primary="cur_mode == 'aggressive'" data-action="mode" data-arg="aggressive">Aggressive<div class="tip">Attacks hostile targets in reach.</div></div>
+                        </div>
+                        <input class="text" type="text" data-value="filter" maxlength="40"/>
+                        <div class="table">
+                            <div class="head"><span class="c1">{{ col_a }}</span><span class="c2">{{ col_b }}</span><span class="c3">{{ col_c }}</span></div>
+                            <div class="body">
+                                <div class="empty" data-if="list.size == 0">{{ list_empty }}</div>
+                                <div class="row" data-for="r : list" data-class-selected="r.selected" data-class-current="r.current" data-action="row" data-attr-data-arg="r.key">
+                                    <span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span><span class="c3">{{ r.c }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="actions">
+                            <div class="btn primary" data-action="apply">{{ cur.kind == 'Mining' ? 'Use this field' : cur.kind == 'Escort' ? 'Protect this pilot' : 'Use this' }}</div>
+                            <div class="btn" data-if="cur.kind == 'Mining'" data-action="field-auto">Nearest field<div class="tip">The server picks the nearest field with ware.</div></div>
+                            <div class="btn" data-if="cur.kind == 'Trade'" data-action="trade-auto">Best<div class="tip">The server picks the best trade for this part of the route.</div></div>
+                            <div class="btn" data-if="cur.kind == 'Trade' &amp;&amp; trade_page == 3" data-action="trade-none">Return empty</div>
+                        </div>
+                    </div>
+
+                    <div class="pane" data-if="sub == 2">
+                        <div class="cards">
+                            <div class="card" data-for="b, i : buy" data-class-last="i == 2">
+                                <div class="t">{{ b.title }}</div>
+                                <div class="p">{{ b.price }}</div>
+                                <div class="d">{{ b.text }}</div>
+                                <div class="btn primary" data-action="buy" data-attr-data-arg="b.kind">Buy {{ b.title }}</div>
+                            </div>
+                        </div>
+                        <div class="namefield"><span class="label">Name</span><input class="text" type="text" data-value="new_name" maxlength="23"/></div>
+                        <div class="hint">The name is given at the purchase and cannot be changed later. Letters, digits and . - _ only.</div>
+                        <div class="hint">{{ rules }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/charcreate.rml

@@ -0,0 +1,88 @@
+<rml>
+<head>
+    <title>New pilot</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.list { flex: 1; }
+        .colm.side { flex: 0 0 32%; margin-left: 18dp; }
+        .colm.fig { flex: 0 0 24%; margin-left: 18dp; }
+        #figure { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
+        .fig .hint { text-align: center; margin-top: 6dp; }
+        .starts { flex: 1; overflow-y: auto; }
+        .region { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 10dp 0 6dp 0; }
+        .start { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; }
+        .start:hover { border-color: #5cc8f0; }
+        .start.selected { border-color: #f2b13c; background-color: #f2b13c1a; }
+        .start img { width: 38dp; height: 38dp; margin-right: 12dp; }
+        .start .txt { flex: 1; min-width: 0; }
+        .start .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
+        .start.selected .n { color: #f2b13c; }
+        .start .k { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
+        .start .m { font-family: "IBM Plex Mono"; color: #f2b13c; }
+        .namebox { margin-bottom: 14dp; }
+        .namebox .label { margin-bottom: 6dp; }
+        .detail { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; flex: 1; display: flex; flex-direction: column; min-height: 0; }
+        .detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; }
+        .detail .k { font-size: 14dp; color: #8197ad; margin-top: 2dp; }
+        .detail .facts { display: flex; flex-direction: row; margin: 10dp 0; }
+        .detail .facts div { margin-right: 24dp; }
+        .detail .facts .v { font-family: "IBM Plex Mono"; color: #f2b13c; font-size: 16dp; }
+        .detail .d { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; }
+    </style>
+</head>
+<body class="window" data-model="charcreate">
+    <div class="win-head">
+        <span class="title">NEW PILOT</span>
+        <span class="spacer"></span>
+        <span class="chip">Starts <span class="v">{{ count }}</span></span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="colm list">
+                    <h3 style="margin-bottom: 4dp;">Where do you start?</h3>
+                    <div class="hint" data-if="count == 0">The server offers no start.</div>
+                    <div class="starts">
+                        <div data-for="r : regions">
+                            <div class="region">{{ r.name }}</div>
+                            <div class="start" data-for="s : r.starts" data-class-selected="s.selected" data-action="pick" data-attr-data-arg="s.key">
+                                <img data-if="s.icon != ''" data-attr-src="s.icon"/>
+                                <div class="txt"><div class="n">{{ s.base }}</div><div class="k">{{ s.ship }}</div></div>
+                                <span class="m">{{ s.money }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm fig">
+                    <h3 style="margin-bottom: 8dp;">Your pilot</h3>
+                    <div id="figure"></div>
+                    <div class="hint">drag to turn</div>
+                </div>
+                <div class="colm side">
+                    <div class="namebox">
+                        <div class="label">Pilot name</div>
+                        <input class="text" type="text" data-value="name" maxlength="23" placeholder="Your name in Sirius"/>
+                    </div>
+                    <div class="detail" data-if="has_pick">
+                        <div class="n">{{ pick.base }}</div>
+                        <div class="k">{{ pick_region }}</div>
+                        <div class="facts">
+                            <div><div class="label">Ship</div><div class="v">{{ pick.ship }}</div></div>
+                            <div><div class="label">Credits</div><div class="v">{{ pick.money }}</div></div>
+                        </div>
+                        <div class="d">{{ pick_desc }}</div>
+                    </div>
+                    <div class="actions" style="margin-top: 12dp;">
+                        <div class="btn primary" data-class-disabled="name == '' || !has_pick || !ready" data-action="create">Create pilot<div class="tip">Creates the pilot at the picked start; the server may refuse a name that is taken.</div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <div class="btn" data-action="back">Back</div>
+    </div>
+</body>
+</rml>

EXE/remui/charselect.rml

@@ -0,0 +1,84 @@
+<rml>
+<head>
+    <title>Characters</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.list { flex: 1; }
+        .colm.side { flex: 0 0 32%; margin-left: 18dp; }
+        .colm.fig { flex: 0 0 22%; margin-left: 18dp; }
+        #figure { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
+        .fig .hint { text-align: center; margin-top: 6dp; }
+        .roster { flex: 1; overflow-y: auto; }
+        .pilot { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; }
+        .pilot:hover { border-color: #5cc8f0; }
+        .pilot.selected { border-color: #f2b13c; background-color: #f2b13c1a; }
+        .pilot img { width: 44dp; height: 44dp; margin-right: 14dp; }
+        .pilot .txt { flex: 1; min-width: 0; }
+        .pilot .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; }
+        .pilot.selected .n { color: #f2b13c; }
+        .pilot .k { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
+        .pilot .r { text-align: right; }
+        .pilot .m { font-family: "IBM Plex Mono"; color: #f2b13c; }
+        .pilot .lv { font-family: "IBM Plex Mono"; font-size: 12dp; color: #5cc8f0; margin-top: 2dp; }
+        .detail { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 12dp; }
+        .detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; margin-bottom: 4dp; }
+        .detail .k { font-size: 14dp; color: #8197ad; }
+        .detail .s { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; margin-top: 8dp; }
+        .motd { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .empty-roster { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+    </style>
+</head>
+<body class="window" data-model="charselect">
+    <div class="win-head">
+        <span class="title">{{ server }}</span>
+        <span class="spacer"></span>
+        <span class="chip">Characters <span class="v">{{ chars.size }}</span> / <span class="v">5</span></span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="colm list">
+                    <h3 style="margin-bottom: 8dp;">Your pilots</h3>
+                    <div class="empty-roster" data-if="chars.size == 0">
+                        <div class="hint">No pilot on this server yet. Create one to begin.</div>
+                    </div>
+                    <div class="roster" data-if="chars.size &gt; 0">
+                        <div class="pilot" data-for="c : chars" data-class-selected="c.selected" data-action="pick" data-attr-data-arg="c.key">
+                            <img data-if="c.icon != ''" data-attr-src="c.icon"/>
+                            <div class="txt"><div class="n">{{ c.name }}</div><div class="k">{{ c.ship }} - {{ c.place }}</div></div>
+                            <div class="r"><div class="m">{{ c.money }}</div><div class="lv">{{ c.level }}</div></div>
+                        </div>
+                    </div>
+                    <div class="actions" style="margin-top: 10dp;">
+                        <div class="btn primary" data-class-disabled="!has_pick || !ready" data-action="load">Launch<div class="tip">Plays the picked pilot. A double click on a pilot does the same.</div></div>
+                        <div class="btn" data-class-disabled="!can_new || !ready" data-action="new">New pilot<div class="tip">Creates a new pilot (at most five per account).</div></div>
+                        <div class="btn" data-class-disabled="!has_pick || !ready" data-action="delete">Delete<div class="tip">Deletes the picked pilot for good (you are asked first).</div></div>
+                    </div>
+                </div>
+                <div class="colm fig">
+                    <h3 style="margin-bottom: 8dp;">Pilot</h3>
+                    <div id="figure"></div>
+                    <div class="hint">drag to turn</div>
+                </div>
+                <div class="colm side">
+                    <div class="detail" data-if="has_pick">
+                        <div class="n">{{ pick.name }}</div>
+                        <div class="k">{{ pick.level }} - {{ pick.money }}</div>
+                        <div class="k">{{ pick.ship }}, {{ pick.place }}</div>
+                        <div class="s">{{ pick_stats }}</div>
+                    </div>
+                    <div class="detail" data-if="!has_pick"><div class="k">Pick a pilot.</div></div>
+                    <h3 style="margin-bottom: 8dp;">Message of the day</h3>
+                    <div class="motd">{{ motd }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <div class="btn" data-action="back">Back to servers</div>
+        <div class="btn" data-action="menu">Main menu</div>
+    </div>
+</body>
+</rml>

EXE/remui/chatfeed.rml

@@ -0,0 +1,26 @@
+<rml>
+<head>
+    <title>Chat</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* the running chat as FL shows it: lines at the left edge without a frame, the newest at
+           the bottom; the chat line below while one is typed */
+        body.feed { position: absolute; left: 16dp; top: 25%; width: 46%; height: 42%; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-end; font-family: "Saira SemiCondensed"; font-size: 19dp; color: #dbe6f0; }
+        .lines { pointer-events: none; overflow: hidden; line-height: 1.25; font-effect: shadow(1dp 1dp #000000d0); }
+        .line { margin-top: 8dp; padding: 5dp 10dp; background-color: #050a18d9; border: 2dp #3f9ad6; border-radius: 6dp; display: flex; flex-direction: row; }
+        .line .p { white-space: nowrap; margin-right: 6dp; }
+        .line .t { flex: 1; white-space: pre; overflow: hidden; }
+        .gear { width: 22dp; height: 22dp; margin-left: 8dp; image-color: #8fb8d8; }
+        .gear:hover { image-color: #f2b13c; }
+        .caret { color: #f2d23c; animation: 1s steps(1) infinite blink; }
+        @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
+    </style>
+</head>
+<body class="feed" data-model="chatfeed">
+    <div class="lines" data-if="feed_shown" data-rml="feed"></div>
+    <div class="line" data-if="typing">
+        <span class="p" data-rml="prefix"></span><span class="t">{{ text }}<span class="caret">|</span></span>
+        <img class="gear" src="img/gear.png" data-action="settings"/>
+    </div>
+</body>
+</rml>

EXE/remui/chathistory.rml

@@ -0,0 +1,58 @@
+<rml>
+<head>
+    <title>Chat history</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .cols { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .histcol { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .ctabs { display: flex; flex-direction: row; margin-bottom: 8dp; }
+        .ct { padding: 4dp 12dp; margin-right: 4dp; border: 1dp #24405c; border-radius: 3dp; font-size: 13dp; color: #8197ad; }
+        .ct:hover { color: #dbe6f0; border-color: #3d6d96; }
+        .ct.on { color: #f2b13c; border-color: #f2b13c; background-color: #f2b13c1a; }
+        .hl { padding: 1dp 4dp; border-radius: 2dp; }
+        .hl.mention { background-color: #f2b13c26; border-left: 2dp #f2b13c; }
+        .hl .tm { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-right: 8dp; }
+        #hist { flex: 1; overflow-y: auto; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; font-size: 16dp; line-height: 1.35; }
+        .gear { width: 22dp; height: 22dp; margin: 0 10dp; image-color: #8fb8d8; }
+        .gear:hover { image-color: #f2b13c; }
+        .targets { width: 260dp; margin-left: 14dp; display: flex; flex-direction: column; min-height: 0; }
+        .tl { flex: 1; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .tg { padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; white-space: nowrap; overflow: hidden; }
+        .tg:hover { background-color: #122033; }
+        .tg.cur { border-left-color: #f2b13c; background-color: #f2b13c1a; }
+        .tg.ch { font-family: "Saira SemiCondensed"; font-weight: 600; letter-spacing: 0.6dp; }
+    </style>
+</head>
+<body class="window medium" data-model="chathistory">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_Chat.3db"/>
+        <span class="title">CHAT</span>
+        <span class="spacer"></span>
+        <span class="chip">Targets <span class="v">{{ count }}</span></span>
+        <img class="gear" src="img/gear.png" data-action="settings"/>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content" style="display: flex; flex-direction: column;">
+            <div class="cols">
+                <div class="histcol">
+                    <div class="ctabs">
+                        <div class="ct" data-for="t : tabs" data-class-on="t.on" data-action="tab" data-attr-data-arg="t.key">{{ t.label }}</div>
+                    </div>
+                    <div id="hist">
+                        <div class="hint" data-if="lines.size == 0">No messages yet.</div>
+                        <div class="hl" data-for="l : lines" data-class-mention="l.mention"><span class="tm" data-if="stamps">{{ l.time }}</span><span data-rml="l.rml"></span></div>
+                    </div>
+                </div>
+                <div class="targets">
+                    <h3>Write to</h3>
+                    <div class="tl">
+                        <div class="tg" data-for="t : targets" data-class-cur="t.current" data-class-ch="t.channel" data-action="target" data-ctx="target" data-attr-data-arg="t.key" data-rml="t.name"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="hint" style="margin-top: 10dp;">Pick whom to write to, then press Enter in flight or on a base to type.</div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/chatsettings.rml

@@ -0,0 +1,60 @@
+<rml>
+<head>
+    <title>Chat settings</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        body.window.chatset { left: 50%; margin-left: -330dp; top: 12%; width: 660dp; height: 640dp; }
+        .sec { margin-bottom: 16dp; }
+        .tgl { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .tgl:hover { background-color: #122033; }
+        .tgl .box { width: 18dp; height: 18dp; border: 2dp #3d6d96; border-radius: 3dp; margin-right: 12dp; }
+        .tgl .box.on { border-color: #f2b13c; background-color: #f2b13c; }
+        .tgl .l { flex: 1; font-size: 16dp; }
+        .info { margin-top: 6dp; font-size: 13dp; color: #8197ad; }
+        .row { display: flex; flex-direction: row; align-items: center; padding: 7dp 0; border-bottom: 1dp #ffffff08; }
+        .row .l { width: 130dp; font-size: 15dp; }
+        .row .sample { width: 170dp; font-family: "Saira SemiCondensed"; font-size: 16dp; white-space: nowrap; overflow: hidden; }
+        .sw { width: 22dp; height: 22dp; margin-right: 6dp; border: 2dp #00000000; border-radius: 4dp; }
+        .sw .c { width: 100%; height: 100%; border-radius: 2dp; }
+        .sw:hover { border-color: #5cc8f0; }
+        .sw.on { border-color: #f2b13c; }
+        .sw.fl { margin-right: 12dp; }
+        .foot2 { display: flex; flex-direction: row; align-items: center; margin-top: 16dp; }
+        .foot2 .hint { flex: 1; }
+        .foot2 .btn { margin: 0 0 0 8dp; }
+    </style>
+</head>
+<body class="window chatset" data-model="chatsettings">
+    <div class="win-head">
+        <img class="head-ico" src="img/gear.png"/>
+        <span class="title">CHAT SETTINGS</span>
+        <span class="spacer"></span>
+        <span class="close" data-action="cancel">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="sec">
+                <h3>Players</h3>
+                <div class="tgl" data-action="npc"><div class="box" data-class-on="hide_npc"></div><span class="l">Hide NPC pilots</span></div>
+                <div class="info">Hides the server's NPC pilots ([NPC] names) from the chat, the player list of the chat window, the chat targets and the contact list.</div>
+                <div class="tgl" style="margin-top: 8dp;" data-action="stamps"><div class="box" data-class-on="stamps"></div><span class="l">Show times in the chat history</span></div>
+            </div>
+            <div class="sec">
+                <h3>Colours</h3>
+                <div class="row" data-for="r : rows">
+                    <span class="l">{{ r.label }}</span>
+                    <span class="sample" data-style-color="r.colour">Pilot: Hello Sirius!</span>
+                    <div class="sw" data-for="w : r.swatches" data-class-on="w.on" data-class-fl="w.key == 0" data-action="pick" data-attr-data-arg="w.arg"><div class="c" data-style-background-color="w.colour"></div></div>
+                </div>
+                <div class="info">The first colour of a row is FL's own. Server messages (new players, server notices) run as Admin / Server.</div>
+            </div>
+            <div class="foot2">
+                <span class="hint">{{ dirty ? 'Unsaved changes' : '' }}</span>
+                <div class="btn" data-action="reset">FL colours</div>
+                <div class="btn" data-action="cancel">Cancel</div>
+                <div class="btn primary" data-action="save">Save settings</div>
+            </div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/contracts.rml

@@ -0,0 +1,58 @@
+<rml>
+<head>
+    <title>Contracts</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.gap { margin-right: 18dp; }
+        .colm.side { flex: 0 0 360dp; }
+        .banner { height: 120dp; margin-bottom: 14dp; border: 1dp #24405c; border-radius: 3dp; decorator: image(3db:INTERFACE/REM/IMAGES/contracts_banner.3db cover); }
+        .target { display: flex; flex-direction: row; align-items: center; margin-bottom: 14dp; }
+        .target img { width: 34dp; height: 34dp; margin-right: 12dp; }
+        .target.off img { opacity: 0.3; }
+        .namefield { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
+        .namefield .label { margin-right: 10dp; }
+        .namefield input.text { flex: 1; }
+        .row .c1 img { width: 16dp; height: 16dp; margin-right: 8dp; }
+    </style>
+</head>
+<body class="window medium" data-model="contracts">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_contracts.3db"/>
+        <span class="title">CONTRACT NETWORK</span>
+        <span class="spacer"></span>
+        <span class="chip">Bounties <span class="v">{{ bounties.size }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="banner"></div>
+            <div class="split">
+                <div class="colm gap">
+                    <div class="col-h" style="display: flex; flex-direction: row; margin-bottom: 8dp;"><h3>Bounty contracts</h3></div>
+                    <div class="table" style="flex: 1;">
+                        <div class="head"><span class="c1">Pilot</span><span class="c4">Reward</span></div>
+                        <div class="body">
+                            <div class="empty" data-if="bounties.size == 0">{{ has_list ? 'No bounties open.' : 'Waiting for the server...' }}</div>
+                            <div class="row" data-for="r : bounties"><span class="c1"><img src="3db:INTERFACE/REM/IMAGES/icon_bounty.3db"/>{{ r.a }}</span><span class="c4">{{ r.b }}</span></div>
+                        </div>
+                    </div>
+                    <div class="actions" style="margin-top: 10dp;"><div class="btn" data-action="refresh">Refresh list</div></div>
+                </div>
+                <div class="colm side">
+                    <h3 style="margin-bottom: 10dp;">Place a bounty</h3>
+                    <div class="target" data-class-off="target != 1"><img src="3db:INTERFACE/REM/IMAGES/icon_skull.3db"/><span>{{ target_text }}</span></div>
+                    <div class="namefield"><span class="label">Credits</span><input class="text" type="text" data-value="credits" maxlength="13"/></div>
+                    <div class="actions"><div class="btn primary" data-action="place">On my target<div class="tip">Puts a bounty of these credits on the player you have targeted. Paid from your credits.</div></div></div>
+                    <div class="hint">Whoever destroys the pilot gets the reward.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/ctxmenu.rml

@@ -0,0 +1,22 @@
+<rml>
+<head>
+    <title>Menu</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* the whole screen: a click beside the menu closes it */
+        body.ctx { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: transparent; }
+        .menu { position: absolute; width: 220dp; padding: 4dp; background-color: #070b12f2; border: 2dp #3d6d96; border-radius: 4dp; }
+        .menu .t { font-size: 12dp; color: #f2b13c; padding: 4dp 8dp 6dp 8dp; white-space: nowrap; overflow: hidden; border-bottom: 1dp #24405c; margin-bottom: 3dp; }
+        .menu .r { padding: 6dp 10dp; font-size: 15dp; border-radius: 3dp; }
+        .menu .r:hover { background-color: #122033; color: #5cc8f0; }
+        .menu .r.disabled { color: #5d6e80; }
+        .menu .r.disabled:hover { background-color: transparent; color: #5d6e80; }
+    </style>
+</head>
+<body class="ctx" data-model="ctxmenu" data-action="dismiss">
+    <div class="menu" data-style-left="left" data-style-top="top">
+        <div class="t" data-if="title != ''">{{ title }}</div>
+        <div class="r" data-for="r : rows" data-class-disabled="r.disabled" data-action="pick" data-attr-data-arg="r.key">{{ r.label }}</div>
+    </div>
+</body>
+</rml>

EXE/remui/dialog.rml

@@ -0,0 +1,43 @@
+<rml>
+<head>
+    <title>Message</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        body.box
+        {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 520dp;
+            margin-left: -260dp;
+            margin-top: -140dp;
+            background-color: #0d1622f5;
+            border: 2dp #3d6d96;
+            border-top: 2dp #f2b13c;
+            border-radius: 4dp;
+            display: block;
+        }
+        .box-head { display: flex; flex-direction: row; align-items: center; padding: 12dp 18dp; border-bottom: 1dp #24405c; }
+        .box-head .title { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; letter-spacing: 1.2dp; text-transform: uppercase; flex: 1; }
+        .box-body { padding: 16dp 18dp; }
+        .box-body .text { white-space: pre-line; line-height: 1.5; font-size: 15dp; max-height: 320dp; overflow-y: auto; }
+        .box-body input.text { margin-top: 12dp; }
+        .box-foot { display: flex; flex-direction: row; justify-content: flex-end; padding: 0 18dp 14dp 18dp; }
+        .box-foot .btn { margin: 0 0 0 8dp; min-width: 90dp; text-align: center; }
+    </style>
+</head>
+<body class="box" data-model="dialog">
+    <div class="box-head">
+        <span class="title">{{ title }}</span>
+        <span class="close" data-action="button" data-arg="-1">&#215;</span>
+    </div>
+    <div class="box-body">
+        <div class="text">{{ text }}</div>
+        <input class="text" type="text" data-if="has_edit &amp;&amp; !secret" data-value="edit" maxlength="64"/>
+        <input class="text" type="password" data-if="has_edit &amp;&amp; secret" data-value="edit" maxlength="64"/>
+    </div>
+    <div class="box-foot">
+        <div class="btn" data-for="b, i : buttons" data-class-primary="i == 0" data-action="button" data-attr-data-arg="i">{{ b }}</div>
+    </div>
+</body>
+</rml>

EXE/remui/fonts/OFL-barlow.txt

@@ -0,0 +1,93 @@
+Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

EXE/remui/fonts/OFL-ibmplexmono.txt

@@ -0,0 +1,93 @@
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

EXE/remui/fonts/OFL-sairasemicondensed.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Saira Project Authors (omnibus.type@gmail.com), with reserved font name "Saira".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

EXE/remui/group.rml

@@ -0,0 +1,46 @@
+<rml>
+<head>
+    <title>Group</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .members { margin-bottom: 14dp; }
+        .member { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 3dp #5cc8f0; border-radius: 3dp; background-color: #122033; font-size: 15dp; }
+        .request { padding: 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 10dp; }
+        .request .t { white-space: pre-line; line-height: 1.5; font-size: 15dp; }
+        .request .w { font-size: 12dp; color: #8197ad; margin-top: 6dp; }
+    </style>
+</head>
+<body class="window small" data-model="group">
+    <div class="win-head">
+        <span class="title">GROUP</span>
+        <span class="spacer"></span>
+        <span class="chip">Members <span class="v">{{ members.size }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <h3 style="margin-bottom: 8dp;">Requests</h3>
+            <div class="hint" data-if="!has_request" style="margin-bottom: 14dp;">No invitation or trade request is waiting.</div>
+            <div class="request" data-if="has_request">
+                <div class="t">{{ request }}</div>
+                <div class="w" data-if="waiting != ''">{{ waiting }}</div>
+                <div class="actions" style="margin-top: 10dp;">
+                    <div class="btn primary" data-action="accept">{{ is_trade ? 'Accept trade' : 'Join group' }}</div>
+                    <div class="btn" data-action="decline">Decline</div>
+                </div>
+            </div>
+            <h3 style="margin-bottom: 8dp;">Your group</h3>
+            <div class="hint" data-if="members.size == 0">You are not in a group. Invite a pilot from the chat (/invite name).</div>
+            <div class="members">
+                <div class="member" data-for="m : members">{{ m }}</div>
+            </div>
+            <div class="actions" data-if="can_leave">
+                <div class="btn" data-action="leave">Leave group</div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+    </div>
+</body>
+</rml>

EXE/remui/help.rml

@@ -0,0 +1,25 @@
+<rml>
+<head>
+    <title>Information</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .card { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 14dp 16dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+    </style>
+</head>
+<body class="window small" data-model="help">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/>
+        <span class="title">{{ title }}</span>
+        <span class="spacer"></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="card">{{ text }}</div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+    </div>
+</body>
+</rml>

EXE/remui/hud.rml

@@ -0,0 +1,191 @@
+<rml>
+<head>
+    <title>HUD</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* the flight HUD in the shape of FL's own (bottom left / centre / right, the maneuver bar):
+           FL's panels, icons and bar colours, drawn by RmlUi */
+        body.hud { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: transparent; pointer-events: none; font-family: "Saira SemiCondensed"; font-size: 15dp; color: #dbe6f0; }
+        .fp { position: absolute; box-sizing: border-box; background-color: #050a18e6; border: 3dp #3f9ad6; border-radius: 8dp; }
+        .fp.inner { border-color: #2b6f9e; }
+        .ico { width: 40dp; height: 40dp; margin: 0 3dp; }
+        .ib { display: inline-block; padding: 1dp; border: 2dp #00000000; border-radius: 4dp; }
+        .ib:hover { background-color: #f2b13c14; }
+        .ib:hover .ico, .ib.on .ico { image-color: #f2b13c; }
+        .ib.on { border-color: #f2b13c; background-color: #f2b13c1f; }
+        .ib.off { opacity: 0.35; }
+
+        /* --- the maneuver bar, top centre ------------------------------------------------- */
+        .mans { left: 50%; margin-left: -240dp; top: 8dp; width: 480dp; height: 88dp; padding: 0 10dp; display: flex; flex-direction: row; justify-content: center; align-items: center; }
+        .mans .ico { width: 64dp; height: 64dp; margin: 0 8dp; }
+        .cruise { left: 50%; margin-left: -206dp; top: 99dp; width: 74dp; height: 70dp; display: flex; justify-content: center; align-items: center; }
+        .cruise .ico { width: 52dp; height: 52dp; }
+
+        /* --- bottom centre: thrust | bars | speed ------------------------------------------- */
+        .thrust, .speed { bottom: 17dp; width: 78dp; height: 38dp; text-align: center; line-height: 38dp; font-size: 22dp; }
+        .thrust { left: 50%; margin-left: -222dp; }
+        .thrust.low { color: #ef6a5b; }
+        .speed { left: 50%; margin-left: 144dp; }
+        .bars { left: 50%; margin-left: -132dp; bottom: 8dp; width: 264dp; height: 56dp; padding: 0 8dp; display: flex; flex-direction: column; justify-content: center; }
+        .bar { position: relative; width: 242dp; height: 11dp; margin: 2dp 0; }
+        .chips { position: absolute; left: 0; top: 0; width: 242dp; height: 11dp; display: flex; flex-direction: row; }
+        .sg { flex: 1; height: 11dp; margin-right: 2dp; }
+        .sg:last-child { margin-right: 0; }
+        .fillbox { position: absolute; left: 0; top: 0; height: 11dp; overflow: hidden; }
+        .power .chips.dim .sg { background-color: #a7a15e33; }
+        .power .fillbox .sg { background-color: #c9c272; }
+        .shield .chips.dim .sg { background-color: #3e3db544; }
+        .shield .fillbox .sg { background-color: #5856dc; }
+        .hull .chips.dim .sg { background-color: #782a3355; }
+        .hull .fillbox .sg { background-color: #b53844; }
+
+        /* --- bottom left: target / contacts --------------------------------------------------- */
+        .lhead { left: 46dp; bottom: 289dp; width: 291dp; height: 52dp; display: flex; flex-direction: row; align-items: center; padding: 0 6dp 0 10dp; }
+        .lhead .sp { flex: 1; }
+        .lbody { left: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 10dp 12dp; }
+        .filters { display: flex; flex-direction: row; justify-content: center; margin-bottom: 4dp; }
+        .filters .ico { width: 36dp; height: 36dp; margin: 0 4dp; }
+        .rows { height: 200dp; }
+        .c { display: flex; flex-direction: row; align-items: center; height: 25dp; padding: 0 2dp; }
+        .c:hover { background-color: #3a8fc822; }
+        .c img { width: 22dp; height: 22dp; margin-right: 6dp; }
+        .c .r { width: 52dp; text-align: right; margin-right: 10dp; font-size: 19dp; }
+        .c .n { flex: 1; white-space: nowrap; overflow: hidden; font-size: 19dp; }
+        .scroll { position: absolute; right: 6dp; bottom: 4dp; }
+        .scroll .btn { padding: 0 8dp; font-size: 14dp; margin-left: 4dp; }
+        .tname { font-size: 26dp; color: #e8f1fa; }
+        .tsub { font-size: 18dp; color: #8fb3d0; margin-bottom: 8dp; }
+        .tbar { display: flex; flex-direction: row; align-items: center; margin: 3dp 0; }
+        .tbar .l { width: 70dp; font-size: 17dp; color: #8fb3d0; }
+        .tbtns { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 8dp; }
+        .tbtns .ico { width: 44dp; height: 44dp; }
+
+        /* --- bottom right: status ------------------------------------------------------------- */
+        .rhead { right: 46dp; bottom: 289dp; width: 291dp; height: 52dp; display: flex; flex-direction: row; align-items: center; padding: 0 10dp 0 8dp; }
+        .rhead .ico { width: 36dp; height: 36dp; margin: 0 4dp 0 10dp; }
+        .rhead .cnt { font-size: 22dp; margin-right: 10dp; }
+        .rbody { right: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 10dp 16dp; }
+        .w { display: flex; flex-direction: row; height: 26dp; font-size: 23dp; color: #dbe6f0; }
+        .w:hover { background-color: #3a8fc822; }
+        .w.on { color: #7cf27c; }
+        .w .n { flex: 1; white-space: nowrap; overflow: hidden; }
+        .w .a { margin-left: 8dp; }
+        .special { color: #f2d23c; font-size: 18dp; margin-top: 6dp; }
+        /* the HUD editor: four layers over the whole screen, each moved / sized as one */
+        .grp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
+        .grp .fp, .grp .tag { pointer-events: auto; }
+        .g0 { transform-origin: 50% 0%; }
+        .g1 { transform-origin: 50% 100%; }
+        .g2 { transform-origin: 0% 100%; }
+        .g3 { transform-origin: 100% 100%; }
+        .grp.gone { display: none; }
+        .grp.faded { opacity: 0.35; }
+        .editing .fp { border-color: #f2b13c; background-color: #2a1f0ae6; drag: drag; cursor: move; }
+        .editing .fp * { pointer-events: none; }
+        .tag { position: absolute; padding: 3dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; border-radius: 3dp; white-space: nowrap; }
+        .tag .eye { margin-right: 8dp; padding: 0 6dp; background-color: #05080d; color: #f2b13c; border-radius: 2dp; }
+        .tag .eye:hover { color: #ffffff; }
+        .edbar { position: absolute; left: 50%; margin-left: -300dp; top: 190dp; width: 600dp; padding: 14dp 18dp; background-color: #070b12f2; border: 2dp #f2b13c; border-radius: 6dp; text-align: center; }
+        .edbar .et { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 20dp; letter-spacing: 2dp; color: #f2b13c; }
+        .edbar .eh { margin: 6dp 0 12dp 0; font-size: 14dp; color: #b9cbe0; }
+        .edbar .eb { display: flex; flex-direction: row; justify-content: center; }
+        .edbar .btn { margin: 0 4dp; }
+    </style>
+</head>
+<body class="hud" data-model="hud" data-class-editing="editing" data-style-opacity="opacity">
+    <!-- maneuvers -->
+    <div class="grp g0" data-grp="0" data-style-transform="grp[0].tf" data-class-gone="!grp[0].shown && !editing" data-class-faded="!grp[0].shown && editing">
+    <div class="tag" data-if="editing" style="left: 50%; margin-left: 250dp; top: 40dp;"><span class="eye" data-action="eye" data-arg="0">{{ grp[0].shown ? 'Hide' : 'Show' }}</span>Maneuvers</div>
+    <div class="fp mans" data-if="maneuvers_shown || editing">
+        <div class="ib" data-for="m : maneuvers" data-class-on="m.active" data-class-off="m.disabled" data-action="maneuver" data-attr-data-arg="m.key"><img class="ico" data-attr-src="m.icon"/></div>
+    </div>
+    <div class="fp cruise" data-if="(maneuvers_shown && has_cruise) || editing" data-action="maneuver" data-arg="4">
+        <div class="ib" data-class-on="cruise_on"><img class="ico" src="3db:interface/HUD/hud_mnvrwarp.3db"/></div>
+    </div>
+    </div>
+
+    <!-- bottom centre -->
+    <div class="grp g1" data-grp="1" data-style-transform="grp[1].tf" data-class-gone="!grp[1].shown && !editing" data-class-faded="!grp[1].shown && editing">
+    <div class="tag" data-if="editing" style="left: 50%; margin-left: -132dp; bottom: 74dp;"><span class="eye" data-action="eye" data-arg="1">{{ grp[1].shown ? 'Hide' : 'Show' }}</span>Ship status</div>
+    <div data-if="core || editing">
+        <div class="fp inner thrust" data-class-low="thrust_low">{{ thrust }}</div>
+        <div class="fp bars">
+            <div class="bar power"><div class="chips dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="power"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div></div></div>
+            <div class="bar shield"><div class="chips dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="shield"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div></div></div>
+            <div class="bar hull"><div class="chips dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="hull"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div></div></div>
+        </div>
+        <div class="fp inner speed">{{ speed }}</div>
+    </div>
+
+    </div>
+
+    <!-- bottom left: contacts / target -->
+    <div class="grp g2" data-grp="2" data-style-transform="grp[2].tf" data-class-gone="!grp[2].shown && !editing" data-class-faded="!grp[2].shown && editing">
+    <div class="tag" data-if="editing" style="left: 46dp; bottom: 350dp;"><span class="eye" data-action="eye" data-arg="2">{{ grp[2].shown ? 'Hide' : 'Show' }}</span>Contacts &amp; target</div>
+    <div data-if="panel || editing">
+        <div class="fp lhead">
+            <div class="ib" data-for="t : tabs" data-class-on="t.active" data-action="tab" data-attr-data-arg="t.key"><img class="ico" data-attr-src="t.icon"/></div>
+        </div>
+        <div class="fp lbody">
+            <div data-if="mode == 1">
+                <div class="tsub" data-if="!has_target">No target</div>
+                <div data-if="has_target">
+                    <div class="tname">{{ target_name }}</div>
+                    <div class="tsub">{{ target_sub }} {{ target_rank }}  {{ target_range }}</div>
+                    <div class="tbar hull"><span class="l">Hull</span><div class="bar"><div class="chips dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="target_hull"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div></div></div></div>
+                    <div class="tbar shield" data-if="target_has_shield"><span class="l">Shield</span><div class="bar"><div class="chips dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="target_shield"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div></div></div></div>
+                    <div class="tbtns">
+                        <div class="ib" data-for="b : target_buttons" data-action="tbutton" data-attr-data-arg="b.key"><img class="ico" data-attr-src="b.icon"/></div>
+                    </div>
+                </div>
+            </div>
+            <div data-if="mode != 1 && contacts_shown">
+                <div class="filters">
+                    <div class="ib" data-for="f : filters" data-class-on="f.active" data-action="filter" data-attr-data-arg="f.key"><img class="ico" data-attr-src="f.icon"/></div>
+                </div>
+                <div class="rows">
+                    <div class="c" data-for="c : contacts" data-style-color="c.colour" data-action="row" data-ctx="contact" data-attr-data-arg="c.key">
+                        <img data-attr-src="c.icon" data-style-image-color="c.colour"/><span class="r">{{ c.range }}</span><span class="n">{{ c.name }}</span>
+                    </div>
+                </div>
+                <div class="scroll">
+                    <div class="btn" data-if="more_up" data-action="up">&#9650;</div>
+                    <div class="btn" data-if="more_down" data-action="down">&#9660;</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    </div>
+
+    <!-- bottom right: the player's ship -->
+    <div class="grp g3" data-grp="3" data-style-transform="grp[3].tf" data-class-gone="!grp[3].shown && !editing" data-class-faded="!grp[3].shown && editing">
+    <div class="tag" data-if="editing" style="right: 46dp; bottom: 350dp;"><span class="eye" data-action="eye" data-arg="3">{{ grp[3].shown ? 'Hide' : 'Show' }}</span>Weapons &amp; equipment</div>
+    <div data-if="status || editing">
+        <div class="fp rhead">
+            <div class="ib" data-if="has_repair" data-action="repair"><img class="ico" src="3db:interface/hud/HUD_repairactivate.3db"/></div><span class="cnt" data-if="has_repair">{{ repair }}</span>
+            <div class="ib" data-if="has_battery" data-action="battery"><img class="ico" src="3db:interface/hud/HUD_shieldgaugeicon.3db"/></div><span class="cnt" data-if="has_battery">{{ battery }}</span>
+            <div class="ib" data-if="loot" data-action="loot"><img class="ico" src="3db:interface/HUD/HUD_loot_bw.3db"/></div>
+        </div>
+        <div class="fp rbody">
+            <div class="w" data-for="w : weapons" data-class-on="w.active" data-action="weapon" data-attr-data-arg="w.key">
+                <span class="n">{{ w.key + 1 }} {{ w.name }}</span><span class="a">{{ w.ammo }}</span>
+            </div>
+            <div class="special" data-if="special != ''">{{ special }}</div>
+        </div>
+    </div>
+    </div>
+
+    <!-- the HUD editor's bar -->
+    <div class="edbar" data-if="editing">
+        <div class="et">CUSTOMIZE HUD</div>
+        <div class="eh">Drag a part to move it &#183; mouse wheel over it to size it &#183; Hide / Show on its label. Parts snap to their home place.</div>
+        <div class="eb">
+            <div class="btn" data-action="ed_reset">Reset HUD</div>
+            <div class="btn" data-action="ed_resetwin">Reset window places</div>
+            <div class="btn" data-action="ed_cancel">Cancel</div>
+            <div class="btn primary" data-action="ed_save">Save</div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/inventory.rml

@@ -0,0 +1,78 @@
+<rml>
+<head>
+    <title>Inventory</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.list-col { flex: 0 0 38%; margin-right: 18dp; }
+        .list { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; }
+        .inv { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
+        .inv:hover { background-color: #122033; }
+        .inv.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
+        .inv img { width: 30dp; height: 30dp; margin-right: 10dp; }
+        .inv .txt { flex: 1; min-width: 0; }
+        .inv .n { font-size: 14dp; }
+        .inv .note { font-size: 12dp; color: #8197ad; }
+        .inv .c { font-family: "IBM Plex Mono"; color: #8197ad; margin-left: 8dp; }
+        #ship { flex: 1; min-height: 200dp; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); margin-bottom: 12dp; }
+        .card { height: 180dp; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .pick-head { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
+        .pick-head img { width: 40dp; height: 40dp; margin-right: 12dp; }
+        .pick-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
+        .jet { display: flex; flex-direction: row; align-items: center; margin-top: 10dp; }
+        .jet input.range { margin-right: 10dp; }
+        .jet .btn { margin: 0; }
+    </style>
+</head>
+<body class="window" data-model="inventory">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
+        <span class="title">INVENTORY</span>
+        <span class="spacer"></span>
+        <span class="chip">Hold <span class="v">{{ hold }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="nav">
+            <div class="item" data-class-active="filter == 5" data-action="filter" data-arg="5"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/><span>Everything</span></div>
+            <div class="item" data-class-active="filter == 0" data-action="filter" data-arg="0"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_bounty.3db"/><span>Weapons</span></div>
+            <div class="item" data-class-active="filter == 1" data-action="filter" data-arg="1"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_arrow.3db"/><span>Ammunition</span></div>
+            <div class="item" data-class-active="filter == 2" data-action="filter" data-arg="2"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_construction.3db"/><span>Equipment</span></div>
+            <div class="item" data-class-active="filter == 3" data-action="filter" data-arg="3"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/><span>Cargo</span></div>
+        </div>
+        <div class="content">
+            <div class="split">
+                <div class="colm list-col">
+                    <input class="text search" type="text" data-value="search" maxlength="40" style="margin-bottom: 8dp;"/>
+                    <div class="list">
+                        <div class="hint" style="padding: 10dp;" data-if="items.size == 0">Nothing here.</div>
+                        <div class="inv" data-for="r : items" data-class-selected="r.selected" data-action="pick" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                            <div class="txt"><div class="n">{{ r.name }}</div><div class="note">{{ r.note }}</div></div>
+                            <span class="c">{{ r.count }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm">
+                    <div id="ship"></div>
+                    <div data-if="has_pick">
+                        <div class="pick-head"><img data-if="pick.icon != ''" data-attr-src="pick.icon"/><div><div class="t">{{ pick.name }}</div><div class="hint">{{ pick.note }}</div></div></div>
+                        <div class="card">{{ info }}</div>
+                        <div class="jet" data-if="can_jettison">
+                            <input class="range" type="range" min="1" step="1" data-attr-max="amount_max" data-value="amount"/>
+                            <span class="num" style="width: 60dp; text-align: right; margin-right: 12dp;">{{ amount }}</span>
+                            <div class="btn danger" data-action="jettison">Jettison<div class="tip">Throws the amount overboard. It floats in space as loot.</div></div>
+                        </div>
+                    </div>
+                    <div class="hint" data-if="!has_pick">Pick an item to see what it is.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/loadgame.rml

@@ -0,0 +1,56 @@
+<rml>
+<head>
+    <title>Load game</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        body.window.lg { left: 50%; margin-left: -460dp; top: 12%; width: 920dp; height: 600dp; }
+        .cols { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .savelist { flex: 1; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .sv { display: flex; flex-direction: row; align-items: center; padding: 9dp 12dp; border-bottom: 1dp #ffffff08; border-left: 3dp #00000000; }
+        .sv:hover { background-color: #122033; }
+        .sv.sel { border-left-color: #f2b13c; background-color: #f2b13c1a; }
+        .sv .n { flex: 1; font-size: 16dp; white-space: nowrap; overflow: hidden; }
+        .sv .t { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-left: 12dp; }
+        .det { width: 300dp; margin-left: 16dp; padding: 14dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .det .row { display: flex; flex-direction: row; padding: 7dp 0; border-bottom: 1dp #ffffff08; }
+        .det .row .k { width: 90dp; color: #8197ad; font-size: 13dp; text-transform: uppercase; letter-spacing: 1dp; }
+        .det .row .v { flex: 1; font-size: 15dp; }
+        .acts { display: flex; flex-direction: row; justify-content: flex-end; margin-top: 14dp; }
+        .acts .btn { margin-left: 8dp; }
+    </style>
+</head>
+<body class="window lg" data-model="loadgame">
+    <div class="win-head">
+        <span class="title">LOAD GAME</span>
+        <span class="spacer"></span>
+        <span class="chip">Saves <span class="v">{{ saves.size }}</span></span>
+    </div>
+    <div class="win-main">
+        <div class="content" style="display: flex; flex-direction: column;">
+            <div class="cols">
+                <div class="savelist">
+                    <div class="hint" style="padding: 12dp;" data-if="saves.size == 0">No saved games.</div>
+                    <div class="sv" data-for="s : saves" data-class-sel="s.selected" data-action="pick" data-attr-data-arg="s.key">
+                        <span class="n">{{ s.name }}</span><span class="t">{{ s.time }}</span>
+                    </div>
+                </div>
+                <div class="det">
+                    <h3>Saved game</h3>
+                    <div class="hint" data-if="!has_pick">Pick a saved game.</div>
+                    <div data-if="has_pick">
+                        <div class="row"><span class="k">Credits</span><span class="v">{{ money }}</span></div>
+                        <div class="row"><span class="k">Rank</span><span class="v">{{ rank }}</span></div>
+                        <div class="row"><span class="k">Place</span><span class="v">{{ place }}</span></div>
+                        <div class="row"><span class="k">Ship</span><span class="v">{{ ship }}</span></div>
+                    </div>
+                </div>
+            </div>
+            <div class="acts">
+                <div class="btn" data-class-disabled="busy" data-action="menu">Main menu</div>
+                <div class="btn" data-class-disabled="!has_pick || busy" data-action="delete">Delete</div>
+                <div class="btn primary" data-class-disabled="!has_pick || busy" data-action="load">Load game</div>
+            </div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/loading.rml

@@ -0,0 +1,19 @@
+<rml>
+<head>
+    <title>Loading</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        body.loaddoc { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; background-color: transparent; }
+        .load { position: absolute; left: 50%; bottom: 60dp; transform: translateX(-50%); width: 420dp; padding: 10dp 16dp 12dp 16dp; background-color: #070b12d9; border: 2dp #3d6d96; border-top: 2dp #f2b13c; border-radius: 4dp; }
+        .load .t { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 18dp; letter-spacing: 4dp; color: #dbe6f0; text-align: center; margin-bottom: 8dp; }
+        .load .track { position: relative; height: 4dp; background-color: #24405c; border-radius: 2dp; }
+        .load .sweep { position: absolute; top: 0; width: 25%; height: 4dp; background-color: #f2b13c; border-radius: 2dp; }
+    </style>
+</head>
+<body class="loaddoc" data-model="loading">
+    <div class="load" data-if="shown">
+        <div class="t">LOADING</div>
+        <div class="track"><div class="sweep" data-style-left="sweep"></div></div>
+    </div>
+</body>
+</rml>

EXE/remui/loadsave.rml

@@ -0,0 +1,55 @@
+<rml>
+<head>
+    <title>Saved games</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.list { flex: 1; }
+        .colm.side { flex: 0 0 36%; margin-left: 18dp; }
+        .table .c2 { width: 40%; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; text-align: right; }
+        .detail { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 12dp; }
+        .detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; margin-bottom: 6dp; }
+        .detail .s { white-space: pre; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.6; }
+        .namebox { margin-bottom: 12dp; }
+        .namebox .label { margin-bottom: 6dp; }
+        .side .btn { display: block; margin: 0 0 8dp 0; text-align: center; }
+    </style>
+</head>
+<body class="window medium" data-model="loadsave">
+    <div class="win-head">
+        <span class="title">{{ title }}</span>
+        <span class="spacer"></span>
+        <span class="chip">Saves <span class="v">{{ saves.size }}</span></span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="colm list">
+                    <div class="table" style="flex: 1;">
+                        <div class="head"><span class="c1">Name</span><span class="c2">Saved</span></div>
+                        <div class="body">
+                            <div class="empty" data-if="saves.size == 0">No saved games.</div>
+                            <div class="row" data-for="s : saves" data-class-selected="s.selected" data-action="pick" data-attr-data-arg="s.key">
+                                <span class="c1">{{ s.name }}</span><span class="c2">{{ s.time }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm side">
+                    <div class="namebox" data-if="is_save">
+                        <div class="label">Save as</div>
+                        <input class="text" type="text" data-value="save_name" maxlength="30" placeholder="A new save (empty: numbered)"/>
+                    </div>
+                    <div class="detail" data-if="has_pick"><div class="s">{{ info }}</div></div>
+                    <div class="detail" data-if="!has_pick"><div class="hint">{{ is_save ? 'Pick a save to overwrite it, or name a new one.' : 'Pick a save.' }}</div></div>
+                    <div class="btn" data-for="b : buttons" data-class-primary="b.primary" data-class-disabled="!b.enabled" data-action="button" data-attr-data-arg="b.key">{{ b.label }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">back to the game</span>
+    </div>
+</body>
+</rml>

EXE/remui/mainmenu.rml

@@ -0,0 +1,46 @@
+<rml>
+<head>
+    <title>Main menu</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* a panel down the left edge over the menu scene */
+        body.menu
+        {
+            position: absolute;
+            left: 0;
+            top: 20%;
+            width: 420dp;
+            height: 80%;
+            background-color: #070b12d9;
+            border-right: 1dp #3d6d96;
+            border-top: 1dp #3d6d96;
+            border-top-right-radius: 4dp;
+            display: flex;
+            flex-direction: column;
+            padding: 0 36dp;
+        }
+        .brand { margin-top: 30dp; margin-bottom: 30dp; }
+        .brand .t { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 46dp; letter-spacing: 6dp; color: #dbe6f0; }
+        .brand .s { font-family: "Saira SemiCondensed"; font-size: 15dp; letter-spacing: 4dp; text-transform: uppercase; color: #f2b13c; margin-top: -4dp; }
+        .entry { padding: 13dp 16dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #0d1622; }
+        .entry:hover { border-color: #5cc8f0; background-color: #122033; }
+        .entry.primary { border-left-color: #f2b13c; }
+        .entry .l { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; letter-spacing: 2dp; text-transform: uppercase; }
+        .entry.primary .l { color: #f2b13c; }
+        .entry:hover .l { color: #5cc8f0; }
+        .entry .h { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
+        .foot { margin-top: auto; margin-bottom: 24dp; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; }
+    </style>
+</head>
+<body class="menu" data-model="mainmenu">
+    <div class="brand">
+        <div class="t">REMNANT</div>
+        <div class="s">Freelancer</div>
+    </div>
+    <div class="entry" data-for="e : entries" data-class-primary="e.primary" data-action="command" data-attr-data-arg="e.command">
+        <div class="l">{{ e.label }}</div>
+        <div class="h" data-if="e.hint != ''">{{ e.hint }}</div>
+    </div>
+    <div class="foot">{{ version }}</div>
+</body>
+</rml>

EXE/remui/missionboard.rml

@@ -0,0 +1,74 @@
+<rml>
+<head>
+    <title>Mission board</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.side { flex: 0 0 46%; margin-right: 18dp; }
+        .list { flex: 1; overflow-y: auto; }
+        .offer { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; }
+        .offer:hover { border-color: #5cc8f0; }
+        .offer.selected { border-color: #f2b13c; }
+        .offer img { width: 40dp; height: 40dp; margin-right: 12dp; }
+        .offer .mid { flex: 1; min-width: 0; }
+        .offer .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; }
+        .offer .d { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
+        .offer .r { font-family: "IBM Plex Mono"; color: #f2b13c; margin-left: 12dp; text-align: right; }
+        .brief-head { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
+        .brief-head img { width: 54dp; height: 54dp; margin-right: 14dp; }
+        .brief-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; }
+        .brief-head .r { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
+        /* the offer's picture (NN_MissionVendor's video screen) */
+        .photo { display: block; width: 300dp; height: 225dp; margin: 0 0 10dp 0; border: 2dp #3d6d96; border-radius: 3dp; }
+        .briefing { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .empty-board { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+        .empty-board img { width: 64dp; height: 64dp; margin-bottom: 12dp; opacity: 0.6; }
+    </style>
+</head>
+<body class="window medium" data-model="missionboard">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/>
+        <span class="title">MISSION BOARD</span>
+        <span class="spacer"></span>
+        <span class="chip">Offers <span class="v">{{ offers.size }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="empty-board" data-if="offers.size == 0">
+                <img src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/>
+                <div class="hint">{{ empty_text }}</div>
+            </div>
+            <div class="split" data-if="offers.size &gt; 0">
+                <div class="colm side">
+                    <h3 style="margin-bottom: 8dp;">Offers</h3>
+                    <div class="list">
+                        <div class="offer" data-for="o : offers" data-class-selected="o.selected" data-action="pick" data-attr-data-arg="o.key">
+                            <img data-attr-src="o.icon"/>
+                            <div class="mid"><div class="t">{{ o.title }}</div><div class="d">{{ o.text }}</div></div>
+                            <span class="r">{{ o.reward }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm">
+                    <div class="brief-head" data-if="has_pick">
+                        <img data-attr-src="pick.icon"/>
+                        <div><div class="t">{{ pick.title }}</div><div class="r">{{ pick.reward }}</div></div>
+                    </div>
+                    <img class="photo" data-if="has_pick &amp;&amp; photo != ''" data-attr-src="photo"/>
+                    <div class="briefing" data-if="has_pick">{{ briefing }}</div>
+                    <div class="hint" data-if="!has_pick">{{ status == '' ? 'Pick an offer.' : status }}</div>
+                    <div class="actions" style="margin-top: 12dp;" data-if="has_pick">
+                        <div class="btn primary" data-class-disabled="waiting" data-action="accept">Accept mission<div class="tip">Takes the mission; the board closes when the mission giver agrees.</div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/missionlog.rml

@@ -0,0 +1,36 @@
+<rml>
+<head>
+    <title>Mission log</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .colm { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+        .now { border: 1dp #f2b13c; border-radius: 3dp; background-color: #f2b13c14; padding: 12dp 14dp; margin-bottom: 14dp; }
+        .now .t { font-size: 16dp; line-height: 1.45; white-space: pre-line; margin-top: 4dp; }
+        .list { flex: 1; overflow-y: auto; }
+        .entry { padding: 8dp 12dp; margin-bottom: 6dp; border-left: 2dp #24405c; white-space: pre-line; line-height: 1.4; font-size: 14dp; color: #8197ad; }
+        .entry.objective { border-left-color: #5cc8f0; color: #dbe6f0; background-color: #122033; }
+    </style>
+</head>
+<body class="window medium" data-model="missionlog">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/>
+        <span class="title">MISSION LOG</span>
+        <span class="spacer"></span>
+        <span class="chip">Entries <span class="v">{{ entries.size }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="colm">
+                <div class="now" data-if="current != ''"><div class="label">Current objective</div><div class="t">{{ current }}</div></div>
+                <h3 style="margin-bottom: 8dp;">History</h3>
+                <div class="list">
+                    <div class="hint" data-if="entries.size == 0">Nothing logged yet.</div>
+                    <div class="entry" data-for="e : entries" data-class-objective="e.objective">{{ e.text }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
+</body>
+</rml>

EXE/remui/missions.rml

@@ -0,0 +1,50 @@
+<rml>
+<head>
+    <title>Missions</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .panel { border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 12dp; margin-bottom: 12dp; }
+        .panel .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; margin-bottom: 4dp; }
+        .row .c1 img { width: 16dp; height: 16dp; margin-right: 8dp; }
+    </style>
+</head>
+<body class="window medium" data-model="missions">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/>
+        <span class="title">MISSIONS</span>
+        <span class="spacer"></span>
+        <span class="chip">Story <span class="v">{{ story.size }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="nav">
+            <div class="item" data-class-active="page == 0" data-action="page" data-arg="0"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/><span>Story progress</span></div>
+            <div class="item" data-class-active="page == 1" data-action="page" data-arg="1"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_waypoint.3db"/><span>Race</span></div>
+        </div>
+        <div class="content">
+            <div class="colm" data-if="page == 0">
+                <div class="panel"><div class="t">Completed story missions: {{ story.size }}</div><div class="hint">Missions are offered at the bars and on the mission boards of the bases.</div></div>
+                <div class="table" style="flex: 1;">
+                    <div class="head"><span class="c3" style="text-align: left; width: 50dp;">#</span><span class="c1">Mission</span></div>
+                    <div class="body">
+                        <div class="empty" data-if="story.size == 0">No story mission completed yet.</div>
+                        <div class="row" data-for="r : story"><span class="c3" style="text-align: left; width: 50dp;">{{ r.a }}</span><span class="c1">{{ r.b }}</span></div>
+                    </div>
+                </div>
+            </div>
+            <div class="colm" data-if="page == 1">
+                <div class="panel"><div class="t">{{ race_status }}</div><div class="hint">{{ race_info }}</div></div>
+                <div class="table" style="flex: 1;">
+                    <div class="head"><span class="c1">Pilot</span><span class="c2">Lap, checkpoint, time</span></div>
+                    <div class="body">
+                        <div class="empty" data-if="leaders.size == 0">No leaderboard yet.</div>
+                        <div class="row" data-for="r : leaders" data-class-current="r.current"><span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
+</body>
+</rml>

EXE/remui/navbar.rml

@@ -0,0 +1,43 @@
+<rml>
+<head>
+    <title>Nav bar</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* only as big as the bar, centred at the top: the mouse beside it goes to the game */
+        body.navstrip
+        {
+            position: absolute;
+            left: 50%;
+            top: 4dp;
+            width: auto;
+            transform: translateX(-50%);
+            display: block;
+            background-color: transparent;
+        }
+        .navbar { display: flex; flex-direction: row; align-items: center; padding: 3dp 6dp; background-color: #070b12e6; border: 2dp #3d6d96; border-radius: 4dp; }
+        .nb { display: flex; flex-direction: row; align-items: center; padding: 4dp 10dp 4dp 6dp; margin: 0 2dp; border: 1dp #00000000; border-radius: 3dp; }
+        .nb:hover { border-color: #5cc8f0; background-color: #122033; }
+        .nb.active { border-color: #f2b13c; background-color: #f2b13c1f; }
+        .nb.disabled { opacity: 0.4; }
+        .nb.disabled:hover { border-color: #00000000; background-color: transparent; }
+        .nb img { width: 28dp; height: 28dp; margin-right: 6dp; }
+        .nb span { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1dp; text-transform: uppercase; color: #dbe6f0; }
+        .nb.active span { color: #f2b13c; }
+        .nb:hover span { color: #5cc8f0; }
+        .nb.tab img { width: 22dp; height: 22dp; }
+        .nb.tab span { font-size: 12dp; color: #8197ad; }
+        .sep { width: 1dp; height: 28dp; background-color: #3d6d96; margin: 0 8dp; }
+    </style>
+</head>
+<body class="navstrip" data-model="navbar">
+    <div class="navbar" data-if="shown">
+        <div class="nb" data-for="b : rooms" data-class-active="b.active" data-class-disabled="b.disabled" data-action="click" data-attr-data-arg="b.key">
+            <img data-if="b.icon != ''" data-attr-src="b.icon"/><span>{{ b.label }}</span>
+        </div>
+        <div class="sep" data-if="tabs.size &gt; 0"></div>
+        <div class="nb tab" data-for="b : tabs" data-class-active="b.active" data-class-disabled="b.disabled" data-action="click" data-attr-data-arg="b.key">
+            <img data-if="b.icon != ''" data-attr-src="b.icon"/><span>{{ b.label }}</span>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/navmap.rml

@@ -0,0 +1,171 @@
+<rml>
+<head>
+    <title>Nav map</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        /* the map box is clear: the nav map draws its own backgrounds under it (DrawUnder), so
+           the window's colour is laid around it instead of under the whole body */
+        body.window { background-color: transparent; }
+        .win-head { background-color: #0d1622eb; }
+        .win-main .content { padding: 0; }
+        .mapframe { display: flex; flex-direction: column; border: 18dp #0d1622eb; border-right-width: 0; border-bottom-width: 0; }
+        .mapfill { flex: 1; min-height: 18dp; background-color: #0d1622eb; }
+        #map .region { position: absolute; width: 200dp; margin-left: -100dp; margin-top: -10dp; text-align: center; font-family: "Saira SemiCondensed"; font-size: 17dp; letter-spacing: 3dp; text-transform: uppercase; color: #dbe6f0b0; }
+        /* uncharted space has no map art: the whole box dark, never the scene through it */
+        #map.blank, #map.blank.revealed { background-color: #03070d; }
+        #map .uncharted-note { position: absolute; left: 0; right: 0; top: 360dp; text-align: center; color: #8197ad; font-size: 14dp; }
+        #map { position: relative; width: 760dp; height: 760dp; overflow: hidden; border: 1dp #24405c; cursor: pointer; background-color: #03070d; transition: background-color 0.3s cubic-out; }
+        /* the map art (drawn under the window) shows once the window stands: it fades in inside the box */
+        #map.revealed { background-color: #03070d00; }
+        .side { flex: 1; margin-left: 0; padding: 18dp; background-color: #0d1622eb; display: flex; flex-direction: column; min-width: 0; }
+        .tbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10dp; }
+        .tbar .btn { display: block; margin: 0 6dp 6dp 0; }
+        .sysname { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 24dp; letter-spacing: 2dp; margin-bottom: 8dp; }
+        .pcard { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 10dp; }
+        .pcard .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; }
+        .pcard .k { font-size: 12dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; margin-bottom: 8dp; }
+        .pcard .btn { margin: 0 6dp 6dp 0; }
+        .pcard .acts { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
+        .pcard .acts .btn { display: block; }
+        .objs { padding: 10dp 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 10dp; }
+        .obj { white-space: pre-line; font-size: 13dp; line-height: 1.4; padding: 4dp 0; border-bottom: 1dp #ffffff08; }
+        .info { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .zoom { position: absolute; right: 8dp; bottom: 8dp; display: flex; flex-direction: row; align-items: center; }
+        .zoom .btn { margin: 0 0 0 4dp; padding: 2dp 10dp; }
+        .zoom .v { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-right: 4dp; }
+
+        /* map items: centred on their point */
+        .mi { position: absolute; width: 0; height: 0; }
+        .mi .s { position: absolute; }
+        .mi .lbl { position: absolute; left: 9dp; top: -8dp; white-space: nowrap; font-size: 11dp; color: #b9cbe0; }
+        .mi.sel .lbl { color: #f2b13c; }
+        .planet .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; border-radius: 6dp; background-color: #3d79b8; border: 1dp #8fc2ff; }
+        .sun .s { left: -8dp; top: -8dp; width: 16dp; height: 16dp; border-radius: 8dp; background-color: #f2c94c; border: 1dp #fff2b0; }
+        .station .s { left: -5dp; top: -5dp; width: 10dp; height: 10dp; background-color: #5cc8f0; border: 1dp #dbf3ff; }
+        .gate .s { left: -6dp; top: -6dp; width: 10dp; height: 10dp; border: 2dp #b98cf2; transform: rotate(45deg); }
+        .hole .s { left: -6dp; top: -6dp; width: 10dp; height: 10dp; border: 2dp #ef6a5b; border-radius: 6dp; }
+        .ring .s { left: -2dp; top: -2dp; width: 4dp; height: 4dp; border-radius: 2dp; background-color: #2f6d8f; }
+        .platform .s { left: -3dp; top: -3dp; width: 6dp; height: 6dp; background-color: #ef6a5b; }
+        .object .s { left: -3dp; top: -3dp; width: 6dp; height: 6dp; border-radius: 3dp; background-color: #8197ad; }
+        .system .s { left: -7dp; top: -7dp; width: 14dp; height: 14dp; border-radius: 7dp; background-color: #f2c94c; border: 2dp #3d6d96; }
+        .system .lbl { font-size: 12dp; color: #dbe6f0; }
+        .player .s { left: -8dp; top: -8dp; width: 0; height: 0; border-left: 8dp #00000000; border-right: 8dp #00000000; border-bottom: 16dp #7cf27c; }
+        .hits, .marks { margin-bottom: 10dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; max-height: 220dp; overflow-y: auto; }
+        .marks h3 { margin: 6dp 10dp 2dp 10dp; }
+        .hit { display: flex; flex-direction: row; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; }
+        .hit:hover { background-color: #122033; color: #5cc8f0; }
+        .hit .hn { flex: 1; white-space: nowrap; overflow: hidden; }
+        .hit .hk { font-size: 12dp; color: #8197ad; }
+        .bookmark .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; background-color: #f2b13c; border: 2dp #05080d; border-radius: 6dp; }
+        .bookmark .lbl { color: #f2b13c; }
+        .waypoint .s { left: -7dp; top: -7dp; width: 14dp; height: 14dp; border: 2dp #f2b13c; border-radius: 2dp; }
+        .waypoint .lbl, .bestpath .lbl { left: -4dp; top: -7dp; font-family: "IBM Plex Mono"; font-size: 10dp; color: #f2b13c; }
+        .bestpath .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; border: 2dp #5cc8f0; border-radius: 6dp; }
+        .bestpath .lbl { color: #5cc8f0; }
+        .group .s { left: -4dp; top: -4dp; width: 8dp; height: 8dp; border-radius: 4dp; background-color: #7cf27c; }
+        .mi.sel .s { border-color: #f2b13c; }
+        .sel .ring2 { position: absolute; left: -12dp; top: -12dp; width: 20dp; height: 20dp; border: 1dp #f2b13c; border-radius: 12dp; }
+
+        /* the tools at the click point (as the classic map's ring of tools) */
+        .pop { position: absolute; width: 150dp; padding: 4dp; background-color: #070b12f2; border: 2dp #3d6d96; border-radius: 3dp; }
+        .pop .pt { font-size: 11dp; color: #f2b13c; padding: 2dp 6dp 4dp 6dp; white-space: nowrap; overflow: hidden; }
+        .pop .pb { padding: 4dp 6dp; font-size: 12dp; border-radius: 2dp; }
+        .pop .pb:hover { background-color: #122033; color: #5cc8f0; }
+
+        /* lines: from their start, rotated */
+        .ln { position: absolute; height: 0; transform-origin: 0 0; }
+        .ln.jump { border-top: 2dp #3d6d96; }
+        .ln.lane { border-top: 3dp #2f6d8f; }
+        .ln.route { border-top: 3dp #5cc8f0; }
+        .ln.waypath { border-top: 3dp #f2b13c; }
+    </style>
+</head>
+<body class="window" data-model="navmap">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_Map.3db"/>
+        <span class="title">{{ briefing ? 'MISSION BRIEFING' : 'NAVIGATION' }}</span>
+        <span class="spacer"></span>
+        <span class="chip">Waypoints <span class="v">{{ waypoints }}</span></span>
+        <span class="close" data-if="!briefing" data-action="tool" data-arg="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="mapframe"><div id="map" data-class-blank="universe &amp;&amp; uncharted">
+                    <div class="region" data-for="r : regions" data-style-left="r.left" data-style-top="r.top">{{ r.name }}</div>
+                    <div class="uncharted-note" data-if="universe && uncharted && items.size == 0">No uncharted system visited yet.</div>
+                    <div class="ln" data-for="l : lines" data-class-jump="l.cls == 'jump'" data-class-lane="l.cls == 'lane'" data-class-route="l.cls == 'route'" data-class-waypath="l.cls == 'waypath'" data-style-left="l.left" data-style-top="l.top" data-style-width="l.width" data-style-transform="l.transform"></div>
+                    <div class="mi" data-for="i : items" data-attr-class="'mi ' + i.cls + (i.selected ? ' sel' : '')" data-style-left="i.left" data-style-top="i.top">
+                        <div class="ring2" data-if="i.selected"></div>
+                        <div class="s" data-style-transform="i.rot"></div>
+                        <div class="lbl" data-if="i.label != ''" data-style-left="i.lleft" data-style-top="i.ltop">{{ i.label }}</div>
+                    </div>
+                    <div class="pop" data-if="popup" data-style-left="pop_left" data-style-top="pop_top">
+                        <div class="pt">{{ pick_name }}</div>
+                        <div class="pb" data-if="can_open" data-action="tool" data-arg="open">Open system</div>
+                        <div class="pb" data-action="tool" data-arg="waypoint">Set waypoint</div>
+                        <div class="pb" data-action="tool" data-arg="route">Plot route</div>
+                        <div class="pb" data-if="can_target" data-action="tool" data-arg="target">Target</div>
+                        <div class="pb" data-if="can_info" data-action="tool" data-arg="info">Info</div>
+                        <div class="pb" data-if="can_clear" data-action="tool" data-arg="clearwp">Remove waypoint</div>
+                    </div>
+                    <div class="zoom">
+                        <span class="v">{{ zoom }}</span>
+                        <div class="btn" data-action="zoomout">-</div>
+                        <div class="btn" data-action="zoomin">+</div>
+                    </div>
+                </div><div class="mapfill"></div></div>
+                <div class="side">
+                    <div class="sysname">{{ system }}</div>
+                    <div class="tbar">
+                        <div class="btn" data-class-primary="universe" data-action="tool" data-arg="universe">Universe</div>
+                        <div class="btn" data-if="has_uncharted" data-class-primary="uncharted" data-action="tool" data-arg="uncharted">Uncharted</div>
+                        <div class="btn" data-action="tool" data-arg="myship">My system</div>
+                        <div class="btn" data-class-primary="labels" data-action="labels">Names</div>
+                        <div class="btn" data-action="tool" data-arg="clearall">Clear waypoints</div>
+                        <div class="btn" data-if="can_abort" data-action="abort">Abort mission</div>
+                    </div>
+                    <div class="pcard" data-if="has_pick">
+                        <div class="n">{{ pick_name }}</div>
+                        <div class="k">{{ pick_kind }}</div>
+                        <div class="acts">
+                        <div class="btn" data-if="can_open" data-action="tool" data-arg="open">Open system</div>
+                        <div class="btn primary" data-action="tool" data-arg="waypoint">Set waypoint</div>
+                        <div class="btn" data-action="tool" data-arg="route">Plot route</div>
+                        <div class="btn" data-if="can_target" data-action="tool" data-arg="target">Target</div>
+                        <div class="btn" data-if="can_info" data-action="tool" data-arg="info">Info</div>
+                        <div class="btn" data-if="can_clear" data-action="tool" data-arg="clearwp">Remove waypoint</div>
+                        <div class="btn" data-if="can_mark" data-action="bookmark">Bookmark</div>
+                        </div>
+                    </div>
+                    <input class="text" type="text" data-value="search" maxlength="40" style="margin-bottom: 6dp;"/>
+                    <div class="hits" data-if="search != ''">
+                        <div class="hint" style="padding: 6dp;" data-if="results.size == 0">Nothing on this map by that name.</div>
+                        <div class="hit" data-for="r : results" data-action="result" data-attr-data-arg="r.key"><span class="hn">{{ r.name }}</span><span class="hk">{{ r.kind }}</span></div>
+                    </div>
+                    <div class="marks" data-if="bookmarks.size &gt; 0 &amp;&amp; search == ''">
+                        <h3>Bookmarks</h3>
+                        <div class="hit" data-for="b : bookmarks" data-action="gomark" data-ctx="mark" data-attr-data-arg="b.key"><span class="hn">{{ b.name }}</span></div>
+                    </div>
+                    <div class="pcard" data-if="!has_pick"><div class="k">Click the map to pick a place. Wheel zooms, drag moves, double click opens a system.</div></div>
+                    <div class="objs" data-if="objectives.size &gt; 0">
+                        <div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 4dp;">
+                            <h3 style="flex: 1;">Route</h3>
+                            <div class="btn" style="margin: 0 0 0 4dp; padding: 1dp 8dp;" data-action="objup">&#8593;</div>
+                            <div class="btn" style="margin: 0 0 0 4dp; padding: 1dp 8dp;" data-action="objdown">&#8595;</div>
+                        </div>
+                        <div class="obj" data-for="o : objectives">{{ o }}</div>
+                    </div>
+                    <div class="info" data-if="show_info">{{ infocard }}</div>
+                    <div class="tbar" data-if="show_info" style="margin-top: 8dp;">
+                        <div class="btn" data-action="tool" data-arg="closeinfo">Close info</div>
+                    </div>
+                    <div style="flex: 1;" data-if="!show_info"></div>
+                    <div class="btn primary" data-if="briefing" style="text-align: center;" data-action="tool" data-arg="continue">Continue</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/news.rml

@@ -0,0 +1,53 @@
+<rml>
+<head>
+    <title>News</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.side { flex: 0 0 40%; margin-right: 18dp; }
+        .list { flex: 1; overflow-y: auto; }
+        .story { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; }
+        .story:hover { border-color: #5cc8f0; }
+        .story.selected { border-color: #f2b13c; }
+        .story img { width: 34dp; height: 34dp; margin-right: 12dp; }
+        .story .t { flex: 1; font-size: 14dp; }
+        .head { display: flex; flex-direction: row; align-items: center; margin-bottom: 12dp; }
+        .head img { width: 54dp; height: 54dp; margin-right: 14dp; }
+        /* the story's picture (NN_News' video screen) */
+        .photo { display: block; width: 360dp; height: 270dp; margin: 4dp 0 12dp 0; border: 2dp #3d6d96; border-radius: 3dp; }
+        .head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; }
+        .text { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; padding: 14dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; font-size: 16dp; }
+    </style>
+</head>
+<body class="window medium" data-model="news">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/>
+        <span class="title">NEWS</span>
+        <span class="spacer"></span>
+        <span class="chip">Stories <span class="v">{{ stories.size }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="hint" data-if="stories.size == 0">No news here.</div>
+            <div class="split" data-if="stories.size &gt; 0">
+                <div class="colm side">
+                    <h3 style="margin-bottom: 8dp;">Headlines</h3>
+                    <div class="list">
+                        <div class="story" data-for="s : stories" data-class-selected="s.selected" data-action="pick" data-attr-data-arg="s.key">
+                            <img data-attr-src="s.icon"/><span class="t">{{ s.headline }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm" data-if="has_pick">
+                    <div class="head"><img data-attr-src="pick.icon"/><div class="t">{{ pick.headline }}</div></div>
+                    <img class="photo" data-if="photo != ''" data-attr-src="photo"/>
+                    <div class="text">{{ story }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
+</body>
+</rml>

EXE/remui/nnbar.rml

@@ -0,0 +1,30 @@
+<rml>
+<head>
+    <title>NeuroNet</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* only as big as the bar, at the top right: the mouse beside it goes to the game */
+        body.nnstrip { position: absolute; right: 8dp; top: 4dp; width: 400dp; height: 60dp; display: block; background-color: transparent; pointer-events: none; }
+        .nnbar { pointer-events: auto; position: absolute; top: 0; right: 0; display: flex; flex-direction: row; align-items: center; padding: 3dp 4dp; background-color: #070b12e6; border: 2dp #3d6d96; border-radius: 4dp; }
+        .nb { width: 40dp; padding: 3dp 5dp; margin: 0 1dp; border: 1dp #00000000; border-radius: 3dp; position: relative; }
+        .nb:hover { border-color: #5cc8f0; background-color: #122033; }
+        .nb.active { border-color: #f2b13c; background-color: #f2b13c1f; }
+        .nb img { width: 30dp; height: 30dp; display: block; image-color: #8fb8d8; }
+        .nb:hover img { image-color: #5cc8f0; animation: 1.6s linear infinite nb-spin; }
+        /* REM: as FL's NeuroNet icons, the hovered one turns about its upright axis */
+        .nb { transition: background-color border-color 0.15s cubic-out; }
+        .nb img { transform: perspective(240dp) rotateY(0deg) scale(1); transition: transform 0.2s cubic-out; }
+        .nb.active img { image-color: #f2b13c; }
+        .nb .tip { top: 40dp; right: 0; left: auto; bottom: auto; width: 230dp; white-space: normal; text-align: right; }
+        .nb:hover .tip { display: block; }
+    </style>
+</head>
+<body class="nnstrip" data-model="nnbar">
+    <div class="nnbar" data-if="shown" data-style-width="icons.size * 42 + 12 + 'dp'">
+        <div class="nb" data-for="i : icons" data-class-active="i.active" data-action="nn" data-attr-data-arg="i.cmd">
+            <img data-attr-src="i.icon"/>
+            <div class="tip" data-if="i.label != ''">{{ i.label }}</div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/nnfly.rml

@@ -0,0 +1,17 @@
+<rml>
+<head>
+    <title>Bar icon flight</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* the clicked bar icon on its way to the screen's middle, where its window opens (as FL's
+           NeuroNet buttons fly in before their panel grows); no box, no clicks */
+        body.flydoc { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; background-color: transparent; pointer-events: none; }
+        #fly { position: absolute; display: none; image-color: #f2b13c; transform: perspective(600dp) rotateY(0deg); }
+        #fly.on { display: block; animation: 0.32s cubic-in-out 1 fly-spin; }
+        @keyframes fly-spin { from { transform: perspective(600dp) rotateY(0deg); } to { transform: perspective(600dp) rotateY(360deg); } }
+    </style>
+</head>
+<body class="flydoc">
+    <img id="fly"/>
+</body>
+</rml>

EXE/remui/notify.rml

@@ -0,0 +1,29 @@
+<rml>
+<head>
+    <title>Notifications</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* cards at the right edge, above the HUD's right panel; the empty strip is the game's */
+        body.notify { position: absolute; right: 16dp; top: 120dp; width: 340dp; height: 520dp; background-color: transparent; display: flex; flex-direction: column; }
+        .card { margin-bottom: 8dp; padding: 9dp 12dp 9dp 14dp; background-color: #070b12eb; border: 2dp #3d6d96; border-left: 4dp #5cc8f0; border-radius: 4dp; }
+        .card:hover { background-color: #0d1622f5; }
+        .card .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; letter-spacing: 0.6dp; }
+        .card .x { float: right; color: #8197ad; font-size: 13dp; }
+        .card .b { margin-top: 2dp; font-size: 14dp; color: #b9cbe0; }
+        .card.good { border-left-color: #5fd08a; }
+        .card.warn { border-left-color: #ef6a5b; }
+        .card.group { border-left-color: #ff7efd; }
+        .card.trade { border-left-color: #f2b13c; }
+        .card.mail { border-left-color: #87c3e0; }
+        .card { animation: 0.25s cubic-out slidein; }
+        @keyframes slidein { from { opacity: 0; margin-left: 40dp; } to { opacity: 1; margin-left: 0; } }
+    </style>
+</head>
+<body class="notify" data-model="notify">
+    <div class="card" data-for="c : cards" data-attr-class="'card ' + c.kind" data-action="dismiss" data-attr-data-arg="c.key">
+        <span class="x">&#215;</span>
+        <div class="t">{{ c.title }}</div>
+        <div class="b" data-if="c.text != ''">{{ c.text }}</div>
+    </div>
+</body>
+</rml>

EXE/remui/objective.rml

@@ -0,0 +1,33 @@
+<rml>
+<head>
+    <title>Objective</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* no box of its own: only the banner, centred under the top bars */
+        body.objdoc { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; background-color: transparent; }
+        .obj
+        {
+            position: absolute;
+            left: 50%;
+            top: 70dp;
+            transform: translateX(-50%);
+            max-width: 900dp;
+            padding: 8dp 22dp;
+            background-color: #070b12d9;
+            border: 2dp #3d6d96;
+            border-top: 2dp #f2b13c;
+            border-radius: 4dp;
+            font-family: "Saira SemiCondensed";
+            font-weight: 600;
+            font-size: 17dp;
+            letter-spacing: 1.5dp;
+            color: #f2b13c;
+            text-align: center;
+            white-space: nowrap;
+        }
+    </style>
+</head>
+<body class="objdoc" data-model="objective">
+    <div class="obj" data-if="shown" data-style-opacity="opacity">{{ text }}</div>
+</body>
+</rml>

EXE/remui/options.rml

@@ -0,0 +1,111 @@
+<rml>
+<head>
+    <title>Options</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .side { flex: 0 0 200dp; margin-right: 18dp; display: flex; flex-direction: column; }
+        .main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .page { padding: 11dp 14dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; letter-spacing: 1.5dp; text-transform: uppercase; }
+        .page:hover { border-color: #5cc8f0; color: #5cc8f0; }
+        .page.active { border-left-color: #f2b13c; color: #f2b13c; background-color: #f2b13c14; }
+        .subtabs { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 10dp; }
+        .subtab { padding: 5dp 12dp; margin: 0 6dp 6dp 0; border: 1dp #24405c; border-radius: 12dp; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; }
+        .subtab:hover { border-color: #5cc8f0; color: #5cc8f0; }
+        .subtab.active { border-color: #f2b13c; color: #f2b13c; }
+        .rows { flex: 1; overflow-y: auto; }
+        .head { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 12dp 0 6dp 0; }
+        .opt { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; border-bottom: 1dp #ffffff08; }
+        .opt:hover { background-color: #122033; }
+        .opt .l { flex: 1; min-width: 0; font-size: 16dp; }
+        .opt.locked .l, .opt.locked .v { color: #5d6e80; }
+        .opt.changed { border-left: 2dp #f2b13c; }
+        .opt.changed .l { color: #f2b13c; }
+        /* nothing of the window's content until NN_Preferences stands on its page */
+        .win-main, .win-head .title { transition: opacity 0.18s; }
+        .settling .win-main, .settling .win-head .title { opacity: 0; }
+        .rows.settle { opacity: 0; transition: opacity 0.15s; }
+        .rows.settle.shown { opacity: 1; }
+        .switch { width: 58dp; padding: 3dp 0; text-align: center; border: 2dp #3d6d96; border-radius: 4dp; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1dp; color: #8197ad; }
+        .switch.on { border-color: #f2b13c; color: #f2b13c; background-color: #f2b13c1f; }
+        .switch:hover { border-color: #5cc8f0; }
+        .slide { display: flex; flex-direction: row; align-items: center; width: 330dp; }
+        .slide .step { width: 26dp; padding: 2dp 0; text-align: center; border: 1dp #24405c; border-radius: 3dp; color: #dbe6f0; }
+        .slide .step:hover { border-color: #5cc8f0; color: #5cc8f0; }
+        .slide .track { flex: 1; height: 6dp; margin: 0 8dp; background-color: #24405c; border-radius: 3dp; }
+        .slide .fill { height: 6dp; background-color: #f2b13c; border-radius: 3dp; }
+        .opt .v { width: 120dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-left: 10dp; }
+        .ask { padding: 12dp; margin-bottom: 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #0d1622; display: flex; flex-direction: row; align-items: center; }
+        .ask .t { flex: 1; }
+        .ask .btn { margin: 0 0 0 8dp; }
+        .side .btn { display: block; margin: 0 0 8dp 0; text-align: center; }
+        .kb { width: 150dp; margin-left: 10dp; padding: 4dp 8dp; text-align: center; font-family: "IBM Plex Mono"; font-size: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .kb:hover { border-color: #5cc8f0; color: #5cc8f0; }
+        .kb.fixed { color: #5d6e80; }
+        .kb.fixed:hover { border-color: #24405c; color: #5d6e80; }
+        .credits { flex: 1; overflow-y: auto; white-space: pre-line; text-align: center; line-height: 1.6; font-size: 14dp; padding: 12dp; }
+    </style>
+</head>
+<body class="window" data-model="options" data-class-settling="!settled">
+    <div class="win-head">
+        <span class="title">{{ title }}</span>
+        <span class="spacer"></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="side">
+                    <div class="page" data-for="p : pages" data-class-active="p.active" data-action="page" data-attr-data-arg="p.key">{{ p.label }}</div>
+                    <div style="flex: 1;"></div>
+                    <div class="btn primary" data-if="is_rem" data-class-disabled="!unsaved" data-action="save">Save settings<div class="tip">Writes the changed REM settings (marked) to rem.ini.</div></div>
+                    <div class="btn" data-if="can_defaults" data-action="defaults">Defaults<div class="tip">Every setting of this page back to its default.</div></div>
+                    <div class="btn" data-class-disabled="!can_cancel" data-action="cancel">Undo changes<div class="tip">Back to the values the page opened with.</div></div>
+                    <div class="btn primary" data-action="close">{{ in_game ? 'Back to the game' : 'Main menu' }}</div>
+                </div>
+                <div class="main">
+                    <div class="ask" data-if="asking">
+                        <span class="t">{{ question }}</span>
+                        <div class="btn primary" data-if="can_yes" data-action="yes">{{ yes_label }}</div>
+                        <div class="btn" data-action="no">{{ no_label }}</div>
+                    </div>
+                    <div class="subtabs" data-if="is_rem">
+                        <div class="subtab" data-for="t : subtabs" data-class-active="t.active" data-action="subtab" data-attr-data-arg="t.key">{{ t.label }}</div>
+                    </div>
+                    <div class="subtabs" data-if="is_keys">
+                        <div class="subtab" data-for="t : keygroups" data-class-active="t.active" data-action="keygroup" data-attr-data-arg="t.key">{{ t.label }}</div>
+                    </div>
+                    <div class="rows" data-if="is_keys">
+                        <div class="opt keyrow" data-for="k : keys" data-class-locked="!k.editable">
+                            <span class="l">{{ k.name }}</span>
+                            <span class="kb" data-class-fixed="!k.editable" data-action="bind" data-attr-data-arg="k.row">{{ k.key == '' ? '-' : k.key }}</span>
+                            <span class="kb" data-class-fixed="!k.editable" data-action="bindalt" data-attr-data-arg="k.row">{{ k.alt == '' ? '-' : k.alt }}</span>
+                        </div>
+                    </div>
+                    <div class="credits" data-if="is_credits">{{ credits }}</div>
+                    <div class="rows settle" data-if="!is_keys &amp;&amp; !is_credits" data-class-shown="settled">
+                        <div data-for="r : rows">
+                            <div class="head" data-if="r.kind == 0">{{ r.label }}</div>
+                            <div class="opt" data-if="r.kind != 0" data-class-locked="r.kind == 3" data-class-changed="r.changed">
+                                <span class="l">{{ r.label }}</span>
+                                <div class="switch" data-if="r.kind == 1" data-class-on="r.on" data-action="toggle" data-attr-data-arg="r.key">{{ r.value }}</div>
+                                <div class="slide" data-if="r.kind == 2">
+                                    <span class="step" data-action="dec" data-attr-data-arg="r.key">-</span>
+                                    <div class="track"><div class="fill" data-style-width="r.fill + '%'"></div></div>
+                                    <span class="step" data-action="inc" data-attr-data-arg="r.key">+</span>
+                                    <span class="v">{{ r.value }}</span>
+                                </div>
+                                <span class="v" data-if="r.kind == 3">{{ r.value }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">back</span>
+        <span class="status">{{ unsaved ? 'REM settings changed - not saved yet.' : 'Settings marked * take effect after a restart.' }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/outfitter.rml

@@ -0,0 +1,112 @@
+<rml>
+<head>
+    <title>Equipment dealer</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.mid { flex: 0 0 34%; margin: 0 18dp; }
+        .col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
+        .col-h .hint { margin-left: auto; }
+        .list { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; }
+        .good { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
+        .good:hover { background-color: #122033; }
+        .good.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
+        .good.disabled .n, .good.disabled .p { color: #8197ad; }
+        .good img { width: 30dp; height: 30dp; margin-right: 10dp; }
+        .good .txt { flex: 1; min-width: 0; }
+        .good .n { font-size: 14dp; }
+        .good .note { font-size: 12dp; color: #8197ad; }
+        .good .c { font-family: "IBM Plex Mono"; width: 40dp; text-align: right; color: #8197ad; }
+        .good .p { font-family: "IBM Plex Mono"; width: 100dp; text-align: right; color: #f2b13c; }
+        #ship { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); }
+        .deal { margin-top: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; display: flex; flex-direction: row; align-items: center; }
+        .deal img { width: 48dp; height: 48dp; margin-right: 14dp; }
+        .deal .what { width: 300dp; }
+        .deal .what .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
+        .deal .amount { flex: 1; display: flex; flex-direction: row; align-items: center; margin: 0 14dp; }
+        .deal .amount .v { font-family: "IBM Plex Mono"; width: 70dp; text-align: right; margin-left: 10dp; }
+        .deal .sum { font-family: "IBM Plex Mono"; font-size: 18dp; color: #f2b13c; width: 150dp; text-align: right; margin-right: 14dp; }
+        .deal .btn { margin: 0; }
+        .why { color: #ef6a5b; margin-right: 14dp; }
+        .search { margin-bottom: 8dp; }
+        .cmp { margin-top: 10dp; padding: 8dp 10dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .cmp .ch, .cmp .cr { display: flex; flex-direction: row; padding: 2dp 0; }
+        .cmp .ch { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; border-bottom: 1dp #24405c; margin-bottom: 4dp; }
+        .cmp .cl { flex: 1; white-space: nowrap; overflow: hidden; }
+        .cmp .cv { width: 70dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 13dp; }
+        .cmp .ch .cv { font-family: "Saira SemiCondensed"; font-size: 12dp; color: #8197ad; }
+        .cmp .cv.up { color: #5fd08a; }
+        .cmp .cv.down { color: #ef6a5b; }
+        .cmp .cv.dim { color: #8197ad; }
+        .cmp .cn { margin-top: 4dp; font-size: 12dp; color: #8197ad; }
+    </style>
+</head>
+<body class="window" data-model="outfitter">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/>
+        <span class="title">EQUIPMENT DEALER</span>
+        <span class="spacer"></span>
+        <span class="chip">Hold <span class="v">{{ hold }}</span></span>
+        <span class="chip">Credits <span class="v">{{ credits }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="colm">
+                    <div class="col-h"><h3>For sale here</h3><span class="hint">{{ market.size }}</span></div>
+                    <input class="text search" type="text" data-value="filter" maxlength="40"/>
+                    <div class="list">
+                        <div class="hint" style="padding: 10dp;" data-if="market.size == 0">No equipment for sale here.</div>
+                        <div class="good" data-for="r : market" data-class-selected="r.selected" data-class-disabled="r.disabled" data-action="buy-pick" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                            <div class="txt"><div class="n">{{ r.name }}</div><div class="note" data-if="r.note != ''">{{ r.note }}</div></div>
+                            <span class="p">{{ r.price }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm mid">
+                    <div class="col-h"><h3>Your ship</h3></div>
+                    <div id="ship"></div>
+                    <div class="cmp" data-if="cmp.size &gt; 0">
+                        <div class="ch"><span class="cl">{{ pick.name }}</span><span class="cv">this</span><span class="cv" data-if="cmp_other != ''">mounted</span></div>
+                        <div class="cr" data-for="c : cmp"><span class="cl">{{ c.label }}</span><span class="cv" data-class-up="c.better == 1" data-class-down="c.better == -1">{{ c.value }}</span><span class="cv dim" data-if="cmp_other != ''">{{ c.other }}</span></div>
+                        <div class="cn" data-if="cmp_other != ''">compared with {{ cmp_other }}</div>
+                    </div>
+                </div>
+                <div class="colm">
+                    <div class="col-h"><h3>Your equipment</h3><span class="hint">hold {{ hold }}</span></div>
+                    <div class="list">
+                        <div class="hint" style="padding: 10dp;" data-if="gear.size == 0">No equipment.</div>
+                        <div class="good" data-for="r : gear" data-class-selected="r.selected" data-class-disabled="r.disabled" data-action="sell-pick" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                            <div class="txt"><div class="n">{{ r.name }}</div><div class="note">{{ r.note }}</div></div>
+                            <span class="c">{{ r.count }}</span><span class="p">{{ r.price }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="deal">
+                <img data-if="has_pick &amp;&amp; pick.icon != ''" data-attr-src="pick.icon"/>
+                <div class="what">
+                    <div class="label">{{ side == 0 ? 'Buy' : 'Sell' }}</div>
+                    <div class="t">{{ has_pick ? pick.name : 'Pick a piece of equipment' }}</div>
+                </div>
+                <div class="amount">
+                    <input class="range" type="range" min="1" step="1" data-attr-max="amount_max" data-value="amount"/>
+                    <span class="v">{{ amount_text }}</span>
+                    <div class="btn" style="margin-left: 10dp; padding: 3dp 10dp;" data-action="max">Max</div>
+                </div>
+                <span class="why" data-if="reason != ''">{{ reason }}</span>
+                <span class="sum">{{ total }}</span>
+                <div class="btn primary" data-class-disabled="!has_pick || reason != ''" data-action="deal">{{ side == 0 ? 'Buy' : 'Sell' }}<div class="tip">{{ side == 0 ? 'Buys it: onto a free hardpoint of your ship when there is one, else into the hold.' : 'Sells it; used equipment fetches less.' }}</div></div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/pause.rml

@@ -0,0 +1,43 @@
+<rml>
+<head>
+    <title>Pause</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* the whole screen dimmed, the menu in the middle */
+        body.dim
+        {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #02050acc;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        .menu { width: 440dp; background-color: #0d1622f5; border: 2dp #3d6d96; border-top: 2dp #f2b13c; border-radius: 4dp; padding: 18dp 22dp 12dp 22dp; }
+        .menu .title { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 26dp; letter-spacing: 4dp; text-transform: uppercase; margin-bottom: 14dp; }
+        .row { padding: 11dp 14dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; }
+        .row:hover { border-color: #5cc8f0; background-color: #16283d; }
+        .row.primary { border-left-color: #f2b13c; }
+        .row.danger { border-left-color: #ef6a5b; }
+        .row .l { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; letter-spacing: 1.5dp; text-transform: uppercase; }
+        .row.primary .l { color: #f2b13c; }
+        .row:hover .l { color: #5cc8f0; }
+        .row .h { font-size: 12dp; color: #8197ad; margin-top: 2dp; }
+        .foot { margin-top: 6dp; text-align: center; }
+    </style>
+</head>
+<body class="dim" data-model="pause">
+    <div class="menu">
+        <div class="title">{{ title }}</div>
+        <div class="row" data-for="r : rows" data-class-primary="r.primary" data-class-danger="r.danger" data-action="row" data-attr-data-arg="r.key">
+            <div class="l">{{ r.label }}</div>
+            <div class="h" data-if="r.hint != ''">{{ r.hint }}</div>
+        </div>
+        <div class="foot"><span class="key">Esc</span><span class="hint"> resume</span></div>
+    </div>
+</body>
+</rml>

EXE/remui/player.rml

@@ -0,0 +1,93 @@
+<rml>
+<head>
+    <title>Player</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .grid { display: flex; flex-direction: row; flex-wrap: wrap; }
+        .stat { display: flex; flex-direction: row; align-items: center; width: 30%; margin: 0 3% 12dp 0; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 10dp 12dp; }
+        .stat .stat-ico { width: 34dp; height: 34dp; margin-right: 12dp; image-color: #5cc8f0; }
+        .stat .k { font-family: "Saira SemiCondensed"; font-size: 12dp; letter-spacing: 1.1dp; text-transform: uppercase; color: #8197ad; }
+        .stat .v { font-family: "IBM Plex Mono"; font-size: 20dp; margin-top: 2dp; }
+        .skill { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; }
+        .skill:hover { border-color: #5cc8f0; }
+        .skill.selected { border-color: #f2b13c; }
+        .skill .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; width: 220dp; }
+        .skill .lvl { font-family: "IBM Plex Mono"; width: 60dp; text-align: right; margin-right: 14dp; color: #8197ad; }
+        .skill .bar { flex: 1; margin-right: 14dp; }
+        .skill .next { font-family: "IBM Plex Mono"; width: 120dp; text-align: right; }
+        .skill .next.max { color: #5fd08a; }
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.gap { margin-right: 18dp; }
+        .big-num { font-family: "IBM Plex Mono"; font-size: 30dp; color: #f2b13c; margin: 6dp 0 14dp 0; }
+        .namefield { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
+        .namefield .label { margin-right: 10dp; }
+        .namefield input.text { flex: 1; }
+        .xp { margin-left: auto; }
+    </style>
+</head>
+<body class="window medium" data-model="player">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_player.3db"/><span class="title">PLAYER</span>
+        <span class="spacer"></span>
+        <span class="chip">XP <span class="v">{{ xp }}</span></span>
+        <span class="chip">Bank <span class="v">{{ balance }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="nav">
+            <div class="item" data-class-active="page == 0" data-action="page" data-arg="0"><img class="ico" src="3db:INTERFACE/REM/IMAGES/stat_kill_icon_total.3db"/><span>Statistics</span></div>
+            <div class="item" data-class-active="page == 1" data-action="page" data-arg="1"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_rank.3db"/><span>Skills</span></div>
+            <div class="item" data-class-active="page == 2" data-action="page" data-arg="2"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/><span>Account bank</span></div>
+        </div>
+        <div class="content">
+            <div data-if="page == 0">
+                <h3 style="margin-bottom: 10dp;">Statistics</h3>
+                <div class="grid">
+                    <div class="stat" data-for="s : stats"><img class="stat-ico" data-attr-src="s.icon"/><div class="sv"><div class="k">{{ s.label }}</div><div class="v">{{ s.value }}</div></div></div>
+                </div>
+            </div>
+
+            <div class="colm" data-if="page == 1">
+                <div class="win-head" style="padding: 0 0 10dp 0; border-bottom-width: 0;"><h3>Skills</h3><span class="hint xp">Level up with your experience points</span></div>
+                <div class="skill" data-for="k : skills" data-class-selected="k.selected" data-action="skill" data-attr-data-arg="k.key">
+                    <span class="n">{{ k.name }}</span>
+                    <span class="lvl">{{ k.level }} / 10</span>
+                    <div class="bar"><div class="fill" data-style-width="k.percent + '%'"></div></div>
+                    <span class="next" data-class-max="k.max">{{ k.next }}</span>
+                </div>
+                <div class="hint" style="margin: 6dp 0 10dp 0;">{{ skill_info }}</div>
+                <div class="actions"><div class="btn primary" data-action="levelup">Level up<div class="tip">Spends the experience points shown beside the skill on its next level.</div></div></div>
+            </div>
+
+            <div class="split" data-if="page == 2">
+                <div class="colm gap">
+                    <h3>Account balance</h3>
+                    <div class="big-num">{{ balance }}</div>
+                    <div class="hint" data-if="bank_note != ''">{{ bank_note }}</div>
+                    <div class="namefield"><span class="label">Amount</span><input class="text" type="text" data-value="amount" maxlength="13"/></div>
+                    <div class="actions">
+                        <div class="btn primary" data-action="deposit">Deposit<div class="tip">Moves the amount from your ship's credits into the account.</div></div>
+                        <div class="btn primary" data-action="withdraw">Withdraw<div class="tip">Moves the amount from the account to your ship's credits.</div></div>
+                    </div>
+                    <div class="hint">Deposit and withdraw move credits between your ship and the account. The account is shared by your characters.</div>
+                </div>
+                <div class="colm">
+                    <h3 style="margin-bottom: 8dp;">Send to</h3>
+                    <div class="table" style="flex: 1;">
+                        <div class="body">
+                            <div class="empty" data-if="recipients.size == 0">Nobody online.</div>
+                            <div class="row" data-for="r : recipients" data-class-selected="r.selected" data-action="recipient" data-attr-data-arg="r.name"><span class="c1">{{ r.name }}</span></div>
+                        </div>
+                    </div>
+                    <div class="actions" style="margin-top: 10dp;"><div class="btn primary" data-action="send">Send amount<div class="tip">Sends the amount from your account to the picked pilot's account.</div></div></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/playerinfo.rml

@@ -0,0 +1,70 @@
+<rml>
+<head>
+    <title>Player status</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.side { flex: 0 0 42%; margin-right: 18dp; overflow-y: auto; }
+        .grid { display: block; margin-bottom: 8dp; }
+        .stat { display: inline-block; box-sizing: border-box; width: 48%; margin: 0 2% 8dp 0; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 8dp 12dp; }
+        .stat .k { font-family: "Saira SemiCondensed"; font-size: 12dp; letter-spacing: 1.1dp; text-transform: uppercase; color: #8197ad; }
+        .stat .v { font-family: "IBM Plex Mono"; font-size: 17dp; margin-top: 2dp; }
+        .list { flex: 1; overflow-y: auto; }
+        .faction { display: flex; flex-direction: row; align-items: center; padding: 7dp 10dp; margin-bottom: 5dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; }
+        .faction:hover { border-color: #5cc8f0; }
+        .faction.selected { border-color: #f2b13c; }
+        .faction.own .n { color: #f2b13c; }
+        .faction .n { width: 40%; font-size: 14dp; }
+        .faction .rep { flex: 1; display: flex; flex-direction: row; height: 6dp; margin: 0 12dp; }
+        .faction .half { width: 50%; height: 6dp; background-color: #00000066; display: flex; flex-direction: row; }
+        .faction .half.l { justify-content: flex-end; border-right: 1dp #8197ad; }
+        .faction .neg { height: 6dp; background-color: #ef6a5b; }
+        .faction .pos { height: 6dp; background-color: #5fd08a; }
+        .faction .s { width: 90dp; text-align: right; font-size: 12dp; color: #8197ad; font-family: "Saira SemiCondensed"; text-transform: uppercase; letter-spacing: 1dp; }
+        .card { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+    </style>
+</head>
+<body class="window medium" data-model="playerinfo">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/stat_rating_icon.3db"/>
+        <span class="title">PLAYER STATUS</span>
+        <span class="spacer"></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="hint" data-if="!received">Waiting for the server...</div>
+            <div class="split" data-if="received">
+                <div class="colm side">
+                    <h3 style="margin-bottom: 8dp;">Career</h3>
+                    <div class="grid"><div class="stat" data-for="s : stats"><div class="k">{{ s.label }}</div><div class="v">{{ s.value }}</div></div></div>
+                    <h3 style="margin-bottom: 8dp;">Kills</h3>
+                    <div class="grid"><div class="stat" data-for="s : kills"><div class="k">{{ s.label }}</div><div class="v">{{ s.value }}</div></div></div>
+                </div>
+                <div class="colm">
+                    <div data-if="!has_card" class="colm">
+                        <h3 style="margin-bottom: 8dp;">Reputation</h3>
+                        <div class="list">
+                            <div class="hint" data-if="factions.size == 0">You have met no factions yet.</div>
+                            <div class="faction" data-for="f : factions" data-class-own="f.own" data-class-selected="f.selected" data-action="faction" data-attr-data-arg="f.key">
+                                <span class="n">{{ f.name }}</span>
+                                <div class="rep">
+                                    <div class="half l"><div class="neg" data-style-width="(f.left * 2) + '%'"></div></div>
+                                    <div class="half"><div class="pos" data-style-width="(f.right * 2) + '%'"></div></div>
+                                </div>
+                                <span class="s">{{ f.standing }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div data-if="has_card" class="colm">
+                        <div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp;"><h3>{{ card_title }}</h3><div class="btn" style="margin: 0 0 0 auto;" data-action="card-close">Back</div></div>
+                        <div class="card">{{ card }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
+</body>
+</rml>

EXE/remui/pm.rml

@@ -0,0 +1,41 @@
+<rml>
+<head>
+    <title>Private message</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        body.window.pmwin { left: auto; right: 250dp; top: auto; bottom: 360dp; width: 480dp; height: 440dp; }
+        #pmhist { flex: 1; overflow-y: auto; padding: 10dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .ln { margin: 4dp 0; display: block; }
+        .ln .b { display: block; width: 80%; padding: 6dp 10dp; border-radius: 6dp; background-color: #122033; font-size: 15dp; line-height: 1.3; text-align: left; }
+        .ln.mine .b { margin-left: auto; }
+        .ln.mine .tm { text-align: right; }
+        .ln.mine .b { background-color: #f2b13c1f; border: 1dp #f2b13c55; }
+        .ln .tm { display: block; font-family: "IBM Plex Mono"; font-size: 10dp; color: #8197ad; margin: 1dp 4dp; }
+        .send { display: flex; flex-direction: row; margin-top: 10dp; }
+        .send input.text { flex: 1; margin: 0 8dp 0 0; }
+    </style>
+</head>
+<body class="window pmwin" data-model="pm">
+    <div class="win-head">
+        <span class="title" style="font-size: 18dp;">{{ name }}</span>
+        <span class="loc">private</span>
+        <span class="spacer"></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content" style="display: flex; flex-direction: column; padding: 12dp;">
+            <div id="pmhist">
+                <div class="hint" data-if="lines.size == 0">No messages yet.</div>
+                <div class="ln" data-for="l : lines" data-class-mine="l.mine">
+                    <div class="b" data-rml="l.rml"></div>
+                    <span class="tm">{{ l.time }}</span>
+                </div>
+            </div>
+            <div class="send">
+                <input class="text" type="text" data-value="edit" maxlength="200"/>
+                <div class="btn primary" data-action="send">Send</div>
+            </div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/pmdock.rml

@@ -0,0 +1,28 @@
+<rml>
+<head>
+    <title>Messages</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* the open conversations docked at the right edge, above the HUD's right panel */
+        body.pmdock { position: absolute; right: 16dp; bottom: 360dp; width: 220dp; height: 300dp; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-end; }
+        .tab { display: flex; flex-direction: row; align-items: center; margin-top: 6dp; padding: 7dp 10dp; background-color: #070b12eb; border: 2dp #3d6d96; border-left: 4dp #87c3e0; border-radius: 4dp; }
+        .tab:hover { background-color: #122033; }
+        .tab.open { border-color: #f2b13c; }
+        .tab .ic { font-size: 15dp; margin-right: 8dp; color: #87c3e0; }
+        .tab .n { flex: 1; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 15dp; white-space: nowrap; overflow: hidden; }
+        .tab .u { min-width: 20dp; height: 20dp; line-height: 20dp; text-align: center; border-radius: 10dp; background-color: #ef6a5b; color: #ffffff; font-size: 12dp; margin-right: 6dp; }
+        .tab .x { color: #8197ad; padding: 0 4dp; }
+        .tab .x:hover { color: #ef6a5b; }
+        .tab.new { animation: 1.2s sine-in-out infinite pulse; }
+        @keyframes pulse { 0% { border-left-color: #87c3e0; } 50% { border-left-color: #f2b13c; } 100% { border-left-color: #87c3e0; } }
+    </style>
+</head>
+<body class="pmdock" data-model="pmdock">
+    <div class="tab" data-for="t : tabs" data-class-open="t.open" data-class-new="t.unread > 0" data-action="open" data-attr-data-arg="t.key">
+        <span class="ic">PM</span>
+        <span class="n">{{ t.name }}</span>
+        <span class="u" data-if="t.unread > 0">{{ t.unread }}</span>
+        <span class="x" data-action="close" data-attr-data-arg="t.key">&#215;</span>
+    </div>
+</body>
+</rml>

EXE/remui/rem.rcss

@@ -0,0 +1,443 @@
+/* REM: the modern UI's design (docs/rem/ui-modern.md, "Design") -- shared by every window.
+   RmlUi has no CSS variables: the tokens are written out, keep them in step with the table.
+     space   #070b12   page ground behind full-screen pages
+     glass   #0d1622   window fill (slightly see-through: #0d1622eb)
+     glass2  #122033   rows, fields, cards
+     line    #24405c   quiet lines (FL wire blue)
+     linehi  #3d6d96   window and button frames
+     text    #dbe6f0   muted  #8197ad
+     amber   #f2b13c   active / selected      cyan  #5cc8f0  hover, focus
+     good    #5fd08a   warn   #f2b13c         bad   #ef6a5b
+   Fonts: Saira SemiCondensed (headings, buttons, tabs), Barlow (text), IBM Plex Mono (numbers). */
+
+/* RmlUi has no browser defaults: the block elements are set here */
+div, p, h1, h2, h3, h4, section, header, footer, ul, li, form { display: block; }
+strong, b { font-weight: bold; }
+.btn, .close, .chip, .state, .key { display: inline-block; }
+em, i { font-style: italic; }
+
+body
+{
+    font-family: Barlow;
+    font-weight: 500; /* Barlow Medium: the regular cut reads thin at high resolutions */
+    font-size: 15dp;
+    color: #dbe6f0;
+}
+
+/* ---------------------------------------------------------------- window frame */
+
+body.window
+{
+    position: absolute;
+    left: 9%;
+    top: 7%;
+    width: 82%;
+    height: 86%;
+    max-width: 1680dp;
+    background-color: #0d1622eb;
+    border: 2dp #3d6d96;
+    border-radius: 4dp;
+    display: flex;
+    flex-direction: column;
+}
+
+/* a window opens with a short fade and lift (the host sets .rem-in for one frame) */
+/* the transform only while the window moves in (.rem-anim): a transformed window's scrolled
+   content is not clipped by the renderer (no clip mask), so a resting window has none */
+body.window { opacity: 1; transition: opacity transform 0.22s cubic-out; }
+body.window.rem-anim { transform: translateY(0dp) scale(1); }
+body.window.rem-in { opacity: 0; transform: translateY(14dp) scale(0.985); }
+/* after a bar icon flew to the middle: the window grows out of it */
+body.window.rem-in.rem-zoom { opacity: 0; transform: translateY(0dp) scale(0.3); }
+
+/* a smaller window (player, contracts, waypoints) */
+body.window.medium { left: 18%; top: 12%; width: 64%; height: 76%; max-width: 1300dp; }
+body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900dp; }
+
+.win-head
+{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 12dp 18dp;
+    border-bottom: 1dp #24405c;
+    drag: drag; /* the grip: a window moves by its head (rem_ui_host.cpp, rem.ini win_<name>) */
+    cursor: move;
+}
+.win-head .title
+{
+    font-family: "Saira SemiCondensed";
+    font-weight: 600;
+    font-size: 21dp;
+    letter-spacing: 1.2dp;
+    margin-right: 16dp;
+}
+.win-head .loc { color: #8197ad; font-size: 15dp; }
+.win-head .spacer { flex: 1; }
+.chip
+{
+    font-family: "Saira SemiCondensed";
+    font-size: 14dp;
+    letter-spacing: 0.6dp;
+    color: #8197ad;
+    padding: 2dp 11dp;
+    border: 2dp #3d6d96;
+    border-radius: 11dp;
+    margin-left: 10dp;
+}
+.chip .v { font-family: "IBM Plex Mono"; color: #dbe6f0; }
+.close
+{
+    width: 28dp;
+    height: 28dp;
+    line-height: 26dp;
+    text-align: center;
+    margin-left: 14dp;
+    border: 2dp #3d6d96;
+    border-radius: 3dp;
+    color: #8197ad;
+    font-size: 17dp;
+}
+.close:hover { color: #5cc8f0; border-color: #5cc8f0; }
+
+.win-main
+{
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    min-height: 0;
+}
+
+.nav
+{
+    width: 200dp;
+    border-right: 1dp #24405c;
+    padding: 10dp 0;
+    display: flex;
+    flex-direction: column;
+}
+.nav .item
+{
+    font-family: "Saira SemiCondensed";
+    font-size: 16dp;
+    letter-spacing: 1.1dp;
+    text-transform: uppercase;
+    color: #8197ad;
+    padding: 9dp 18dp;
+    border-left: 2dp #00000000;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.nav .item .badge
+{
+    margin-left: auto;
+    font-family: "IBM Plex Mono";
+    font-size: 11dp;
+    color: #dbe6f0;
+    background-color: #24405c;
+    border-radius: 3dp;
+    padding: 0 5dp;
+}
+.nav .item:hover { color: #5cc8f0; background-color: #122033; }
+.nav .item img.ico { width: 20dp; height: 20dp; margin-right: 10dp; opacity: 0.7; }
+.nav .item:hover img.ico, .nav .item.active img.ico { opacity: 1; }
+.win-head img.head-ico { width: 26dp; height: 26dp; margin-right: 10dp; image-color: #f2b13c; }
+.nav .item.active { color: #f2b13c; border-left-color: #f2b13c; background-color: #122033; }
+.nav .sep { height: 1dp; background-color: #24405c; margin: 8dp 18dp; }
+
+.content
+{
+    flex: 1;
+    padding: 18dp;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.win-foot
+{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-top: 1dp #24405c;
+    padding: 8dp 18dp;
+    font-size: 13dp;
+    color: #8197ad;
+}
+.win-foot .key
+{
+    font-family: "IBM Plex Mono";
+    font-size: 11dp;
+    color: #dbe6f0;
+    border: 2dp #3d6d96;
+    border-radius: 3dp;
+    padding: 0 4dp;
+    margin-right: 5dp;
+}
+.win-foot .hint { margin-right: 18dp; }
+.win-foot .status { margin-left: auto; color: #dbe6f0; }
+
+/* ---------------------------------------------------------------- headings, text */
+
+h3, .label
+{
+    font-family: "Saira SemiCondensed";
+    font-size: 14dp;
+    letter-spacing: 1.2dp;
+    text-transform: uppercase;
+    color: #8197ad;
+}
+.muted { color: #8197ad; }
+.hint { font-size: 13dp; color: #8197ad; }
+.num { font-family: "IBM Plex Mono"; }
+.big
+{
+    font-family: "Saira SemiCondensed";
+    font-weight: 600;
+    font-size: 27dp;
+}
+.kind
+{
+    font-family: "Saira SemiCondensed";
+    letter-spacing: 1dp;
+    text-transform: uppercase;
+    color: #8197ad;
+}
+
+/* ---------------------------------------------------------------- state chips, bars */
+
+.state
+{
+    font-family: "Saira SemiCondensed";
+    font-size: 12dp;
+    letter-spacing: 0.8dp;
+    text-transform: uppercase;
+    padding: 1dp 7dp;
+    border-width: 1dp;
+    border-radius: 2dp;
+}
+.st-good { color: #5fd08a; border-color: #5fd08a; }
+.st-warn { color: #f2b13c; border-color: #f2b13c; }
+.st-bad { color: #ef6a5b; border-color: #ef6a5b; }
+.st-idle { color: #8197ad; border-color: #8197ad; }
+
+.bar { height: 4dp; background-color: #00000066; border-radius: 2dp; }
+.bar .fill { height: 4dp; border-radius: 2dp; background-color: #5fd08a; }
+.bar .fill.warn { background-color: #f2b13c; }
+.bar .fill.bad { background-color: #ef6a5b; }
+
+/* ---------------------------------------------------------------- buttons */
+
+.btn
+{
+    font-family: "Saira SemiCondensed";
+    font-size: 14dp;
+    letter-spacing: 1.1dp;
+    text-transform: uppercase;
+    color: #dbe6f0;
+    background-color: #122033;
+    border: 2dp #3d6d96;
+    border-radius: 3dp;
+    padding: 7dp 16dp;
+    margin-right: 8dp;
+    margin-bottom: 8dp;
+    position: relative;
+    transition: color border-color 0.12s;
+}
+.btn:hover { color: #5cc8f0; border-color: #5cc8f0; }
+.btn:active { background-color: #1a2d47; }
+.btn.primary { color: #f2b13c; border-color: #f2b13c; }
+.btn.primary:hover { color: #5cc8f0; border-color: #5cc8f0; }
+.btn.danger { color: #ef6a5b; border-color: #7a3f3e; }
+.btn.armed { color: #160604; background-color: #ef6a5b; border-color: #ef6a5b; }
+.btn.disabled { color: #8197ad66; border-color: #24405c; }
+.btn .small { font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; text-transform: none; letter-spacing: 0; margin-left: 6dp; }
+
+/* a tooltip: a .tip child, shown while the button is hovered */
+.tip
+{
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    margin-top: 8dp;
+    width: 260dp;
+    z-index: 10;
+    font-family: Barlow;
+    font-size: 13dp;
+    text-transform: none;
+    letter-spacing: 0;
+    color: #dbe6f0;
+    background-color: #05090f;
+    border: 2dp #3d6d96;
+    border-radius: 3dp;
+    padding: 6dp 9dp;
+}
+.btn:hover .tip { display: block; }
+
+.actions { display: flex; flex-direction: row; flex-wrap: wrap; }
+
+/* ---------------------------------------------------------------- tabs inside a page */
+
+.subtabs
+{
+    display: flex;
+    flex-direction: row;
+    border-bottom: 1dp #24405c;
+    margin-bottom: 12dp;
+}
+.subtabs .tab
+{
+    font-family: "Saira SemiCondensed";
+    font-size: 14dp;
+    letter-spacing: 1.2dp;
+    text-transform: uppercase;
+    color: #8197ad;
+    padding: 7dp 14dp;
+    border-bottom: 2dp #00000000;
+}
+.subtabs .tab:hover { color: #5cc8f0; }
+.subtabs .tab.active { color: #f2b13c; border-bottom-color: #f2b13c; }
+
+/* ---------------------------------------------------------------- lists and tables */
+
+.scroll { overflow-y: auto; }
+scrollbarvertical { width: 8dp; margin-left: 4dp; }
+scrollbarvertical slidertrack { background-color: #0d1622; border-radius: 4dp; }
+scrollbarvertical sliderbar { background-color: #3d6d96; border-radius: 4dp; min-height: 24dp; }
+scrollbarvertical sliderbar:hover { background-color: #5cc8f0; }
+scrollbarvertical sliderarrowdec, scrollbarvertical sliderarrowinc { height: 0; }
+
+input.text
+{
+    box-sizing: border-box;
+    width: 100%;
+    padding: 7dp 10dp;
+    border: 2dp #24405c;
+    border-radius: 3dp;
+    background-color: #122033;
+    color: #dbe6f0;
+    font-size: 14dp;
+    cursor: text;
+}
+input.text:focus { border-color: #5cc8f0; }
+input.text .placeholder, input.text:placeholder { color: #8197ad; }
+
+.table
+{
+    border: 2dp #24405c;
+    border-radius: 3dp;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+.table .head, .table .row
+{
+    display: flex;
+    flex-direction: row;
+    padding: 6dp 10dp;
+}
+.table .head
+{
+    font-family: "Saira SemiCondensed";
+    font-size: 12dp;
+    letter-spacing: 1.2dp;
+    text-transform: uppercase;
+    color: #8197ad;
+    background-color: #0d1622;
+    border-bottom: 1dp #24405c;
+}
+.table .body { flex: 1; overflow-y: auto; }
+.table .row { font-size: 14dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
+.table .row:hover { background-color: #122033; }
+.table .row.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
+.table .row.current .c1 { color: #f2b13c; }
+.table .c1 { flex: 1; }
+.table .c2 { width: 30%; }
+.table .c3 { width: 70dp; text-align: right; font-family: "IBM Plex Mono"; }
+.table .c4 { width: 120dp; text-align: right; font-family: "IBM Plex Mono"; margin-right: 16dp; }
+.table .head .c3, .table .head .c4 { font-family: "Saira SemiCondensed"; }
+
+/* the amount slider (as Freelancer's quantity slider at the dealers) */
+input.range { flex: 1; height: 18dp; }
+input.range slidertrack { height: 4dp; margin-top: 7dp; background-color: #24405c; border-radius: 2dp; }
+input.range sliderbar { width: 14dp; height: 18dp; background-color: #f2b13c; border-radius: 3dp; }
+input.range sliderbar:hover { background-color: #5cc8f0; }
+input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 0; }
+.table .empty { padding: 12dp 10dp; color: #8197ad; }
+
+/* ---------------------------------------------------------------- cards, stats */
+
+.stats
+{
+    display: flex;
+    flex-direction: row;
+    border: 2dp #24405c;
+    border-radius: 3dp;
+    margin-bottom: 12dp;
+}
+.stats .cell { flex: 1; padding: 8dp 12dp; border-right: 1dp #24405c; }
+.stats .cell.last { border-right-width: 0; }
+.stats .k
+{
+    font-family: "Saira SemiCondensed";
+    font-size: 12dp;
+    letter-spacing: 1.1dp;
+    text-transform: uppercase;
+    color: #8197ad;
+}
+.stats .v { font-family: "IBM Plex Mono"; font-size: 16dp; }
+
+.cards { display: flex; flex-direction: row; margin-bottom: 12dp; }
+.card
+{
+    flex: 1;
+    border: 2dp #24405c;
+    border-radius: 3dp;
+    background-color: #122033;
+    padding: 12dp;
+    margin-right: 10dp;
+}
+.card.last { margin-right: 0; }
+.card .t
+{
+    font-family: "Saira SemiCondensed";
+    font-size: 16dp;
+    letter-spacing: 1dp;
+    text-transform: uppercase;
+}
+.card .p { font-family: "IBM Plex Mono"; color: #f2b13c; margin: 4dp 0; }
+.card .d { font-size: 13dp; color: #8197ad; margin-bottom: 10dp; }
+
+.blocked
+{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #8197ad;
+}
+.blocked .t { font-family: "Saira SemiCondensed"; font-size: 22dp; color: #dbe6f0; margin-bottom: 6dp; }
+
+/* the running light along an open window's frame (FL's windows have one): four strips the host
+   adds to every body.window (rem_ui_host.cpp), each lit in turn -- top left to right, right top
+   to bottom, bottom right to left, left bottom to top */
+@keyframes run-top { 0% { left: 0%; opacity: 0; } 2% { opacity: 1; } 23% { opacity: 1; } 25% { left: 76%; opacity: 0; } 100% { left: 76%; opacity: 0; } }
+@keyframes run-right { 0% { top: 0%; opacity: 0; } 25% { top: 0%; opacity: 0; } 27% { opacity: 1; } 48% { opacity: 1; } 50% { top: 76%; opacity: 0; } 100% { top: 76%; opacity: 0; } }
+@keyframes run-bottom { 0% { left: 76%; opacity: 0; } 50% { left: 76%; opacity: 0; } 52% { opacity: 1; } 73% { opacity: 1; } 75% { left: 0%; opacity: 0; } 100% { left: 0%; opacity: 0; } }
+@keyframes run-left { 0% { top: 76%; opacity: 0; } 75% { top: 76%; opacity: 0; } 77% { opacity: 1; } 98% { opacity: 1; } 100% { top: 0%; opacity: 0; } }
+.runner { position: absolute; left: -1dp; top: -1dp; right: -1dp; bottom: -1dp; pointer-events: none; }
+.runner .rt, .runner .rr, .runner .rb, .runner .rl { position: absolute; opacity: 0; }
+.runner .rt { top: 0; height: 3dp; width: 24%; left: 0%; decorator: horizontal-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-top; }
+.runner .rr { right: 0; width: 3dp; height: 24%; top: 0%; decorator: vertical-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-right; }
+.runner .rb { bottom: 0; height: 3dp; width: 24%; left: 76%; decorator: horizontal-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-bottom; }
+.runner .rl { left: 0; width: 3dp; height: 24%; top: 76%; decorator: vertical-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-left; }
+.runner .rt { top: 0; height: 3dp; width: 24%; left: -24%; decorator: horizontal-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-top; }
+.runner .rr { right: 0; width: 3dp; height: 24%; top: -24%; decorator: vertical-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-right; }
+.runner .rb { bottom: 0; height: 3dp; width: 24%; left: 100%; decorator: horizontal-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-bottom; }
+.runner .rl { left: 0; width: 3dp; height: 24%; top: 100%; decorator: vertical-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-left; }
+
+/* a hovered bar icon turning (nnbar, rembar) */
+@keyframes nb-spin { from { transform: perspective(240dp) rotateY(0deg) scale(1.12); } to { transform: perspective(240dp) rotateY(360deg) scale(1.12); } }

EXE/remui/rembar.rml

@@ -0,0 +1,30 @@
+<rml>
+<head>
+    <title>REM bar</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* only as big as the bar, at the top left: the mouse beside it goes to the game */
+        body.nnstrip { position: absolute; left: 8dp; top: 4dp; width: 400dp; height: 60dp; display: block; background-color: transparent; pointer-events: none; }
+        .nnbar { pointer-events: auto; position: absolute; top: 0; left: 0; display: flex; flex-direction: row; align-items: center; padding: 3dp 4dp; background-color: #070b12e6; border: 2dp #3d6d96; border-radius: 4dp; }
+        .nb { width: 40dp; padding: 3dp 5dp; margin: 0 1dp; border: 1dp #00000000; border-radius: 3dp; position: relative; }
+        .nb:hover { border-color: #5cc8f0; background-color: #122033; }
+        .nb.active { border-color: #f2b13c; background-color: #f2b13c1f; }
+        .nb img { width: 30dp; height: 30dp; display: block; image-color: #8fb8d8; }
+        .nb:hover img { image-color: #5cc8f0; animation: 1.6s linear infinite nb-spin; }
+        /* REM: as FL's NeuroNet icons, the hovered one turns about its upright axis */
+        .nb { transition: background-color border-color 0.15s cubic-out; }
+        .nb img { transform: perspective(240dp) rotateY(0deg) scale(1); transition: transform 0.2s cubic-out; }
+        .nb.active img { image-color: #f2b13c; }
+        .nb .tip { top: 40dp; left: 0; right: auto; bottom: auto; width: 230dp; white-space: normal; }
+        .nb:hover .tip { display: block; }
+    </style>
+</head>
+<body class="nnstrip" data-model="rembar">
+    <div class="nnbar" data-if="shown" data-style-width="icons.size * 42 + 12 + 'dp'">
+        <div class="nb" data-for="i : icons" data-class-active="i.active" data-action="nn" data-attr-data-arg="i.cmd">
+            <img data-attr-src="i.icon"/>
+            <div class="tip" data-if="i.label != ''">{{ i.label }}</div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/repair.rml

@@ -0,0 +1,63 @@
+<rml>
+<head>
+    <title>Repair</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .colm { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+        .item { display: flex; flex-direction: row; align-items: center; padding: 8dp 10dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; }
+        .item:hover { border-color: #5cc8f0; }
+        .item.selected { border-left-color: #f2b13c; }
+        .item .check { width: 16dp; height: 16dp; border: 2dp #3d6d96; border-radius: 3dp; margin-right: 12dp; }
+        .item.selected .check { background-color: #f2b13c; border-color: #f2b13c; }
+        .item img { width: 34dp; height: 34dp; margin-right: 12dp; }
+        .item .mid { flex: 1; min-width: 0; }
+        .item .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; margin-bottom: 5dp; }
+        .item .hp { font-family: "IBM Plex Mono"; color: #8197ad; width: 60dp; text-align: right; margin-right: 14dp; }
+        .item .cost { font-family: "IBM Plex Mono"; color: #f2b13c; width: 130dp; text-align: right; }
+        .list { flex: 1; overflow-y: auto; }
+        .sum { display: flex; flex-direction: row; align-items: center; border-top: 1dp #24405c; padding-top: 12dp; margin-top: 8dp; }
+        .sum .k { font-family: "Saira SemiCondensed"; letter-spacing: 1.1dp; text-transform: uppercase; color: #8197ad; margin-right: 10dp; }
+        .sum .v { font-family: "IBM Plex Mono"; font-size: 20dp; color: #f2b13c; margin-right: 24dp; }
+        .sum .btn { margin: 0 0 0 auto; }
+        .warn { color: #ef6a5b; margin-right: 14dp; }
+    </style>
+</head>
+<body class="window small" data-model="repair">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_construction.3db"/>
+        <span class="title">REPAIR</span>
+        <span class="spacer"></span>
+        <span class="chip">Credits <span class="v">{{ credits }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="colm">
+                <div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp;"><h3>What needs repair</h3><div class="btn" style="margin: 0 0 0 auto;" data-action="all">All / none</div></div>
+                <div class="list">
+                    <div class="hint" data-if="rows.size == 0">Your ship is in perfect shape.</div>
+                    <div class="item" data-for="r : rows" data-class-selected="r.selected" data-action="toggle" data-attr-data-arg="r.key">
+                        <div class="check"></div>
+                        <img data-attr-src="r.icon"/>
+                        <div class="mid">
+                            <div class="n">{{ r.name }}</div>
+                            <div class="bar"><div class="fill" data-class-warn="r.health &lt; 75" data-class-bad="r.health &lt; 40" data-style-width="r.health + '%'"></div></div>
+                        </div>
+                        <span class="hp">{{ r.health }} %</span>
+                        <span class="cost">{{ r.cost }}</span>
+                    </div>
+                </div>
+                <div class="sum">
+                    <span class="k">Total</span><span class="v">{{ total }}</span>
+                    <span class="warn" data-if="too_much">Not enough credits</span>
+                    <div class="btn primary" data-class-disabled="too_much || nothing" data-action="repair">Repair<div class="tip">Repairs the checked parts and pays the total.</div></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/scanner.rml

@@ -0,0 +1,59 @@
+<rml>
+<head>
+    <title>Scanner</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.view { flex: 0 0 40%; margin-right: 18dp; }
+        .colm.list { flex: 1; }
+        #ship { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
+        .ship-name { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; margin-bottom: 6dp; }
+        .items { flex: 1; overflow-y: auto; }
+        .grp { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 8dp 0 6dp 0; }
+        .item { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; }
+        .item img { width: 30dp; height: 30dp; margin-right: 10dp; }
+        .item .n { flex: 1; min-width: 0; font-size: 14dp; }
+        .item .x { font-family: "IBM Plex Mono"; font-size: 12dp; color: #ef6a5b; margin-right: 10dp; }
+        .item .c { font-family: "IBM Plex Mono"; width: 50dp; text-align: right; color: #8197ad; }
+        .item .v { font-family: "IBM Plex Mono"; width: 110dp; text-align: right; color: #f2b13c; }
+    </style>
+</head>
+<body class="window medium" data-model="scanner">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
+        <span class="title">SCAN</span>
+        <span class="spacer"></span>
+        <span class="chip">Value <span class="v">{{ total }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="colm view">
+                    <div class="ship-name">{{ ship }}</div>
+                    <div id="ship"></div>
+                </div>
+                <div class="colm list">
+                    <div class="items">
+                        <div class="grp">Cargo ({{ cargo.size }})</div>
+                        <div class="hint" data-if="cargo.size == 0">The hold is empty.</div>
+                        <div class="item" data-for="i : cargo">
+                            <img data-if="i.icon != ''" data-attr-src="i.icon"/><span class="n">{{ i.name }}</span>
+                            <span class="x" data-if="i.note != ''">{{ i.note }}</span><span class="c">{{ i.count }}</span><span class="v">{{ i.value }}</span>
+                        </div>
+                        <div class="grp">Mounted ({{ mounted.size }})</div>
+                        <div class="item" data-for="i : mounted">
+                            <img data-if="i.icon != ''" data-attr-src="i.icon"/><span class="n">{{ i.name }}</span>
+                            <span class="x" data-if="i.note != ''">{{ i.note }}</span><span class="c">{{ i.count }}</span><span class="v">{{ i.value }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+    </div>
+</body>
+</rml>

EXE/remui/serverlist.rml

@@ -0,0 +1,83 @@
+<rml>
+<head>
+    <title>Servers</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; margin-top: 10dp; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.side { flex: 0 0 34%; margin-left: 18dp; }
+        .bar { display: flex; flex-direction: row; align-items: center; min-height: 36dp; margin-bottom: 6dp; }
+        .bar .search { flex: 1; margin-right: 10dp; min-width: 0; }
+        .bar .search input.text { display: block; width: 100%; }
+        .bar .chip { margin-left: 6dp; }
+        .chip.on { border-color: #f2b13c; color: #f2b13c; }
+        .table .c1 img { width: 14dp; height: 14dp; margin-left: 6dp; }
+        .table .c2 { width: 26%; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; }
+        .table .c3 { width: 90dp; }
+        .table .c4 { width: 80dp; margin-right: 0; }
+        .table .head span { cursor: pointer; }
+        .table .head span:hover { color: #5cc8f0; }
+        .table .head span.sorted { color: #f2b13c; }
+        .table .row.old { color: #5d6e80; }
+        .table .row.full .c3 { color: #e05a4f; }
+        .table .row .tag { font-family: "IBM Plex Mono"; font-size: 11dp; color: #5cc8f0; margin-left: 8dp; }
+        .facts { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; color: #8197ad; margin-bottom: 10dp; }
+        .desc { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .pick-name { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; margin-bottom: 6dp; }
+    </style>
+</head>
+<body class="window" data-model="serverlist">
+    <div class="win-head">
+        <span class="title">{{ title }}</span>
+        <span class="spacer"></span>
+        <span class="chip">Shown <span class="v">{{ rows.size }}</span> / <span class="v">{{ total }}</span></span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="bar">
+                <div class="search"><input class="text" type="text" data-value="search" placeholder="Search name or address" maxlength="48"/></div>
+                <span class="chip" data-class-on="hide_full" data-action="toggle" data-arg="full">Hide full</span>
+                <span class="chip" data-class-on="hide_locked" data-action="toggle" data-arg="locked">Hide locked</span>
+                <span class="chip" data-class-on="known_only" data-action="toggle" data-arg="known">My servers</span>
+            </div>
+            <div class="split">
+                <div class="colm">
+                    <div class="table" style="flex: 1;">
+                        <div class="head">
+                            <span class="c1" data-class-sorted="sort == 1 || sort == -1" data-action="sort" data-arg="1">Server</span>
+                            <span class="c2">Address</span>
+                            <span class="c3" data-class-sorted="sort == 2 || sort == -2" data-action="sort" data-arg="2">Players</span>
+                            <span class="c4" data-class-sorted="sort == 3 || sort == -3" data-action="sort" data-arg="3">Ping</span>
+                        </div>
+                        <div class="body">
+                            <div class="empty" data-if="rows.size == 0">No servers yet. {{ status }}</div>
+                            <div class="row" data-for="r : rows" data-class-selected="r.selected" data-class-old="r.old" data-class-full="r.full" data-action="pick" data-attr-data-arg="r.key">
+                                <span class="c1">{{ r.name }}<span class="tag" data-if="r.locked">LOCK</span><span class="tag" data-if="r.known">CHAR</span></span>
+                                <span class="c2">{{ r.address }}</span>
+                                <span class="c3">{{ r.players }}</span>
+                                <span class="c4">{{ r.ping }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm side">
+                    <div data-if="has_pick">
+                        <div class="pick-name">{{ pick_name }}</div>
+                        <div class="facts">{{ pick_facts }}</div>
+                    </div>
+                    <div class="desc" data-if="has_pick">{{ pick_text }}</div>
+                    <div class="hint" data-if="!has_pick">Pick a server. A double click joins it.</div>
+                    <div class="actions" style="margin-top: 12dp;">
+                        <div class="btn primary" data-class-disabled="!can_connect" data-action="connect">Connect<div class="tip">Joins the picked server; a locked one asks for its password.</div></div>
+                        <div class="btn" data-action="refresh">Refresh<div class="tip">Asks the list server again.</div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <div class="btn" data-action="back">Back</div>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/shipdealer.rml

@@ -0,0 +1,91 @@
+<rml>
+<head>
+    <title>Ship dealer</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.side { flex: 0 0 30%; margin-right: 18dp; }
+        .colm.view { flex: 1; }
+        .colm.facts { flex: 0 0 28%; margin-left: 18dp; }
+        .scard { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; }
+        .scard:hover { border-color: #5cc8f0; }
+        .scard.selected { border-color: #f2b13c; background-color: #f2b13c1a; }
+        .scard.locked .n, .scard.locked .p { color: #8197ad; }
+        .scard img { width: 48dp; height: 48dp; margin-right: 12dp; }
+        .scard .txt { flex: 1; min-width: 0; }
+        .scard .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
+        .scard .k { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
+        .scard .p { font-family: "IBM Plex Mono"; color: #f2b13c; text-align: right; }
+        .scard .lock { font-family: "IBM Plex Mono"; font-size: 11dp; color: #ef6a5b; text-align: right; margin-top: 2dp; }
+        .scard.own { border-left-color: #5cc8f0; }
+        .scard.own .p { color: #5cc8f0; }
+        #ship { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); }
+        .view-head { margin-bottom: 8dp; }
+        .view-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; }
+        .view-head .c { font-size: 13dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; }
+        .info { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 10dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-top: 10dp; }
+        .stat { display: flex; flex-direction: row; padding: 3dp 0; border-bottom: 1dp #ffffff08; font-size: 13dp; }
+        .stat .l { flex: 1; color: #8197ad; }
+        .stat .v { font-family: "IBM Plex Mono"; text-align: right; }
+        .deal { margin-top: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; display: flex; flex-direction: row; align-items: center; }
+        .deal .txt { flex: 1; min-width: 0; }
+        .deal .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
+        .deal .d { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
+        .deal .btn { margin: 0 0 0 14dp; }
+        .why { color: #ef6a5b; margin-left: 14dp; }
+    </style>
+</head>
+<body class="window" data-model="shipdealer">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/>
+        <span class="title">SHIP DEALER</span>
+        <span class="spacer"></span>
+        <span class="chip">Credits <span class="v">{{ credits }}</span></span>
+        <span class="chip">Worth <span class="v">{{ worth }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="colm side">
+                    <h3 style="margin-bottom: 8dp;">For sale here</h3>
+                    <div class="hint" data-if="ships.size == 0">No ships for sale here.</div>
+                    <div class="scard" data-for="r : ships" data-class-selected="r.selected" data-class-locked="r.locked" data-action="pick" data-attr-data-arg="r.key">
+                        <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                        <div class="txt"><div class="n">{{ r.name }}</div><div class="k">{{ r.class }}</div></div>
+                        <div><div class="p">{{ r.price }}</div><div class="lock" data-if="r.lock != ''">{{ r.lock }}</div></div>
+                    </div>
+                    <h3 style="margin: 14dp 0 8dp 0;" data-if="has_own">Your ship</h3>
+                    <div class="scard own" data-if="has_own" data-class-selected="own.selected" data-action="pick" data-arg="-2">
+                        <img data-if="own.icon != ''" data-attr-src="own.icon"/>
+                        <div class="txt"><div class="n">{{ own.name }}</div><div class="k">{{ own.class }}</div></div>
+                        <div><div class="p">{{ own.price }}</div><div class="k" style="text-align: right;">trade-in</div></div>
+                    </div>
+                </div>
+                <div class="colm view">
+                    <div class="view-head" data-if="has_pick"><div class="t">{{ pick_name }}</div><div class="c">{{ pick_class }}</div></div>
+                    <div class="view-head" data-if="!has_pick"><div class="t">Pick a ship</div><div class="c">a second click on a ship buys it</div></div>
+                    <div id="ship"></div>
+                </div>
+                <div class="colm facts">
+                    <h3 style="margin-bottom: 8dp;">Specifications</h3>
+                    <div class="stat" data-for="s : stats"><span class="l">{{ s.label }}</span><span class="v">{{ s.value }}</span></div>
+                    <div class="info">{{ pick_info }}</div>
+                </div>
+            </div>
+            <div class="deal">
+                <div class="txt">
+                    <div class="t">{{ deal_title }}</div>
+                    <div class="d">{{ is_own ? 'It is traded in when you buy a new ship.' : deal }}</div>
+                </div>
+                <span class="why" data-if="why != ''">{{ why }}</span>
+                <div class="btn primary" data-class-disabled="!can_buy" data-action="buy">Buy ship<div class="tip">Goes on to the dealer, where the new ship is bought and your old one traded in. Your cargo moves over.</div></div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+    </div>
+</body>
+</rml>

EXE/remui/storystar.rml

@@ -0,0 +1,36 @@
+<rml>
+<head>
+    <title>Story</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .tabs { display: flex; flex-direction: row; margin-bottom: 10dp; }
+        .tab { padding: 5dp 14dp; margin-right: 6dp; border: 1dp #24405c; border-radius: 12dp; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; }
+        .tab:hover { border-color: #5cc8f0; color: #5cc8f0; }
+        .tab.primary { border-color: #f2b13c; color: #f2b13c; }
+        .story { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .dead { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 26dp; letter-spacing: 3dp; color: #ef6a5b; margin-bottom: 10dp; }
+        .acts { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 12dp; }
+        .acts .btn { margin: 0 8dp 8dp 0; }
+    </style>
+</head>
+<body class="window medium" data-model="storystar">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_storystar.3db"/>
+        <span class="title">{{ dead ? 'SHIP LOST' : 'MISSION LOG' }}</span>
+        <span class="spacer"></span>
+        <span class="close" data-if="can_close" data-action="btn" data-arg="8">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content" style="display: flex; flex-direction: column;">
+            <div class="dead" data-if="dead">Your ship was destroyed.</div>
+            <div class="tabs" data-if="tabs.size &gt; 0">
+                <div class="tab" data-for="t : tabs" data-class-primary="t.primary" data-action="btn" data-attr-data-arg="t.key">{{ t.label }}</div>
+            </div>
+            <div class="story">{{ text }}</div>
+            <div class="acts" data-if="buttons.size &gt; 0">
+                <div class="btn" data-for="b : buttons" data-class-primary="b.primary" data-action="btn" data-attr-data-arg="b.key">{{ b.label }}</div>
+            </div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/tooltip.rml

@@ -0,0 +1,28 @@
+<rml>
+<head>
+    <title>Tool tip</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* no box of its own: only the tip, at the point NN_ToolTip gives */
+        body.tipdoc { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; background-color: transparent; pointer-events: none; }
+        .ftip
+        {
+            position: absolute;
+            max-width: 380dp;
+            padding: 5dp 9dp;
+            background-color: #0d1622f2;
+            border: 2dp #3d6d96;
+            border-left: 2dp #f2b13c;
+            border-radius: 3dp;
+            font-size: 13dp;
+            color: #dbe6f0;
+            white-space: nowrap;
+        }
+        .ftip.roll { border-left-color: #5cc8f0; font-size: 14dp; white-space: pre-line; }
+    </style>
+</head>
+<body class="tipdoc" data-model="tooltip">
+    <div class="ftip" data-if="tip_shown" data-style-left="tip_left" data-style-top="tip_top">{{ tip_text }}</div>
+    <div class="ftip roll" data-if="roll_shown" data-style-left="roll_left" data-style-top="roll_top">{{ roll_text }}</div>
+</body>
+</rml>

EXE/remui/trade.rml

@@ -0,0 +1,87 @@
+<rml>
+<head>
+    <title>Trade</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .cols { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin-right: 14dp; }
+        .col.last { margin-right: 0; }
+        .col h3 { margin-bottom: 6dp; }
+        .state { font-size: 12dp; margin-bottom: 6dp; color: #ef6a5b; }
+        .state.ok { color: #7cf27c; }
+        .lst { flex: 1; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
+        .it { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
+        .it:hover { background-color: #122033; }
+        .it.picked { border-left-color: #f2b13c; background-color: #f2b13c1a; }
+        .it.ro:hover { background-color: transparent; }
+        .it img { width: 28dp; height: 28dp; margin-right: 8dp; }
+        .it .n { flex: 1; min-width: 0; font-size: 14dp; }
+        .it .c { font-family: "IBM Plex Mono"; font-size: 12dp; color: #f2b13c; }
+        .move { margin-top: 12dp; padding: 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #122033; display: flex; flex-direction: row; align-items: center; }
+        .move .t { flex: 1; }
+        .move .t .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
+        .move .t .a { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
+        .move .btn { margin: 0 0 0 6dp; }
+        .foot2 { display: flex; flex-direction: row; align-items: center; margin-top: 12dp; }
+        .foot2 .hint { flex: 1; }
+        .foot2 .btn { margin: 0 0 0 8dp; }
+    </style>
+</head>
+<body class="window" data-model="trade">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
+        <span class="title">TRADE</span>
+        <span class="spacer"></span>
+        <span class="close" data-action="cancel">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content" style="display: flex; flex-direction: column;">
+            <div class="cols">
+                <div class="col">
+                    <h3>They offer</h3>
+                    <div class="state" data-class-ok="they_accept">{{ they_accept ? 'They accepted' : 'Not accepted yet' }}</div>
+                    <div class="lst">
+                        <div class="hint" style="padding: 10dp;" data-if="theirs.size == 0">Nothing offered yet.</div>
+                        <div class="it ro" data-for="i : theirs">
+                            <img data-if="i.icon != ''" data-attr-src="i.icon"/><span class="n">{{ i.name }}</span><span class="c">{{ i.count }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <h3>You offer</h3>
+                    <div class="state" data-class-ok="i_accept">{{ i_accept ? 'You accepted' : 'Not accepted yet' }}</div>
+                    <div class="lst">
+                        <div class="hint" style="padding: 10dp;" data-if="mine.size == 0">Pick from your cargo to offer.</div>
+                        <div class="it" data-for="i : mine" data-class-picked="i.picked" data-action="pickmine" data-attr-data-arg="i.key">
+                            <img data-if="i.icon != ''" data-attr-src="i.icon"/><span class="n">{{ i.name }}</span><span class="c">{{ i.count }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col last">
+                    <h3>Your cargo</h3>
+                    <div class="state" style="color: #8197ad;">Click to offer</div>
+                    <div class="lst">
+                        <div class="it" data-for="i : cargo" data-class-picked="i.picked" data-action="pickcargo" data-attr-data-arg="i.key">
+                            <img data-if="i.icon != ''" data-attr-src="i.icon"/><span class="n">{{ i.name }}</span><span class="c">{{ i.count }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="move" data-if="moving">
+                <div class="t"><div class="n">{{ moving_name }}</div><div class="a">{{ amount_text }}</div></div>
+                <div class="btn" data-action="none">Min</div>
+                <div class="btn" data-action="less">-</div>
+                <div class="btn" data-action="more">+</div>
+                <div class="btn" data-action="all">Max</div>
+                <div class="btn primary" data-action="move">{{ to_offer ? 'Offer' : 'Take back' }}</div>
+                <div class="btn" data-action="back">Cancel</div>
+            </div>
+            <div class="foot2">
+                <span class="hint">Both pilots accept to trade. Any change of an offer resets the acceptance.</span>
+                <div class="btn" data-action="cancel">End trade</div>
+                <div class="btn primary" data-class-disabled="i_accept" data-action="accept">Accept trade</div>
+            </div>
+        </div>
+    </div>
+</body>
+</rml>

EXE/remui/trader.rml

@@ -0,0 +1,87 @@
+<rml>
+<head>
+    <title>Commodity trader</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.gap { margin-right: 18dp; }
+        .col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
+        .col-h .hint { margin-left: auto; }
+        .list { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; }
+        .good { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
+        .good:hover { background-color: #122033; }
+        .good.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
+        .good.disabled .n, .good.disabled .p { color: #8197ad; }
+        .good img { width: 30dp; height: 30dp; margin-right: 10dp; }
+        .good .n { flex: 1; font-size: 15dp; }
+        .good .note { font-size: 12dp; color: #8197ad; margin-right: 10dp; }
+        .good .c { font-family: "IBM Plex Mono"; width: 80dp; text-align: right; color: #8197ad; }
+        .good .p { font-family: "IBM Plex Mono"; width: 110dp; text-align: right; color: #f2b13c; }
+        .deal { margin-top: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; display: flex; flex-direction: row; align-items: center; }
+        .deal img { width: 48dp; height: 48dp; margin-right: 14dp; }
+        .deal .what { width: 260dp; }
+        .deal .what .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
+        .deal .amount { flex: 1; display: flex; flex-direction: row; align-items: center; margin: 0 14dp; }
+        .deal .amount .v { font-family: "IBM Plex Mono"; width: 80dp; text-align: right; margin-left: 10dp; }
+        .deal .sum { font-family: "IBM Plex Mono"; font-size: 18dp; color: #f2b13c; width: 150dp; text-align: right; margin-right: 14dp; }
+        .deal .btn { margin: 0; }
+        .why { color: #ef6a5b; margin-right: 14dp; }
+        .search { margin-bottom: 8dp; }
+    </style>
+</head>
+<body class="window" data-model="trader">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/>
+        <span class="title">COMMODITY TRADER</span>
+        <span class="spacer"></span>
+        <span class="chip">Hold <span class="v">{{ hold }}</span></span>
+        <span class="chip">Credits <span class="v">{{ credits }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="colm gap">
+                    <div class="col-h"><h3>For sale here</h3><span class="hint">{{ market.size }} goods</span></div>
+                    <input class="text search" type="text" data-value="filter" maxlength="40"/>
+                    <div class="list">
+                        <div class="empty hint" style="padding: 10dp;" data-if="market.size == 0">Nothing for sale here.</div>
+                        <div class="good" data-for="r : market" data-class-selected="r.selected" data-action="buy-pick" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/><span class="n">{{ r.name }}</span><span class="c">{{ r.count }}</span><span class="p">{{ r.price }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm">
+                    <div class="col-h"><h3>Your cargo</h3><span class="hint">hold {{ hold }}</span></div>
+                    <div class="list">
+                        <div class="empty hint" style="padding: 10dp;" data-if="cargo.size == 0">Your hold carries no goods.</div>
+                        <div class="good" data-for="r : cargo" data-class-selected="r.selected" data-class-disabled="r.disabled" data-action="sell-pick" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/><span class="n">{{ r.name }}</span><span class="note">{{ r.note }}</span><span class="c">{{ r.count }}</span><span class="p">{{ r.price }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="deal">
+                <img data-if="has_pick &amp;&amp; pick.icon != ''" data-attr-src="pick.icon"/>
+                <div class="what">
+                    <div class="label">{{ side == 0 ? 'Buy' : 'Sell' }}</div>
+                    <div class="t">{{ has_pick ? pick.name : 'Pick a good' }}</div>
+                </div>
+                <div class="amount">
+                    <input class="range" type="range" min="1" step="1" data-attr-max="amount_max" data-value="amount"/>
+                    <span class="v">{{ amount_text }}</span>
+                    <div class="btn" style="margin-left: 10dp; padding: 3dp 10dp;" data-action="max">Max</div>
+                </div>
+                <span class="why" data-if="reason != ''">{{ reason }}</span>
+                <span class="sum">{{ total }}</span>
+                <div class="btn primary" data-class-disabled="!has_pick || reason != ''" data-action="deal">{{ side == 0 ? 'Buy' : 'Sell' }}<div class="tip">{{ side == 0 ? 'Buys the amount into your cargo hold.' : 'Sells the amount from your cargo hold.' }}</div></div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>

EXE/remui/waypoints.rml

@@ -0,0 +1,51 @@
+<rml>
+<head>
+    <title>Waypoints</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .state-line { display: flex; flex-direction: row; margin-bottom: 12dp; }
+        .state-box { flex: 1; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 10dp 12dp; margin-right: 10dp; display: flex; flex-direction: row; align-items: center; }
+        .state-box.last { margin-right: 0; }
+        .state-box img { width: 30dp; height: 30dp; margin-right: 10dp; }
+        .state-box .v { font-family: "Saira SemiCondensed"; font-size: 17dp; }
+        .state-box.on .v { color: #5fd08a; }
+        .row .c1 img { width: 18dp; height: 18dp; margin-right: 8dp; }
+    </style>
+</head>
+<body class="window small" data-model="waypoints">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_waypoints.3db"/>
+        <span class="title">GROUP WAYPOINTS</span>
+        <span class="spacer"></span>
+        <span class="chip">Mine <span class="v">{{ my_count }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="colm">
+                <div class="state-line">
+                    <div class="state-box" data-class-on="sharing"><img src="3db:INTERFACE/REM/IMAGES/icon_waypoint_own.3db"/><div><div class="label">Sharing</div><div class="v">{{ sharing ? 'On - the group sees yours' : 'Off' }}</div></div></div>
+                    <div class="state-box last" data-class-on="following != ''"><img src="3db:INTERFACE/REM/IMAGES/icon_waypoint.3db"/><div><div class="label">Following</div><div class="v">{{ following == '' ? 'Nobody' : following }}</div></div></div>
+                </div>
+                <h3 style="margin-bottom: 8dp;">Group members</h3>
+                <div class="table" style="flex: 1;">
+                    <div class="head"><span class="c1">Pilot</span><span class="c2">Shared</span></div>
+                    <div class="body">
+                        <div class="empty" data-if="members.size == 0">Nobody in your group shares waypoints.</div>
+                        <div class="row" data-for="r : members" data-class-selected="r.selected" data-class-current="r.current" data-action="pick" data-attr-data-arg="r.key">
+                            <span class="c1"><img src="3db:INTERFACE/REM/IMAGES/icon_waypoint.3db"/>{{ r.a }}</span><span class="c2">{{ r.b }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="actions" style="margin-top: 10dp;">
+                    <div class="btn primary" data-action="share">{{ sharing ? 'Stop sharing' : 'Share mine' }}<div class="tip">Your waypoints go to your group while sharing is on.</div></div>
+                    <div class="btn" data-action="load">Take over<div class="tip">Takes the picked member's waypoints over once.</div></div>
+                    <div class="btn" data-action="follow">{{ following == '' ? 'Follow' : 'Stop following' }}<div class="tip">Keeps taking the picked member's waypoints over every 2 seconds.</div></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
+</body>
+</rml>