New REM client: REM-Client aad7edf, 64-bit (commodity trader: where the picked good sells - known bases, price, profit, system and jumps)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
New REM client: REM-Client 5156475, 64-bit (inventory: the hold's bar over the ship model, the credits alone over the list)
2026-11-07 07:15:31 +01:00 · 2026-11-07 06:56:27 +01:00 · 2026-11-07 03:04:26 +01:00 · 2026-11-07 02:16:52 +01:00 · 2026-11-07 02:14:50 +01:00 · 2026-11-07 01:46:37 +01:00
140 changed files with 6231 additions and 32 deletions
@@ -22,7 +22,9 @@ EXE/rem-server*
 EXE/flserver_rebuilt.*
 EXE/flbot.exe
 EXE/LargeID.dat
-EXE/REM/ServerModule/
+# ServerModule: the missions are the mod's (tracked); the server's run log and the local test missions are not
+EXE/REM/ServerModule/trade_log.txt
+EXE/REM/ServerModule/missions/rem_demo*.ini
 EXE/REM/npc_profiles.ini
 EXE/REM/rem-server-*.txt
 flserver-reconstruction/
@@ -4916,8 +4916,8 @@ phantom_physics = true


 ; Sublight-Modul
-
-[JumpEngine]
+[ShieldGenerator]
+;[JumpEngine]
 nickname = jump_drive
 ids_name = 265001
 ids_info = 265002
@@ -1863,4 +1863,17 @@ combinable = false
 ids_name = 263960
 ids_info = 263960
 shop_archetype = equipment\models\st\ku_thruster.3db
+material_library = equipment\models\ku_equip.mat
+
+; Sublight-Modul
+[Good]
+nickname = jump_drive
+equipment = jump_drive
+category = equipment
+price = 75000
+item_icon = equipment\models\commodities\nn_icons\EQUIPICON_thruster.3db
+combinable = false
+ids_name = 265001
+ids_info = 265002
+shop_archetype = equipment\models\st\ku_thruster.3db
 material_library = equipment\models\ku_equip.mat
@@ -549,16 +549,17 @@ effect_crc = 116864929

 [VisEffect]
 nickname = gf_tradeinnerring
-alchemy = fx\misc\gf_tradeinnerring.ale
+alchemy = fx\misc\gf_tradeinnerring.tale
 effect_crc = -141786875
 textures = fx\sarma.txm
 textures = fx\beam.txm
+textures = fx\newglows.txm

 [VisEffect]
 nickname = gf_tradelaneendsplash
-alchemy = fx\misc\gf_tradelaneendsplash.ale
+alchemy = fx\misc\gf_tradelaneendsplash.tale
 effect_crc = 272986435
-textures = fx\planetflare.txm
+textures = fx\newglows.txm

 [VisEffect]
 nickname = gf_tradelaneflash
@@ -568,11 +569,13 @@ textures = fx\sarma.txm

 [VisEffect]
 nickname = tradelaneinship01
-alchemy = fx\misc\gf_tradelaneinship01.ale
+alchemy = fx\misc\gf_tradelaneinship01.tale
 effect_crc = -422626017
 textures = fx\sarma.txm
-textures = fx\planetflare.txm
-textures = fx\kioncannon.txm
+textures = fx\flwt.txm
+textures = fx\efx.txm
+textures = FX\smoke.txm
+textures = fx\newglows.txm

 [VisEffect]
 nickname = tradelaneship01donut
@@ -605,10 +608,13 @@ textures = fx\planetflare.txm

 [VisEffect]
 nickname = tradelaneshipdebris01
-alchemy = fx\misc\gf_tradelaneship01.ale
+alchemy = fx\misc\gf_tradelaneship01.tale
 effect_crc = 383368615
-textures = fx\beam.txm
-textures = fx\planetflare.txm
+textures = fx\sarma.txm
+textures = fx\flwt.txm
+textures = fx\efx.txm
+textures = FX\smoke.txm
+textures = fx\newglows.txm

 [VisEffect]
 nickname = tradelaneshipdebris03
@@ -331,6 +331,9 @@ id = USER_REM_WAYPOINT_BOT
 [key]
 id = USER_REM_SECTOR_SCANNER

+[key]
+id = USER_REM_HUDLESS
+
 [key]
 id = USER_REM_WAYPOINTS

@@ -1073,6 +1073,12 @@ ids_name = 524526
 ids_info = 524527
 state = keydown

+[KeyCmd]
+nickname = USER_REM_HUDLESS
+ids_name = 524528
+ids_info = 524529
+state = keydown
+
 [KeyMap]
 nickname = IDR_ALWAYS_PRESENT
 key = USER_REM_WAYPOINTS
@@ -1080,6 +1086,7 @@ key = USER_REM_BASE
 key = USER_REM_MISSIONS
 key = USER_REM_CONTRACTS
 key = USER_REM_PLAYER
+key = USER_REM_HUDLESS
 key = USER_YES
 key = USER_NO
 key = USER_CANCEL
@@ -0,0 +1,10 @@
+[CharacterEncounter]
+Location = Li01_01_base, Cityscape
+start_room = Cityscape
+action = scripts\rem_arcs\manhattan_story_arc01_start.thn
+autoplay
+
+[Char]
+npc = Trent
+actor = trent
+fidget = scripts\extras\fidget_stand_male_NULL.thn
@@ -5020,7 +5020,7 @@ hp_type = hp_fighter_engine_special_10, HpDrive01
 hp_type = hp_elite_power_special_10, HpPower01
 hp_type = hp_fighter_power_special_1, HpPower02
 hp_type = hp_rem_module01, HpVelocity
-hp_type = hp_rem_module01, HpJump
+hp_type = hp_rem_module02, HpJump

 [CollisionGroup]
 obj = wing_port_lod1
@@ -5658,7 +5658,7 @@ hp_type = hp_fighter_engine_special_10, HpDrive01
 hp_type = hp_elite_power_special_10, HpPower01
 hp_type = hp_fighter_power_special_1, HpPower02
 hp_type = hp_rem_module01, HpVelocity
-hp_type = hp_rem_module01, HpJump
+hp_type = hp_rem_module02, HpJump
 hp_type = hp_elite_shield_special_2, HpCloak01

 [CollisionGroup]
@@ -6397,7 +6397,7 @@ hp_type = hp_fighter_engine_special_10, HpDrive01
 hp_type = hp_elite_power_special_10, HpPower01
 hp_type = hp_fighter_power_special_1, HpPower02
 hp_type = hp_rem_module01, HpVelocity
-hp_type = hp_rem_module01, HpJump
+hp_type = hp_rem_module02, HpJump

 [CollisionGroup]
 obj = bw_port_wing01_lod1
@@ -10242,7 +10242,7 @@ hp_type = hp_fighter_engine_special_10, HpDrive01
 hp_type = hp_elite_power_special_10, HpPower01
 hp_type = hp_fighter_power_special_1, HpPower02
 hp_type = hp_rem_module01, HpVelocity
-hp_type = hp_rem_module01, HpJump
+hp_type = hp_rem_module02, HpJump

 [CollisionGroup]
 obj = cv02_port_wing_lod1
@@ -41,6 +41,8 @@ rem.AddInfoCard(524524, "MODULE SLOT 9")
 rem.AddInfoCard(524525, "MODULE SLOT 10")
 rem.AddInfoCard(524526, "SECTOR SCANNER")
 rem.AddInfoCard(524527, "Shows / hides the 3D sector scanner (contacts within 7.5 km).")
+rem.AddInfoCard(524528, "HUDLESS")
+rem.AddInfoCard(524529, "Hides the HUD, then also the mouse cursor, then shows both again (screenshots).")

 -- RACE INFOCARDS
 rem.AddInfoCard(9001, "1")
@@ -84,18 +86,21 @@ rem.AddInfoCard(455100, "Cygnus-Cluster")

 -- Mission Infocards

+rem.AddInfoCard(458700, "Launch your Ship")
+
 -- Story Arc I - Liberty | Zero Point (Planet Manhattan - Li01_01_Base)
 rem.AddInfoCard(458751, [[<?xml version="1.0" encoding="UTF-16"?><RDL><PUSH/><JUST loc="left"/><TEXT>Mission 01: Zero Point</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>Today, there was another disturbing unconsciousness and daydreaming. Something strange, like seeing the past and the future at the same time. It felt like a warning — a vision of a threat and artifacts. But there was something more... something that remained difficult to understand.</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>By contacting Jun'ko Zane talking about ancient alien artifacts, she sent some information that Sean Ashcroft has been spotted near the Pittsburgh Debris Field. Ashcroft would be a good lead, as he has the best insight into the smuggling ring in Sirius, and after his former interrogation, he is still working for the Liberty Rogues on criminal activites.</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>Finding Sean Ashcroft and talk to him on planet Pittsburgh will be a good start.</TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT></TEXT><PARA/><JUST loc="left"/><TEXT>Objectives:</TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>- Destroy Ashcroft's Ship</TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>- Tractor in Ashcroft's Lifepod</TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>- Land on Planet Pittsburgh</TEXT><PARA/><JUST loc="left"/><POP/></RDL>]])
 rem.AddInfoCard(458752, "Find Ashcroft in the Pittsburgh Debris Field")
 rem.AddInfoCard(458753, "Destroy Ashcroft's Ship")
 rem.AddInfoCard(458754, "Tractor in Ashcroft's Lifepod")
 rem.AddInfoCard(458755, "Land on Planet Pittsburgh")
-rem.AddInfoCard(458756, [[<?xml version="1.0" encoding="UTF-16"?><RDL><PUSH/><JUST loc="left"/><TEXT>Mission 02: Zero Point</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>Status: Mission accomplished</TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT></TEXT><PARA/><JUST loc="left"/><TEXT>Excellent! Through his smuggling connections, Ashcroft had obtained an ancient artifact: the Athena Orb.</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>This could be the beginning to a journey finding more Daam-K'vosh artifacts by its ability to locate other artifacts, potentially makes it a tracking device for the entire collection. Meanwhile there's another mission on Planet Manhattan.</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>Launch your ship to continue the next mission. Diplomat Harrison will contact you in space.</TEXT><PARA/><JUST loc="left"/><POP/></RDL>]])
-rem.AddInfoCard(458757, "Launch your Ship")
-rem.AddInfoCard(458758, "Fly to Planet Manhattan")
+rem.AddInfoCard(458756, [[<?xml version="1.0" encoding="UTF-16"?><RDL><PUSH/><JUST loc="left"/><TEXT>Mission 01: Zero Point</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>Status: Mission accomplished</TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT></TEXT><PARA/><JUST loc="left"/><TEXT>Excellent! Through his smuggling connections, Ashcroft had obtained an ancient artifact: the Athena Orb.</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>This could be the beginning to a journey finding more Daam-K'vosh artifacts by its ability to locate other artifacts, potentially makes it a tracking device for the entire collection. Meanwhile there's another mission on Planet Manhattan.</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>Launch your ship to continue for the mission interlude. Diplomat Harrison will contact you in space.</TEXT><PARA/><JUST loc="left"/><POP/></RDL>]])
+
+rem.AddInfoCard(458757, "Fly to Planet Manhattan")
+rem.AddInfoCard(458758, "Land on Planet Manhattan")

 -- Mission Text Introducing Story Arc I - Tour of Duty
-rem.AddInfoCard(458759, [[<?xml version="1.0" encoding="UTF-16"?><RDL><PUSH/><JUST loc="left"/><TEXT>Juni introduced Harrison to me in the Manhattan Bar. We talked a lot of Liberty's inner politics and its common afairs. Harrison's the first choice by the President of Liberty to blot out the Nomad corruption.</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>I should come later to get more informations about the current politic situation.</TEXT><PARA/><JUST loc="left"/><POP/></RDL>]])
+rem.AddInfoCard(458759, [[<?xml version="1.0" encoding="UTF-16"?><RDL><PUSH/><JUST loc="left"/><TEXT>Mission Interlude</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>Harrison contacted through an open channel, requesting a meeting on Planet Manhattan. Deeply concerned about Liberty's inner politics, the common afairs and the growing instability reaching to an unpreventable turmoil. Nevertheless he also has his duties and need some assistance.</TEXT><PARA/><TEXT></TEXT><PARA/><JUST loc="left"/><JUST loc="left"/><TEXT>Harrison's the first choice by President Jacobi to blot out the Nomad corruption. Starting the next mission on the job-board will lead to the meeting on the Manhattan Landing Pads.</TEXT><PARA/><JUST loc="left"/><POP/></RDL>]])

 -- Story Arc I - Liberty | Tour of Duty (Planet Manhattan - Li01_01_Base)
 rem.AddInfoCard(458760, "Story Arc I - Liberty")
@@ -0,0 +1,223 @@
+[Mission]
+nickname = li_story_arc_chapter_1
+story_name = li_arc_chapter_1_m01                 ; progress key, lowercase
+offer_type = CapturePrisoner
+offer_target_system = Li01
+offer_faction = li_n_grp
+offer_title_id = 458760
+offer_description_id = 458751
+offer_bases = Li01_01_Base
+; reoffer defaults to OnFail for story missions
+
+; >>> NPC SECTION <<<
+
+[NpcShipArch]
+nickname = MSN14_Ashcroft
+archetype = pi_elite               ; shiparch nickname from your mod data
+loadout = MSN02_Ashcroft     	   ; loadout nickname from your mod data
+state_graph = fighter
+pilot = MSN02_Ashcroft             ; pilot nickname from pilots.ini
+level = 5
+
+[MsnNpc]
+nickname = Ashcroft
+npc_ship = MSN14_Ashcroft
+string_id = 216206
+faction = fc_lr_grp
+system = Li01
+position = 32234, 0, -82297
+label = lr_ashcroft
+
+[NpcShipArch]
+nickname = MSN14_Ashcroft_Escort
+archetype = pi_fighter              ; shiparch nickname from your mod data
+loadout = MSN02_Ashcroft_Escort     ; loadout nickname from your mod data
+state_graph = fighter
+pilot = MSN02_Ashcroft_Escort        ; pilot nickname from pilots.ini
+level = 5
+
+[MsnNpc]
+nickname = Ashcroft_Escort_1
+npc_ship = MSN14_Ashcroft_Escort
+string_id = 196888
+faction = fc_lr_grp
+system = Li01
+position = 32254, 0, -82297
+label = lr_pirates
+
+[MsnNpc]
+nickname = Ashcroft_Escort_2
+npc_ship = MSN14_Ashcroft_Escort
+string_id = 196888
+faction = fc_lr_grp
+system = Li01
+position = 32234, 0, -82297
+label = lr_pirates
+
+[MsnNpc]
+nickname = Ashcroft_Escort_3
+npc_ship = MSN14_Ashcroft_Escort
+string_id = 196888
+faction = fc_lr_grp
+system = Li01
+position = 32224, 0, -82297
+label = lr_pirates
+
+[MsnNpc]
+nickname = Ashcroft_Escort_4
+npc_ship = MSN14_Ashcroft_Escort
+string_id = 196888
+faction = fc_lr_grp
+system = Li01
+position = 32264, 0, -82297
+label = lr_pirates
+
+
+
+
+; >>> LOOT SECTION <<<
+
+[MsnLoot]
+nickname = ashcroft_pod
+archetype = escape_lifeboat
+string_id = 216206
+rel_pos_obj = Ashcroft
+rel_pos_offset = 50, 0, 0
+velocity = 0, 0, 0
+equip_amount = 1
+health = 1
+Can_Jettison = false
+
+; >>> TRIGGER SECTION <<<
+
+[Trigger]
+nickname = arc01_m01_c01_scene
+InitState = Active
+Act_SetTHNConfig = players, manhattan_gen, li_arc01_m01_c01
+Act_PlayTHN = players, 48, 458760, 458751
+
+[Trigger]
+nickname = arc01_m01_scene
+InitState = Active
+Cnd_THNComplete = players
+Act_DisplayMsg = players, 458700
+
+[Trigger]
+nickname = t_ashcroft_spawn_destination
+InitState = Active
+Cnd_LaunchComplete = players, Li01_01_Base
+Act_NNPath = players, 458752, Li01, 32234, 0, -82297, true
+Act_Mark = players, lr_pirates, true
+Act_ActTrig = t_ashcroft_ship_spawn
+
+[Trigger]
+nickname = t_ashcroft_ship_spawn
+Cnd_DistVec = Player, 32234, 0, -82297, 7500, Li01, inside
+Act_SpawnShip = Ashcroft, no_ol
+Act_SpawnShip = Ashcroft_Escort_1, no_ol
+Act_SpawnShip = Ashcroft_Escort_2, no_ol
+Act_SpawnShip = Ashcroft_Escort_3, no_ol
+Act_SpawnShip = Ashcroft_Escort_4, no_ol
+Act_Mark = players, lr_pirates, true
+Act_ActTrig = t_ashcroft_ship_hostile
+
+[Trigger]
+nickname = t_ashcroft_ship_hostile
+Cnd_DistVec = Player, 32234, 0, -82297, 6000, Li01, inside
+Act_SetVibe = Ashcroft, players, REP_HOSTILE_MAX
+Act_SetVibe = Ashcroft_Escort_1, players, REP_HOSTILE_MAX
+Act_SetVibe = Ashcroft_Escort_2, players, REP_HOSTILE_MAX
+Act_SetVibe = Ashcroft_Escort_3, players, REP_HOSTILE_MAX
+Act_SetVibe = Ashcroft_Escort_4, players, REP_HOSTILE_MAX
+Act_ActTrig = t_ashcroft_ship_comm
+
+[Trigger]
+nickname = t_ashcroft_ship_comm
+Cnd_DistVec = Player, 32234, 0, -82297, 2500, Li01, inside
+Act_EtherComm = ashcroft_m2_0880, players, ashcroft_voice_m02, DX_M02_0880_ASHCROFT, 0.5, false, 600019, pi_pirate4_head, pi_pirate8_body
+
+[Trigger]
+nickname = t_ashcroft_ship_destroyed
+InitState = Active
+Cnd_Destroyed = lr_ashcroft, 1, EXPLODE      ; explicit count = wait for ALL
+Act_DisplayMsg = players, 458754
+Act_SpawnLoot = ashcroft_pod
+Act_ActTrig = t_ashcroft_cargopod_loot
+
+[Trigger]
+nickname = t_ashcroft_health_50
+InitState = Active
+;system = Li01
+Cnd_HealthDec = Ashcroft, 0.5
+Act_EtherComm = ashcroft_m2_0900, players, ashcroft_voice_m02, DX_M02_0900_ASHCROFT, 0.5, false, 600019, pi_pirate4_head, pi_pirate8_body
+Act_ActTrig = t_ashcroft_health_25
+
+[Trigger]
+nickname = t_ashcroft_health_25
+Cnd_HealthDec = Ashcroft, 0.25
+
+[Trigger]
+nickname = t_ashcroft_cargopod_loot
+Cnd_LootAcquired = ashcroft_pod, Player
+Act_NNPath = players, 458755, Li01, 50655, 0, -77595, true, Li01_02_dock_ring
+Act_SetTHNConfig = players, pittsburgh_gen, li_arc01_m01_c02
+Act_ActTrig = t_ashcroft_cargopod_landed
+Act_ActTrig = t_pittsburgh_marked
+
+[Trigger]
+nickname = t_pittsburgh_marked
+Cnd_Timer = 1
+Act_Mark = players, Li01_02, true
+
+[Trigger]
+nickname = t_ashcroft_cargopod_landed
+Cnd_BaseEnter = players, Li01_02_Base
+;Act_PlayTHN = players, 30, 458760, 458756
+Act_ActTrig = t_mission_ending
+
+[Trigger]
+nickname = t_mission_ending
+Cnd_Timer = 33
+Act_PopUpDialog = players, 458760, 458756
+Act_ActTrig = t_ashcroft_pittsburgh_close
+
+[Trigger]
+nickname = t_ashcroft_pittsburgh_close
+Cnd_PopUpDialog = CLOSE
+Act_RemoveCargo = players, ashcroft_pod, 1
+Act_DisplayMsg = players, 458700
+Act_ActTrig = t_ashcroft_mission_completed3
+
+[Trigger]
+nickname = t_ashcroft_mission_completed3
+Cnd_PopUpDialog = CLOSE
+Act_SetMsnResult = Success             ; won - the mission goes on (interlude)
+Act_AdjAcct = players, 250000          ; the actual payout
+Act_DisplayMsg = players, 479000	   ; Mission Success NEURAL-NET MESSAGE
+Act_Destroy = Ashcroft, SILENT         ; Ashcroft goes (Act_TerminateMsn would end the whole mission)
+Act_ActTrig = t_ashcroft_pittsburgh_launched
+
+[Trigger]
+nickname = t_ashcroft_pittsburgh_launched
+Cnd_LaunchComplete = players, Li01_02_Base
+Act_ActTrig = t_ashcroft_mission_outro
+
+[Trigger]
+nickname = t_ashcroft_mission_outro
+Cnd_Timer = 1
+Act_EtherComm = harrison_intro, players, harrison_voice_m14, dx_m14_0000_HARRISON, 0.5, false, 227159, rh_captain_head, li_rockford_body
+Act_NNPath = players, 458757, Li01, -33267, 0, -28810, true, Dock_Ring_Li01_01
+Act_ActTrig = t_ashcroft_mission_completed
+
+[Trigger]
+nickname = t_ashcroft_mission_completed
+Cnd_DistVec = Player, -33267, 0, -28810, 3500, Li01, inside
+Act_DisplayMsg = players, 458758
+Act_ActTrig = t_ashcroft_mission_completed2
+
+[Trigger]
+nickname = t_ashcroft_mission_completed2
+Cnd_BaseEnter = players, Li01_01_Base
+Act_PopUpDialog = players, 458760, 458759
+Act_LeaveMsn = players, Success        ; the interlude is over: records li_arc_chapter_1_m01
+Act_TerminateMsn
@@ -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.
@@ -16,17 +16,23 @@
 [REM]

 ; ---- Display ----
-better_resolutions = false         ; default mode = main monitor size
+better_resolutions = true          ; default mode = main monitor size
 png_screenshots = false            ; screenshots as PNG (WIC) instead of BMP
 run_in_background = true           ; keep running and drawing without focus (Alt+Tab)
 alt_enter_toggle = true            ; Alt+Enter: borderless fullscreen <-> window filling the desktop
+dpi_aware = true                   ; per monitor DPI aware: Windows display scaling (125 %) does not shrink the modes
+
+; ---- Physics ----
+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
@@ -43,7 +49,28 @@ particle_linger_seconds = 20       ; particles of a stopped emitter fade over th
 ; ---- Interface ----
 hide_npc_players = false            ; leave the server's player bots ("[NPC] " names) out of the player lists (chat window, chat target)
 numeric_damage = true              ; target hull (with armour) and shield as numbers beside the bars (adoxa Numeric Damage)
+delay_display = true               ; refire time left beside the ammo count of slow launchers, "20--1.5" (M0tah DelayDisplay)
+zone_messages = true               ; "Entered <zone>." / "Left <zone>." in the arrival text, coloured for dangerous zones (adoxa Zone)
+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
@@ -14,6 +14,9 @@ VSync = -1
 ; full-screen (non-windowed) modes: 1 = borderless window over the monitor, the back buffer is
 ; scaled to it (no exclusive mode switch); 0 = leave the window alone
 Fullscreen = 1
+; ... and the back buffer takes the monitor's size: a mode smaller than the monitor is not scaled
+; up with black bars (16:9 on an ultrawide), the picture is simply wider; 0 = scale the mode up
+FullscreenNative = 1
 ; anti-aliasing: 0/1 off, 2, 4 or 8 = MSAA samples (the back buffer is resolved before present)
 Msaa = 0
 ; texture filtering: 0 = as the game sets it, 2..16 = force anisotropic filtering
@@ -34,10 +37,6 @@ NormalFlipY = 0
 NormalStrength = 0.6
 ; depth of the height-map parallax (0 = off, 0.25 = default, 2 = strong)
 ParallaxStrength = 0.25
-; REM normals: how the height maps give relief. 1 = V1 offset parallax (one sample, cheap; swims at
-; grazing angles), 2 = V2 parallax occlusion (the view ray walks through the height field: edges hide
-; what lies behind them, stable at grazing angles; more GPU time close up)
-RemNormals = 2
 ; relief of planets, worked out from the brightness of their own texture (0 = flat as the original)
 PlanetRelief = 1.0
 ; R3b REM lighting: 1 = physically based per-pixel light (GGX) on ships, stations, planets and
@@ -86,6 +85,10 @@ Overlay = 1
 ; R4 sun shadows in space and space cutscenes (cascaded shadow maps): ShadowMapSize is the atlas
 ; of the four cascades (2048 / 4096 / 8192), ShadowDistance how far from the camera (metres).
 Shadows = 1
+; R32 soft shadow-map shadows (PCSS): the sun's angular size in degrees -- sharp where a shadow touches
+; its caster, softer farther away (0 = the fixed 3x3 filter). The ray-traced shadows (RtShadows) are
+; not affected.
+ShadowSoftness = 1.5
 ShadowMapSize = 4096
 ShadowDistance = 3000
 ; PlanetShadows = 1: planets also receive the shadows of ships, docking rings and stations
@@ -99,22 +102,34 @@ ShadowCullMargin = 400
 DynamicLights = 1
 ; R17 weapon lights: laser beams light their surroundings along their length, muzzle flashes,
 ; projectiles, impacts and explosions as points in the colour of their particles (needs
-; DynamicLights = 1). WeaponGlow draws weapon effects brighter for the bloom (1 = original).
+; DynamicLights = 1). WeaponGlow draws weapon effects brighter for the bloom (1 = original, below 1
+; dimmer); BeamGlow the lasers' glowing volumes (R24, 0 = off).
 WeaponLights = 1
 WeaponLightIntensity = 1.0
 WeaponLightRange = 1.0
-WeaponGlow = 1.6
+WeaponGlow = 1.0
+BeamGlow = 0.4
 ; R2 debug view (diagnosis from screenshots): 0 off, 1 normals, 2 depth (1 m black .. 130 km
 ; 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
+; slow frames: a line in remgfx.log for each frame far slower than the running average (new pipelines,
+; ray-tracing meshes, textures / buffers created, presenting and Reflex / Anti-Lag wait); 10 per 600 frames at most
+HitchLog = 1
+; where RemGfx spends its CPU time per frame (draws, constants, motion, pipelines, ray tracing, post, present): 1 on
+CpuLog = 0
+; ray tracing: new meshes (their acceleration structures) built per frame at most, and their triangles;
+; the rest waits for the next frames (a group of ships coming into view built everything in one frame)
+RtBuildPerFrame = 16
+RtBuildTriangles = 400000
 ; 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).
 Distortion = 1
 HeatHaze = 1.0
 ShieldRefraction = 1.0
-CloakRefraction = 1.0
 TunnelDistortion = 1.0
 ; R15 planet atmospheres: light scattering like Earth's (blue rim on the day side, red at the
 ; terminator, glow against the sun); AtmosphereReplace = 1 hides the planets' original atmosphere
@@ -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; margin-bottom: 14dp; background-color: #5cc8f008; }
+        .label { margin-bottom: 6dp; }
+    </style>
+</head>
+<body class="window small" data-model="account">
+    <div class="win-head">
+        <span class="title">MULTIPLAYER ACCOUNT</span><span class="sl">\\\</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>
@@ -0,0 +1,77 @@
+<rml>
+<head>
+    <title>Admin</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .side { flex: 0 0 38%; display: flex; flex-direction: column; min-height: 0; margin-right: 18dp; }
+        .list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
+        .row { padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; font-family: "IBM Plex Mono"; font-size: 14dp; }
+        .row:hover { background-color: #122033; }
+        .row.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
+        .detail { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+        .help { padding: 12dp 14dp; line-height: 1.5; margin-bottom: 14dp; background-color: #5cc8f008; }
+        .cmd { font-family: "IBM Plex Mono"; font-size: 18dp; color: #f2b13c; margin-bottom: 8dp; }
+        .runline { display: flex; flex-direction: row; align-items: center; }
+        .runline input { flex: 1; margin-right: 10dp; }
+        .search { margin-bottom: 8dp; }
+        .recent { margin-top: 14dp; }
+        .recent .row { font-size: 13dp; color: #8197ad; }
+        .slots { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 8dp; }
+        .slot { padding: 5dp 10dp; margin: 0 6dp 6dp 0; border-bottom: 2dp #ffffff14; font-family: "IBM Plex Mono"; font-size: 14dp; }
+        .slot:hover { background-color: #122033; }
+        .slot.active { background-color: #f2b13c24; border-bottom-color: #f2b13c; }
+        .slot .k { color: #8197ad; margin-right: 6dp; }
+        .slot .v { color: #dbe6f0; }
+        .options { flex: 1 1 0; min-height: 0; overflow-y: auto; margin-top: 8dp; }
+        .options .row { font-size: 13dp; }
+        .options .row .n { color: #8197ad; margin-left: 8dp; }
+    </style>
+</head>
+<body class="window medium" data-model="admin">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_player.3db"/>
+        <span class="title">ADMIN</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">{{ commands.size }} commands</span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="side">
+                    <input class="text search" type="text" data-value="filter" maxlength="40"/>
+                    <div class="list">
+                        <div class="hint" style="padding: 10dp;" data-if="commands.size == 0">{{ received ? 'No command matches.' : 'Asking the server...' }}</div>
+                        <div class="row" data-for="c : commands" data-class-selected="c.selected" data-action="pick" data-attr-data-arg="c.name">{{ c.name }}</div>
+                    </div>
+                </div>
+                <div class="detail">
+                    <div class="help">
+                        <div class="cmd">{{ has_pick ? pick_name : 'Pick a command' }}</div>
+                        <div>{{ has_pick ? pick_help : 'Every admin command of the server, run from here - its answer comes in the chat.' }}</div>
+                    </div>
+                    <div class="label">Arguments</div>
+                    <div class="slots" data-if="slots.size &gt; 0">
+                        <div class="slot" data-for="s, i : slots" data-class-active="s.active" data-action="slot" data-attr-data-arg="i"><span class="k">{{ s.label }}</span><span class="v">{{ s.value }}</span></div>
+                    </div>
+                    <div class="runline">
+                        <input class="text" type="text" data-value="args" maxlength="200"/>
+                        <div class="btn primary" data-class-disabled="!has_pick" data-action="run">Run<div class="tip">Runs the command on the server as you typed it; the answer comes as a system message in the chat.</div></div>
+                    </div>
+                    <div class="options" data-if="options.size &gt; 0">
+                        <div class="row" data-for="o : options" data-action="option" data-attr-data-arg="o.value">{{ o.label }}<span class="n" data-if="o.label != o.value">{{ o.value }}</span></div>
+                    </div>
+                    <div class="recent" data-if="recent.size &gt; 0">
+                        <div class="label">Run here</div>
+                        <div class="row" data-for="r : recent" data-action="again" data-attr-data-arg="r">{{ r }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+    </div>
+</body>
+</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; 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-left: 3dp #3d6d96; background-color: #5cc8f010; }
+        .start:hover { border-left-color: #5cc8f0; }
+        .start.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
+        .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; flex: 1; display: flex; flex-direction: column; min-height: 0; background-color: #5cc8f008; }
+        .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="sl">\\\</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>
@@ -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; 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-left: 3dp #3d6d96; background-color: #5cc8f010; }
+        .pilot:hover { border-left-color: #5cc8f0; }
+        .pilot.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
+        .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; margin-bottom: 12dp; background-color: #5cc8f008; }
+        .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; background-color: #5cc8f008; }
+        .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="sl">\\\</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>
@@ -0,0 +1,32 @@
+<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. Its foot 420dp up (the HUD's contacts and
+           target panel below reaches 341dp): at 67 % of the height it ran into that panel */
+        body.feed { position: absolute; left: 16dp; bottom: 420dp; width: 46%; height: 40%; 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; display: flex; flex-direction: row; decorator: ninepatch(fw, fw-i); }
+        .line .p { white-space: nowrap; margin-right: 6dp; }
+        .line .t { flex: 1; white-space: pre-wrap; word-break: break-word; }
+        /* the chat line under the running chat: a long one wraps and grows downwards (the lines above stay) */
+        .line.typing { position: absolute; left: 0; right: 0; top: 100%; align-items: flex-start; }
+        .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; } }
+        .edit-grip { display: none; position: absolute; left: 0; top: 0; padding: 2dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; border-radius: 3dp; white-space: nowrap; drag: drag; cursor: move; pointer-events: auto; z-index: 10; }
+        .hud-editing .edit-grip { display: block; }
+    </style>
+</head>
+<body class="feed movable" data-model="chatfeed">
+    <div class="win-head edit-grip">Chat &#10021;</div>
+    <div class="lines" data-if="feed_shown" data-rml="feed"></div>
+    <div class="line typing" 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>
@@ -0,0 +1,64 @@
+<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; font-size: 13dp; color: #8197ad; border-bottom: 2dp #00000000; }
+        .ct:hover { color: #dbe6f0; border-bottom-color: #3d6d96; }
+        .ct.on { color: #f2b13c; background-color: #f2b13c1a; border-bottom-color: #f2b13c; }
+        .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; font-size: 16dp; line-height: 1.35; background-color: #5cc8f008; }
+        .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; background-color: #5cc8f008; }
+        .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; }
+        .tg .tn, .tg .loc { pointer-events: none; overflow: hidden; } /* the row takes the click, not its lines */
+        /* a player's system under the name */
+        .tg .loc { margin-top: 1dp; font-size: 12dp; color: #8197ad; }
+    </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="sl">\\\</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">
+                            <div class="tn" data-rml="t.name"></div>
+                            <div class="loc" data-if="t.location != ''">{{ t.location }}</div>
+                        </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>
@@ -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; background-color: #5cc8f008; }
+        .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="sl">\\\</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>
@@ -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; 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="sl">\\\</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>
@@ -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; decorator: ninepatch(fw, fw-i); }
+        .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>
@@ -0,0 +1,42 @@
+<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;
+            display: block;
+            decorator: ninepatch(fw, fw-i);
+        }
+        /* the windows' head (rem.rcss .win-head): clear of the cut corner, the title with its three slashes */
+        .box-head { display: flex; flex-direction: row; align-items: center; padding: 12dp 18dp 12dp 28dp; border-bottom: 1dp #2b6f9e; }
+        .box-head .title { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; letter-spacing: 2dp; text-transform: uppercase; color: #e8f4ff; }
+        .box-head .sl { flex: 1; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; letter-spacing: -1dp; color: #5cc8f0; margin-left: 10dp; }
+        .box-body { padding: 16dp 18dp 16dp 28dp; }
+        .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="sl">\\\</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>
@@ -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.
@@ -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.
@@ -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.
@@ -0,0 +1,19 @@
+<rml>
+<head>
+    <title>FPS</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* the FPS display (rem_ui_fps.cpp): a small plate under the REM bar; no click target but its grip in the editor */
+        body.fps { position: absolute; left: 16dp; top: 64dp; width: 160dp; height: 30dp; background-color: transparent; pointer-events: none; }
+        .plate { display: flex; flex-direction: row; align-items: center; height: 30dp; padding: 0 10dp; decorator: ninepatch(fw, fw-i); font-family: "IBM Plex Mono"; font-size: 14dp; color: #dbe6f0; }
+        .plate .v { color: #f2b13c; }
+        .plate .k { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 11dp; letter-spacing: 1.5dp; color: #8197ad; margin: 0 10dp 0 5dp; }
+        .edit-grip { display: none; position: absolute; left: 0; top: -26dp; padding: 2dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; border-radius: 3dp; white-space: nowrap; drag: drag; cursor: move; pointer-events: auto; z-index: 10; }
+        .hud-editing .edit-grip { display: block; }
+    </style>
+</head>
+<body class="fps movable" data-model="fps">
+    <div class="win-head edit-grip">FPS &#10021;</div>
+    <div class="plate"><span class="v">{{ fps }}</span><span class="k">FPS</span><span>{{ ms }} ms</span></div>
+</body>
+</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; font-size: 15dp; border-left: 3dp #5cc8f0; background-color: #5cc8f010; }
+        .request { padding: 12dp; margin-bottom: 10dp; border-left: 3dp #f2b13c; background-color: #5cc8f008; }
+        .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="sl">\\\</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>
@@ -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; background-color: #5cc8f008; }
+    </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="sl">\\\</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>
@@ -0,0 +1,327 @@
+<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):
+           panels with cut corners (the hudframes sprites, rem.rcss), FL's icons,
+           labelled bars, 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; decorator: ninepatch(fa, fa-i); }
+        .fp.all { decorator: ninepatch(fb, fb-i); }
+        .fp.small { decorator: ninepatch(fs, fs-i); }
+        .ico { width: 40dp; height: 40dp; margin: 0 3dp; }
+        .ib { display: inline-block; padding: 1dp; border-radius: 4dp; }
+        .ib:hover { background-color: #f2b13c14; }
+        .ib:hover .ico, .ib.on .ico { image-color: #f2b13c; }
+        .ib.on { background-color: #f2b13c1f; }
+        .ib.off { opacity: 0.35; }
+        /* a panel's title: caps, spaced, three slashes after it */
+        .ttl { font-weight: 600; font-size: 16dp; letter-spacing: 2dp; color: #e8f4ff; white-space: nowrap; }
+        .ttl .sl { margin-left: 10dp; color: #5cc8f0; letter-spacing: -1dp; }
+        .sp { flex: 1; }
+
+        /* --- the maneuver bar, top centre: icon over its name, the active one amber ----------- */
+        .mans { left: 50%; margin-left: -300dp; top: 8dp; width: 600dp; height: 76dp; padding: 0 18dp; display: flex; flex-direction: row; justify-content: center; align-items: center; }
+        .mans .ib { flex: 1; display: flex; flex-direction: column; align-items: center; height: 62dp; padding: 6dp 4dp 0 4dp; border-left: 1dp #2b6f9e; border-radius: 0; }
+        .mans .ib:first-child { border-left-width: 0; }
+        .mans .ib.on { border-left-width: 0; }
+        .mans .ico { width: 34dp; height: 34dp; margin: 0; }
+        .mans .lb { margin-top: 2dp; font-weight: 600; font-size: 12dp; letter-spacing: 1dp; color: #b9d4ea; white-space: nowrap; text-transform: uppercase; }
+        .mans .ib.on .lb { color: #f2b13c; }
+        .cruise { left: 50%; margin-left: -300dp; top: 90dp; width: 64dp; height: 56dp; display: flex; justify-content: center; align-items: center; }
+        .cruise .ico { width: 40dp; height: 40dp; }
+
+        /* --- bottom centre: the ship in its shield ring (the hull the red ring inside); power and thrust as a
+           wing on the left, the speed as one on the right -- arcs of a large circle under the panel rising to the
+           ring; the rings and wings are lit segments, each turned about its circle's centre (seg16 / seg32) */
+        .fp.core { left: 50%; margin-left: -310dp; bottom: 8dp; width: 620dp; height: 170dp; decorator: none; font-effect: shadow(1dp 1dp #000000cc); }
+        .core .disc { position: absolute; left: 242dp; top: 24dp; width: 134dp; height: 134dp; border: 1dp #2b6f9e; border-radius: 68dp; }
+        .core .ship { display: block; position: absolute; left: 280dp; top: 58dp; width: 60dp; height: 56dp; }
+        .core .pc { position: absolute; left: 242dp; top: 114dp; width: 136dp; text-align: center; font-weight: 600; font-size: 11dp; letter-spacing: 1dp; }
+        .core .pc .s { color: #4fc6ee; margin-right: 8dp; }
+        .core .pc .h { color: #e0484e; }
+        /* the segments as soft-edged geometry (<segarc>: centre, radius and size in dp from the panel's corner) */
+        .core segarc { display: block; position: absolute; left: 0; top: 0; width: 1dp; height: 1dp; }
+        .core .side { position: absolute; top: 106dp; width: 180dp; }
+        .core .side.l { left: 50dp; text-align: right; }
+        .core .side.r { left: 390dp; text-align: left; }
+        .core .cap { font-weight: 600; font-size: 10dp; letter-spacing: 1.5dp; color: #8fb3d0; margin: 0 6dp; }
+        .core .big { font-weight: 600; font-size: 26dp; color: #e8f4ff; }
+        .core .big.low { color: #ef6a5b; }
+        .core .big .u { font-weight: 400; font-size: 12dp; color: #8fb3d0; margin-left: 4dp; }
+        .core .pw { display: block; font-weight: 600; font-size: 13dp; color: #f0943c; }
+        .core .pw .cap { color: #f0943c; }
+        /* the other ship status (REM settings: Ship status "bars"): thrust | shield / hull / power | speed, one panel */
+        .fp.coreb { left: 50%; margin-left: -240dp; bottom: 8dp; width: 480dp; height: 66dp; padding: 0 16dp; display: flex; flex-direction: row; align-items: center; }
+        .coreb .val { width: 76dp; text-align: center; font-weight: 600; font-size: 22dp; color: #e8f4ff; }
+        .coreb .val .u { font-weight: 400; font-size: 11dp; color: #8fb3d0; margin-left: 4dp; }
+        .coreb .cap { display: block; font-weight: 600; font-size: 9dp; letter-spacing: 1.5dp; color: #8fb3d0; }
+        .coreb .thrust.low { color: #ef6a5b; }
+        .coreb .sep { width: 1dp; height: 42dp; background-color: #2b6f9e; margin: 0 10dp; }
+        .bars { flex: 1; display: flex; flex-direction: column; justify-content: center; }
+        .brow { display: flex; flex-direction: row; align-items: center; height: 15dp; }
+        .brow .l { width: 52dp; font-weight: 600; font-size: 10dp; letter-spacing: 1.5dp; color: #b9d4ea; }
+        .bar { position: relative; flex: 1; height: 8dp; }
+        .chips { position: absolute; left: 0; top: 0; right: 0; height: 8dp; display: flex; flex-direction: row; }
+        .sg { flex: 1; height: 8dp; margin-right: 2dp; }
+        .sg:last-child { margin-right: 0; }
+        /* each segment lit by the value (no clipped fill row: the HUD's scaled parts are not clipped) */
+        .power .sg { background-color: #f0943c26; }
+        .power .sg.lit { background-color: #f0943c; }
+        .shield .sg { background-color: #4fc6ee26; }
+        .shield .sg.lit { background-color: #4fc6ee; }
+        .hull .sg { background-color: #e0484e26; }
+        .hull .sg.lit { background-color: #e0484e; }
+
+        /* --- bottom left: target / contacts --------------------------------------------------- */
+        .lhead { left: 8dp; bottom: 340dp; width: 310dp; height: 42dp; display: flex; flex-direction: row; align-items: center; padding: 0 8dp 0 22dp; }
+        .lhead .ico { width: 30dp; height: 30dp; }
+        /* as high as the weapons panel (symmetric): FL's eight contact rows a little taller */
+        .lbody { left: 8dp; bottom: 8dp; width: 367dp; height: 334dp; padding: 12dp 16dp; }
+        .filters { display: flex; flex-direction: row; justify-content: center; margin-bottom: 6dp; padding-bottom: 6dp; border-bottom: 1dp #2b6f9e; }
+        .filters .ico { width: 32dp; height: 32dp; margin: 0 4dp; }
+        .rows { height: 246dp; margin-right: 22dp; }
+        .c { display: flex; flex-direction: row; align-items: center; height: 30dp; padding: 0 2dp; border-bottom: 1dp #24405c66; }
+        .c:hover { background-color: #3a8fc822; }
+        .c img { width: 20dp; height: 20dp; margin-right: 8dp; }
+        .c .n { flex: 1; white-space: nowrap; overflow: hidden; font-weight: 500; font-size: 16dp; letter-spacing: 1dp; text-transform: uppercase; }
+        .c .r { width: 64dp; text-align: right; margin-left: 8dp; font-size: 16dp; }
+        /* a scroll bar at the right of the rows: the arrows and a click on the track above / below
+           the middle step a row (the classic list's own scroll); the thumb's place and size come from
+           the list (thumb_top / thumb_size), dragged it scrolls the list (rem_ui_hud.cpp) */
+        .sbar { position: absolute; right: 6dp; top: 66dp; bottom: 12dp; width: 20dp; display: flex; flex-direction: column; align-items: center; }
+        .sbar .ar { width: 20dp; height: 20dp; line-height: 20dp; text-align: center; font-size: 11dp; color: #5cc8f0; }
+        .sbar .ar:hover { color: #f2b13c; background-color: #f2b13c1f; }
+        .sbar .ar.off { color: #2b6f9e; }
+        .sbar .ar.off:hover { color: #2b6f9e; background-color: transparent; }
+        .sbar .track { position: relative; flex: 1; width: 20dp; margin: 2dp 0; }
+        .sbar .rail { position: absolute; left: 8dp; top: 0; bottom: 0; width: 4dp; background-color: #24405c; }
+        .sbar .thumb { position: absolute; left: 7dp; width: 6dp; background-color: #5cc8f0; drag: drag; }
+        .sbar .zu, .sbar .zd { position: absolute; left: 0; right: 0; height: 50%; }
+        .sbar .zu { top: 0; }
+        .sbar .zd { top: 50%; }
+        .sbar .track:hover .thumb { background-color: #f2b13c; }
+        .tname { font-weight: 600; font-size: 22dp; letter-spacing: 1dp; color: #e8f1fa; text-transform: uppercase; }
+        .tsub { font-size: 15dp; letter-spacing: 1dp; color: #8fb3d0; margin-bottom: 10dp; }
+        .tbar { display: flex; flex-direction: row; align-items: center; height: 20dp; margin: 3dp 0; }
+        .tbar .l { width: 74dp; font-weight: 600; font-size: 13dp; letter-spacing: 2dp; color: #b9d4ea; }
+        .tbtns { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 10dp; }
+        .tbtns .ico { width: 40dp; height: 40dp; }
+
+        /* --- bottom right: status ------------------------------------------------------------- */
+        .rhead { right: 8dp; bottom: 340dp; width: 310dp; height: 42dp; display: flex; flex-direction: row; align-items: center; padding: 0 12dp 0 22dp; }
+        .rhead .ico { width: 26dp; height: 26dp; margin: 0 4dp 0 10dp; }
+        .rhead .cnt { font-weight: 600; font-size: 18dp; }
+        /* 10 weapons fit (a ship may carry more: the list scrolls; it drew the 9th and on outside the frame) */
+        .rbody { right: 8dp; bottom: 8dp; width: 367dp; height: 334dp; padding: 12dp 16dp; }
+        .rbody .wl { height: 100%; overflow-y: auto; }
+        .w { display: flex; flex-direction: row; align-items: center; height: 28dp; padding: 0 6dp 0 8dp; border-left: 3dp #00000000; border-bottom: 1dp #24405c66; font-weight: 500; font-size: 16dp; letter-spacing: 1dp; color: #8197ad; text-transform: uppercase; }
+        .w:hover { background-color: #3a8fc822; }
+        .w.on { color: #e8f4ff; border-left-color: #5cc8f0; background-color: #5cc8f014; }
+        .w .k { width: 30dp; font-size: 14dp; color: #5cc8f0; }
+        .w .n { flex: 1; white-space: nowrap; overflow: hidden; }
+        .w .a { margin-left: 8dp; color: #b9d4ea; }
+        .w.cloak { margin-top: 4dp; color: #8fb8d8; }
+        .w.cloak.on { color: #b98cf2; border-left-color: #b98cf2; }
+        .special { color: #f2d23c; font-size: 16dp; letter-spacing: 1dp; margin-top: 8dp; }
+        /* --- the cruise engine's countdown / charge (HUD_CruiseProgress). With the ring: an arc of 16 segments (-55 to +55 degrees) around
+           the top of the ring that fills from left to right, a glow riding its tip, caption and number above it;
+           the countdown shows the arc empty and the seconds pulsing; a full charge flashes the arc. With the bars:
+           a band of chevrons with a light running along it. It moves and sizes with the ship status but shows when
+           that is hidden (its own layer, the ship status' transform) */
+        .fp.cruisearc { left: 50%; margin-left: -310dp; bottom: 8dp; width: 620dp; height: 170dp; decorator: none; font-effect: shadow(1dp 1dp #000000cc); }
+        .grp .fp.cruisearc, .grp .fp.cruiseband { pointer-events: none; }
+        .cruisearc segarc { display: block; position: absolute; left: 0; top: 0; width: 1dp; height: 1dp; }
+        .cruisearc .glow { position: absolute; width: 44dp; height: 44dp; decorator: radial-gradient(circle, #ffe2a0e6 0%, #f2b13c80 30%, #f2b13c00 70%); animation: 0.9s sine-in-out infinite cr-glow; }
+        @keyframes cr-glow { 0% { opacity: 0.65; } 50% { opacity: 1; } 100% { opacity: 0.65; } }
+        .cruisearc .head { position: absolute; left: 160dp; width: 300dp; top: -58dp; text-align: center; }
+        .cruisearc .cv { display: block; font-family: "IBM Plex Mono"; font-size: 26dp; line-height: 30dp; color: #e8f4ff; }
+        .cruisearc .cc { display: block; margin-top: 2dp; font-weight: 600; font-size: 11dp; letter-spacing: 2.5dp; color: #f2b13c; text-transform: uppercase; white-space: nowrap; }
+        .cruisearc.count .cv { color: #f2b13c; font-size: 32dp; animation: 1s sine-in-out infinite cr-beat; }
+        @keyframes cr-beat { 0% { opacity: 1; } 50% { opacity: 0.35; } 100% { opacity: 1; } }
+        .cruisearc.count .glow { display: none; }
+        .cruisearc.done { animation: 0.35s sine-in-out 2 cr-flash; }
+        .cruisearc.done .cv, .cruisearc.done .cc { color: #5cc8f0; }
+        @keyframes cr-flash { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 1; } }
+        .fp.cruiseband { left: 50%; margin-left: -200dp; bottom: 86dp; width: 400dp; height: 62dp; decorator: none; font-effect: shadow(1dp 1dp #000000cc); }
+        .cruiseband .cc { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-weight: 600; font-size: 11dp; letter-spacing: 2.5dp; color: #f2b13c; text-transform: uppercase; white-space: nowrap; }
+        .cruiseband .row { position: absolute; left: 20dp; right: 90dp; top: 22dp; height: 18dp; display: flex; flex-direction: row; overflow: hidden; }
+        .cruiseband .ch { flex: 1; height: 18dp; margin-right: 5dp; transform: skewX(-30deg); background-color: #f2b13c2a; }
+        .cruiseband .ch.lit { background-color: #f2b13c; }
+        .cruiseband .run { position: absolute; top: 0; width: 22%; height: 18dp; left: -22%; decorator: horizontal-gradient(#dcf6ff00 #dcf6ffcc); animation: 1.1s linear infinite cr-run; }
+        @keyframes cr-run { 0% { left: -22%; } 100% { left: 100%; } }
+        .cruiseband .cv { position: absolute; right: 0; top: 14dp; width: 80dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 24dp; color: #e8f4ff; }
+        .cruiseband.count .cv { color: #f2b13c; animation: 1s sine-in-out infinite cr-beat; }
+        .cruiseband.count .run { display: none; }
+        .cruiseband.done { animation: 0.35s sine-in-out 2 cr-flash; }
+        /* 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 { decorator: ninepatch(fed, fed-i); drag: drag; cursor: move; }
+        .editing .tag { 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; pointer-events: auto; }
+        .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: 310dp; top: 40dp;"><span class="eye" data-action="eye" data-arg="0">{{ grp[0].shown ? 'Hide' : 'Show' }}</span>Maneuvers</div>
+    <div class="fp all 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"/><span class="lb">{{ m.label }}</span></div>
+    </div>
+    <div class="fp small 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 &amp;&amp; core_ring" style="left: 50%; margin-left: -310dp; bottom: 184dp;"><span class="eye" data-action="eye" data-arg="1">{{ grp[1].shown ? 'Hide' : 'Show' }}</span>Ship status</div>
+    <div class="tag" data-if="editing &amp;&amp; !core_ring" style="left: 50%; margin-left: -240dp; bottom: 82dp;"><span class="eye" data-action="eye" data-arg="1">{{ grp[1].shown ? 'Hide' : 'Show' }}</span>Ship status</div>
+    <div data-if="(core || editing) &amp;&amp; core_ring">
+        <div class="fp all core">
+            <div class="disc"></div>
+            <shipwire class="ship"/>
+            <segarc cx="310" cy="92" r="60" w="10.5" h="7" n="32" a0="5.6" da="11.25" data-attr-lit="shield_n * 2" on="#4fc6ee" off="#4fc6ee26"/>
+            <segarc cx="310" cy="92" r="48" w="8" h="3" n="32" a0="5.6" da="11.25" data-attr-lit="hull_n * 2" on="#e0484e" off="#e0484e33"/>
+            <segarc cx="310" cy="420" r="370" w="10" h="8" n="16" a0="-42" da="2" data-attr-lit="power_n" on="#f0943c" off="#f0943c26"/>
+            <segarc cx="310" cy="420" r="384" w="10" h="4" n="16" a0="-42" da="2" data-attr-lit="thrust_n" data-attr-on="thrust_low ? '#ef6a5b' : '#dbe6f0'" off="#dbe6f026"/>
+            <segarc cx="310" cy="420" r="372" w="10" h="12" n="16" a0="42" da="-2" data-attr-lit="speed_n" on="#5cc8f0" off="#5cc8f026"/>
+            <div class="pc"><span class="s">{{ shield_t }}%</span><span class="h">{{ hull_t }}%</span></div>
+            <div class="side l">
+                <span class="cap">THRUST</span><span class="big" data-class-low="thrust_low">{{ thrust }}</span>
+                <span class="pw"><span class="cap">POWER</span>{{ power_t }}%</span>
+            </div>
+            <div class="side r">
+                <span class="big">{{ speed }}<span class="u">m/s</span></span><span class="cap">SPEED</span>
+            </div>
+        </div>
+    </div>
+    <div data-if="(core || editing) &amp;&amp; !core_ring">
+        <div class="fp all coreb">
+            <div class="val thrust" data-class-low="thrust_low"><span class="cap">THRUST</span>{{ thrust }}</div>
+            <div class="sep"></div>
+            <div class="bars">
+                <div class="brow power"><span class="l">POWER</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="power_n &gt; 0"></div><div class="sg" data-class-lit="power_n &gt; 1"></div><div class="sg" data-class-lit="power_n &gt; 2"></div><div class="sg" data-class-lit="power_n &gt; 3"></div><div class="sg" data-class-lit="power_n &gt; 4"></div><div class="sg" data-class-lit="power_n &gt; 5"></div><div class="sg" data-class-lit="power_n &gt; 6"></div><div class="sg" data-class-lit="power_n &gt; 7"></div><div class="sg" data-class-lit="power_n &gt; 8"></div><div class="sg" data-class-lit="power_n &gt; 9"></div><div class="sg" data-class-lit="power_n &gt; 10"></div><div class="sg" data-class-lit="power_n &gt; 11"></div><div class="sg" data-class-lit="power_n &gt; 12"></div><div class="sg" data-class-lit="power_n &gt; 13"></div><div class="sg" data-class-lit="power_n &gt; 14"></div><div class="sg" data-class-lit="power_n &gt; 15"></div></div></div></div>
+                <div class="brow shield"><span class="l">SHIELD</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="shield_n &gt; 0"></div><div class="sg" data-class-lit="shield_n &gt; 1"></div><div class="sg" data-class-lit="shield_n &gt; 2"></div><div class="sg" data-class-lit="shield_n &gt; 3"></div><div class="sg" data-class-lit="shield_n &gt; 4"></div><div class="sg" data-class-lit="shield_n &gt; 5"></div><div class="sg" data-class-lit="shield_n &gt; 6"></div><div class="sg" data-class-lit="shield_n &gt; 7"></div><div class="sg" data-class-lit="shield_n &gt; 8"></div><div class="sg" data-class-lit="shield_n &gt; 9"></div><div class="sg" data-class-lit="shield_n &gt; 10"></div><div class="sg" data-class-lit="shield_n &gt; 11"></div><div class="sg" data-class-lit="shield_n &gt; 12"></div><div class="sg" data-class-lit="shield_n &gt; 13"></div><div class="sg" data-class-lit="shield_n &gt; 14"></div><div class="sg" data-class-lit="shield_n &gt; 15"></div></div></div></div>
+                <div class="brow hull"><span class="l">HULL</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="hull_n &gt; 0"></div><div class="sg" data-class-lit="hull_n &gt; 1"></div><div class="sg" data-class-lit="hull_n &gt; 2"></div><div class="sg" data-class-lit="hull_n &gt; 3"></div><div class="sg" data-class-lit="hull_n &gt; 4"></div><div class="sg" data-class-lit="hull_n &gt; 5"></div><div class="sg" data-class-lit="hull_n &gt; 6"></div><div class="sg" data-class-lit="hull_n &gt; 7"></div><div class="sg" data-class-lit="hull_n &gt; 8"></div><div class="sg" data-class-lit="hull_n &gt; 9"></div><div class="sg" data-class-lit="hull_n &gt; 10"></div><div class="sg" data-class-lit="hull_n &gt; 11"></div><div class="sg" data-class-lit="hull_n &gt; 12"></div><div class="sg" data-class-lit="hull_n &gt; 13"></div><div class="sg" data-class-lit="hull_n &gt; 14"></div><div class="sg" data-class-lit="hull_n &gt; 15"></div></div></div></div>
+            </div>
+            <div class="sep"></div>
+            <div class="val speed"><span class="cap">SPEED</span>{{ speed }}<span class="u">m/s</span></div>
+        </div>
+    </div>
+
+    </div>
+
+    <!-- the cruise engine's countdown / charge (HUD_CruiseProgress): around the ship status' ring (or above its bars),
+         with the ship status' move and size, also while that is hidden -->
+    <div class="grp g1" data-style-transform="grp[1].tf">
+        <div class="fp cruisearc" data-if="cruise_bar &amp;&amp; core_ring" data-class-count="cruise_count" data-class-done="cruise_done">
+            <segarc cx="310" cy="92" r="84" w="9" h="7" n="16" a0="-55" da="7.3333" data-attr-lit="cruise_n" on="#f2b13c" off="#f2b13c30"/>
+            <segarc cx="310" cy="92" r="94" w="9" h="2" n="16" a0="-55" da="7.3333" data-attr-lit="cruise_n" on="#ffd27a99" off="#5cc8f026"/>
+            <segarc cx="310" cy="92" r="84" w="10" h="9" n="1" data-attr-a0="cruise_tip_a" da="0" data-attr-lit="cruise_n &gt; 0 ? 1 : 0" on="#fff1c8" off="#00000000"/>
+            <div class="glow" data-if="cruise_n &gt; 0" data-style-left="cruise_tip_l" data-style-top="cruise_tip_t"></div>
+            <div class="head"><span class="cv">{{ cruise_val }}</span><span class="cc">{{ cruise_cap }}</span></div>
+        </div>
+        <div class="fp cruiseband" data-if="cruise_bar &amp;&amp; !core_ring" data-class-count="cruise_count" data-class-done="cruise_done">
+            <span class="cc">&#187; {{ cruise_cap }} &#171;</span>
+            <div class="row"><div class="ch" data-class-lit="cruise_n &gt; 0"></div><div class="ch" data-class-lit="cruise_n &gt; 1"></div><div class="ch" data-class-lit="cruise_n &gt; 2"></div><div class="ch" data-class-lit="cruise_n &gt; 3"></div><div class="ch" data-class-lit="cruise_n &gt; 4"></div><div class="ch" data-class-lit="cruise_n &gt; 5"></div><div class="ch" data-class-lit="cruise_n &gt; 6"></div><div class="ch" data-class-lit="cruise_n &gt; 7"></div><div class="ch" data-class-lit="cruise_n &gt; 8"></div><div class="ch" data-class-lit="cruise_n &gt; 9"></div><div class="ch" data-class-lit="cruise_n &gt; 10"></div><div class="ch" data-class-lit="cruise_n &gt; 11"></div><div class="ch" data-class-lit="cruise_n &gt; 12"></div><div class="ch" data-class-lit="cruise_n &gt; 13"></div><div class="ch" data-class-lit="cruise_n &gt; 14"></div><div class="ch" data-class-lit="cruise_n &gt; 15"></div><div class="run"></div></div>
+            <span class="cv">{{ cruise_val }}</span>
+        </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: 8dp; bottom: 390dp;"><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">
+            <span class="ttl">{{ mode == 1 ? 'TARGET' : 'CONTACTS' }}<span class="sl">\\\</span></span>
+            <span class="sp"></span>
+            <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"><div class="sg" data-class-lit="target_hull_n > 0"></div><div class="sg" data-class-lit="target_hull_n > 1"></div><div class="sg" data-class-lit="target_hull_n > 2"></div><div class="sg" data-class-lit="target_hull_n > 3"></div><div class="sg" data-class-lit="target_hull_n > 4"></div><div class="sg" data-class-lit="target_hull_n > 5"></div><div class="sg" data-class-lit="target_hull_n > 6"></div><div class="sg" data-class-lit="target_hull_n > 7"></div><div class="sg" data-class-lit="target_hull_n > 8"></div><div class="sg" data-class-lit="target_hull_n > 9"></div><div class="sg" data-class-lit="target_hull_n > 10"></div><div class="sg" data-class-lit="target_hull_n > 11"></div><div class="sg" data-class-lit="target_hull_n > 12"></div><div class="sg" data-class-lit="target_hull_n > 13"></div><div class="sg" data-class-lit="target_hull_n > 14"></div><div class="sg" data-class-lit="target_hull_n > 15"></div></div></div></div>
+                    <div class="tbar shield" data-if="target_has_shield"><span class="l">SHIELD</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="target_shield_n > 0"></div><div class="sg" data-class-lit="target_shield_n > 1"></div><div class="sg" data-class-lit="target_shield_n > 2"></div><div class="sg" data-class-lit="target_shield_n > 3"></div><div class="sg" data-class-lit="target_shield_n > 4"></div><div class="sg" data-class-lit="target_shield_n > 5"></div><div class="sg" data-class-lit="target_shield_n > 6"></div><div class="sg" data-class-lit="target_shield_n > 7"></div><div class="sg" data-class-lit="target_shield_n > 8"></div><div class="sg" data-class-lit="target_shield_n > 9"></div><div class="sg" data-class-lit="target_shield_n > 10"></div><div class="sg" data-class-lit="target_shield_n > 11"></div><div class="sg" data-class-lit="target_shield_n > 12"></div><div class="sg" data-class-lit="target_shield_n > 13"></div><div class="sg" data-class-lit="target_shield_n > 14"></div><div class="sg" data-class-lit="target_shield_n > 15"></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="n">{{ c.name }}</span><span class="r">{{ c.range }}</span>
+                    </div>
+                </div>
+                <div class="sbar" data-if="more_up || more_down">
+                    <div class="ar" data-class-off="!more_up" data-action="up">&#9650;</div>
+                    <div class="track">
+                        <div class="rail"></div>
+                        <div class="zu" data-action="up"></div><div class="zd" data-action="down"></div>
+                        <div class="thumb" data-style-top="thumb_top" data-style-height="thumb_size"></div>
+                    </div>
+                    <div class="ar" data-class-off="!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: 8dp; bottom: 390dp;"><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">
+            <span class="ttl">WEAPONS<span class="sl">\\\</span></span>
+            <span class="sp"></span>
+            <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="wl">
+            <div class="w" data-for="w : weapons" data-class-on="w.active" data-action="weapon" data-attr-data-arg="w.key">
+                <span class="k">{{ w.key + 1 }}</span><span class="n">{{ w.name }}</span><span class="a">{{ w.ammo }}</span>
+            </div>
+            <div class="w cloak" data-if="has_cloak" data-class-on="cloak_on" data-action="cloak"><span class="k"></span><span class="n">{{ cloak_name }}</span><span class="a">{{ cloak_on ? 'ON' : 'OFF' }}</span></div>
+            <div class="special" data-if="special != ''">{{ special }}</div>
+        </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 or its label to move it &#183; mouse wheel over it to size it &#183; Hide / Show on its label &#183; the REM bars, the radar and the chat by their tags &#183; Widgets: switch every part on or off. Parts snap to their home place.</div>
+        <div class="eb">
+            <div class="btn" data-action="ed_widgets">Widgets</div>
+            <div class="btn" data-action="ed_reset">Reset all</div>
+            <div class="btn" data-action="ed_cancel">Cancel</div>
+            <div class="btn primary" data-action="ed_save">Save</div>
+        </div>
+    </div>
+</body>
+</rml>
@@ -0,0 +1,122 @@
+<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; }
+        .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: 140dp; decorator: vertical-gradient(#0a1424 #05080d); margin-bottom: 12dp; }
+        .card { height: 110dp; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; background-color: #5cc8f008; }
+        .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 .abar { margin-right: 10dp; }
+        /* as the equipment dealer's list: the ship's hardpoints (what sits on each, the empty ones dim), what is mounted
+           without one, the hold -- not mounted, an amber edge; the hold's bar over the list (rem.rcss .dstat) */
+        .sec { display: flex; flex-direction: row; align-items: center; margin: 12dp 0 4dp 0; padding-bottom: 3dp; border-bottom: 1dp #2b6f9e; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #5cc8f0; }
+        .sec:first-child { margin-top: 0; }
+        .sec .cnt { margin-left: auto; font-family: "IBM Plex Mono"; font-weight: 400; letter-spacing: 0; color: #8197ad; }
+        .sec.held { color: #f2b13c; border-bottom-color: #f2b13c66; }
+        .inv .slot { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 10dp; letter-spacing: 1dp; text-transform: uppercase; white-space: nowrap; color: #8fb3d0; }
+        .inv.empty .n { color: #5c7a94; }
+        .inv.empty .txt { margin-left: 40dp; }
+        .inv.held { border-left-color: #f2b13c66; }
+        .inv.held.selected { border-left-color: #f2b13c; }
+        /* the credits over the list (one line whatever the sum), the hold's bar over the ship model: each has its
+           column's width instead of sharing the list's */
+        .holdrow { display: flex; flex-direction: row; margin-bottom: 8dp; }
+        .holdrow .dstat { margin-left: 0; }
+        .holdrow .sv { font-size: 17dp; white-space: nowrap; }
+        .holdtop { display: flex; flex-direction: row; margin-bottom: 8dp; }
+        .holdtop .dstat { margin-left: 0; flex: 1 1 0; min-width: 0; }
+        .holdtop .hbar { flex: 1 1 0; width: auto; min-width: 0; max-width: 460dp; }
+        .holdtop .ht { white-space: nowrap; }
+        .jet .btn { margin: 0; }
+        /* the picked piece's figures (rem_ui_stats), two to a row */
+        .figs { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 8dp; padding: 6dp 10dp; background-color: #5cc8f008; }
+        .figs .fg { width: 50%; display: flex; flex-direction: row; padding: 2dp 8dp 2dp 0; box-sizing: border-box; }
+        .figs .fl { flex: 1; white-space: nowrap; overflow: hidden; color: #8fb3d0; font-size: 13dp; }
+        .figs .fv { font-family: "IBM Plex Mono"; font-size: 13dp; color: #e8f4ff; }
+    </style>
+</head>
+<body class="window medium" 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="sl">\\\</span>
+        <span class="spacer"></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">
+                    <div class="holdrow"><div class="dstat"><span class="sk">CREDITS</span><span class="sv">{{ credits }}</span></div></div>
+                    <input class="text search" type="text" data-value="search" maxlength="40" style="margin-bottom: 8dp;"/>
+                    <div class="list">
+                        <div class="sec" data-if="hps.size &gt; 0">HARDPOINTS<span class="cnt">{{ hp_used }} / {{ hps.size }}</span></div>
+                        <div class="inv" data-for="r : hps" data-class-empty="r.key == ''" 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.key == '' ? 'empty' : r.name }}</div><div class="slot">{{ r.slot }}</div></div>
+                            <span class="c">{{ r.note }}</span>
+                        </div>
+                        <div class="sec" data-if="inside.size &gt; 0">MOUNTED, NO HARDPOINT</div>
+                        <div class="inv" data-for="r : inside" 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" data-if="r.note != ''">{{ r.note }}</div></div>
+                            <span class="c">{{ r.count }}</span>
+                        </div>
+                        <div class="sec held">CARGO HOLD &#183; NOT MOUNTED<span class="cnt">{{ items.size }}</span></div>
+                        <div class="hint" style="padding: 10dp;" data-if="items.size == 0">Nothing in the hold.</div>
+                        <div class="inv held" 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" data-if="r.note != ''">{{ r.note }}</div></div>
+                            <span class="c">{{ r.count }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm">
+                    <div class="holdtop"><div class="dstat"><span class="sk">HOLD</span><div class="hbar"><div class="hf" data-class-warn="hold_pct &gt;= 75" data-class-bad="hold_pct &gt;= 100" data-style-width="hold_pct + '%'"></div><span class="ht">{{ hold }}</span></div></div></div>
+                    <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="figs" data-if="stats.size &gt; 0"><div class="fg" data-for="f : stats"><span class="fl">{{ f.label }}</span><span class="fv">{{ f.value }}</span></div></div>
+                        <div class="card">{{ info }}</div>
+                        <div class="jet" data-if="mount_label != ''"><div class="btn primary" data-action="mount">{{ mount_label }}<div class="tip">{{ mount_tip }}</div></div></div>
+                        <div class="jet" data-if="can_jettison">
+                            <div class="abar" data-scrub="amount-at" data-class-off="amount_max &lt;= 1">
+                                <div class="arail"><div class="afill" data-style-width="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div><div class="tk" style="left: 25%;"></div><div class="tk" style="left: 50%;"></div><div class="tk" style="left: 75%;"></div><div class="aknob" data-style-left="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div></div>
+                                <div class="aticks" data-if="amount_max &gt; 1"><span class="lo" style="left: 0;">1</span><span style="left: 25%;" data-if="amount_max &gt;= 5">{{ 1 + (amount_max - 1) / 4 | format(0) }}</span><span style="left: 50%;" data-if="amount_max &gt;= 3">{{ 1 + (amount_max - 1) / 2 | format(0) }}</span><span style="left: 75%;" data-if="amount_max &gt;= 5">{{ 1 + (amount_max - 1) * 3 / 4 | format(0) }}</span><span class="hi">{{ amount_max }}</span></div>
+                            </div>
+                            <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>
@@ -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; background-color: #5cc8f008; }
+        .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; background-color: #5cc8f008; }
+        .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="sl">\\\</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-dbl="open" 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>
@@ -0,0 +1,23 @@
+<rml>
+<head>
+    <title>Loading</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        body.loaddoc { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; background-color: transparent; pointer-events: none; }
+        /* a small HUD panel (cut corners): the title with its three slashes, a segmented rail as the HUD's
+           bars with the amber sweep running over it (the loading screen's own phase: no real progress) */
+        .load { position: absolute; left: 50%; bottom: 60dp; transform: translateX(-50%); width: 460dp; padding: 12dp 22dp 16dp 26dp; decorator: ninepatch(fw, fw-i); }
+        .load .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; letter-spacing: 3dp; color: #e8f4ff; margin-bottom: 10dp; }
+        .load .t .sl { margin-left: 10dp; letter-spacing: -1dp; color: #5cc8f0; }
+        .load .track { position: relative; height: 8dp; display: flex; flex-direction: row; }
+        .load .sg { flex: 1; height: 8dp; margin-right: 2dp; background-color: #f2b13c26; }
+        .load .sweep { position: absolute; top: 0; width: 25%; height: 8dp; background-color: #f2b13ccc; }
+    </style>
+</head>
+<body class="loaddoc" data-model="loading">
+    <div class="load" data-if="shown">
+        <div class="t">LOADING<span class="sl">\\\</span></div>
+        <div class="track"><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 class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sweep" data-style-left="sweep"></div></div>
+    </div>
+</body>
+</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; margin-bottom: 12dp; background-color: #5cc8f008; }
+        .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="sl">\\\</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-dbl="open" 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>
@@ -0,0 +1,45 @@
+<rml>
+<head>
+    <title>Main menu</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* a panel at the left in the flight HUD's frame (cut corners, rem.rcss hudframes): the title with
+           its three slashes, the entries as the windows' side tabs -- amber the first, cyan under the mouse */
+        body.menu
+        {
+            position: absolute;
+            left: 28dp;
+            top: 20%;
+            width: 400dp;
+            bottom: 28dp;
+            decorator: ninepatch(fw, fw-i);
+            display: flex;
+            flex-direction: column;
+            padding: 0 0 0 0;
+        }
+        .brand { padding: 22dp 28dp 16dp 32dp; border-bottom: 1dp #2b6f9e; margin-bottom: 18dp; }
+        .brand .t { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 40dp; letter-spacing: 6dp; color: #e8f4ff; white-space: nowrap; }
+        .brand .t .sl { margin-left: 12dp; font-weight: 600; font-size: 34dp; letter-spacing: -1dp; color: #5cc8f0; }
+        .brand .s { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; letter-spacing: 4dp; text-transform: uppercase; color: #f2b13c; margin-top: -4dp; }
+        .entry { margin: 0 24dp 6dp 24dp; padding: 11dp 16dp; border-left: 2dp #2b6f9e; background-color: #5cc8f008; }
+        .entry:hover { border-left-color: #5cc8f0; background-color: #5cc8f01a; }
+        .entry.primary { border-left-color: #f2b13c; background-color: #f2b13c14; }
+        .entry .l { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; letter-spacing: 2dp; text-transform: uppercase; color: #dbe6f0; }
+        .entry.primary .l { color: #f2b13c; }
+        .entry:hover .l { color: #5cc8f0; }
+        .entry .h { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
+        .foot { margin: auto 28dp 22dp 32dp; padding-top: 10dp; border-top: 1dp #24405c; 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<span class="sl">\\\</span></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>
@@ -0,0 +1,65 @@
+/* the market's view (market.rml): its own window and the base manager's Galactic Market page
+   (base.rml #mkt-pane, the same RML) - every rule under .mkt, beside the base manager's own */
+.mkt .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+.mkt .goods { flex: 0 0 34%; display: flex; flex-direction: column; min-height: 0; margin-right: 18dp; }
+.mkt .detail { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; }
+.mkt .list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
+.mkt .g { display: flex; flex-direction: row; align-items: center; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; font-size: 14dp; }
+.mkt .g:hover { background-color: #122033; }
+.mkt .g.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
+.mkt .g .n { flex: 1; }
+.mkt .g.quiet .n { color: #8197ad; }
+.mkt .g .v { font-family: "IBM Plex Mono"; width: 50dp; text-align: right; font-size: 13dp; }
+.mkt .g .v.s { color: #f2b13c; }
+.mkt .g .v.b { color: #5fd08a; }
+.mkt .g .v.a { color: #dbe6f0; }
+.mkt .ghead { display: flex; flex-direction: row; padding: 0 10dp 4dp 12dp; font-size: 12dp; color: #8197ad; }
+.mkt .ghead .n { flex: 1; }
+.mkt .ghead .v { width: 50dp; text-align: right; }
+.mkt .tools { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
+.mkt .tools input { flex: 1; margin-right: 8dp; }
+.mkt .toggle { font-size: 13dp; color: #8197ad; padding: 4dp 8dp; border-bottom: 2dp #00000000; }
+.mkt .toggle.on { color: #f2b13c; border-bottom-color: #f2b13c; }
+.mkt .toggle:hover { color: #5cc8f0; }
+.mkt .ihead { display: flex; flex-direction: row; align-items: flex-end; margin-bottom: 8dp; }
+.mkt .ihead .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; color: #dbe6f0; flex: 1; }
+.mkt .ihead .prices { font-size: 13dp; color: #8197ad; }
+.mkt .chartbar { display: flex; flex-direction: row; align-items: center; margin-bottom: 6dp; }
+.mkt .chartbar .toggle { margin-right: 6dp; }
+.mkt .legend { margin-left: auto; font-size: 12dp; color: #8197ad; }
+.mkt .legend .k { display: inline-block; width: 10dp; height: 10dp; margin: 0 4dp 0 12dp; border-radius: 2dp; }
+.mkt .chart { position: relative; height: 190dp; margin-left: 76dp; background-color: #5cc8f008; }
+.mkt .chart .grid { position: absolute; left: 0; right: 0; height: 1dp; background-color: #24405c66; }
+.mkt .chart .col { position: absolute; top: 0; bottom: 0; }
+.mkt .chart .col:hover { background-color: #5cc8f014; }
+.mkt .chart .mean { position: absolute; bottom: 0; left: 0; right: 0; background-color: #f2b13c55; border-top: 2dp #f2b13c; border-radius: 2dp 2dp 0 0; }
+.mkt .chart .band { position: absolute; left: 35%; width: 30%; min-height: 2dp; background-color: #dbe6f0cc; border-radius: 1dp; }
+.mkt .chart .empty { position: absolute; left: 0; right: 0; top: 80dp; text-align: center; color: #8197ad; }
+.mkt .axis { position: relative; height: 0; }
+.mkt .axis .y { position: absolute; left: 0; width: 70dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; }
+.mkt .vol { position: relative; height: 34dp; margin-left: 76dp; margin-top: 3dp; }
+.mkt .vol .vb { position: absolute; bottom: 0; background-color: #3d6d96; border-radius: 2dp 2dp 0 0; }
+.mkt .dates { display: flex; flex-direction: row; margin-left: 76dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; margin-bottom: 12dp; }
+.mkt .dates .r { margin-left: auto; }
+.mkt .books { display: flex; flex-direction: row; min-height: 150dp; }
+.mkt .book { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.mkt .book.gap { margin-right: 14dp; }
+.mkt .book .table { flex: 1; height: 160dp; }
+.mkt .table .c2 { width: 60dp; text-align: right; font-family: "IBM Plex Mono"; }
+.mkt .table .mine .c1 { color: #5cc8f0; }
+.mkt .table .row.quiet { opacity: 0.55; }
+.mkt .panel { margin-top: 12dp; padding: 10dp 12dp; background-color: #5cc8f010; }
+.mkt .panel .row2 { display: flex; flex-direction: row; align-items: center; }
+.mkt .panel .label { width: 120dp; }
+.mkt .panel input.text { width: 120dp; margin-right: 10dp; }
+.mkt .panel .sum { font-family: "IBM Plex Mono"; color: #f2b13c; margin: 0 14dp; }
+.mkt .panel .info { font-size: 13dp; color: #8197ad; margin-top: 6dp; }
+.mkt .panel .pick { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; color: #dbe6f0; margin-bottom: 6dp; }
+.mkt .status { margin-top: 10dp; padding: 6dp 10dp; border-left: 3dp #5fd08a; background-color: #0d1622; }
+.mkt .status.bad { border-left-color: #ef6a5b; }
+.mkt .mine-split { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+.mkt .mine-split .table { flex: 1; }
+.mkt .mt .c1 { flex: 1; }
+.mkt .mt .cs { width: 70dp; }
+.mkt .mt .cb { width: 24%; }
+.mkt .mt .cn { width: 110dp; text-align: right; font-family: "IBM Plex Mono"; margin-right: 14dp; }
@@ -0,0 +1,172 @@
+<rml>
+<head>
+    <title>Market</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <link type="text/rcss" href="market.rcss"/>
+</head>
+<body class="window mkt" data-model="market">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/>
+        <span class="title">MARKET</span><span class="sl">\\\</span>
+        <span class="loc">{{ here }}</span>
+        <span class="spacer"></span>
+        <span class="chip">{{ fees }}<div class="tip">Broker fee: from your bank when you place an order or give it a new price. Sales tax: from what you get for a sale. Orders end after their days: goods back into the depot, escrow back to the bank.</div></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <!--PANE-->
+            <div class="subtabs">
+                <div class="tab" data-class-active="tab == 0" data-action="tab" data-arg="0">Market</div>
+                <div class="tab" data-class-active="tab == 1" data-action="tab" data-arg="1">My orders</div>
+                <span class="hint" style="margin-left: auto;">updates by itself</span>
+            </div>
+
+            <!-- ================================================= MARKET -->
+            <div class="split" data-if="tab == 0">
+                <div class="goods">
+                    <div class="tools">
+                        <input class="text" type="text" data-value="filter" maxlength="40"/>
+                        <span class="toggle" data-class-on="only_orders" data-action="only-orders">with orders<div class="tip">Only goods somebody offers or wants. Off: every commodity, to place a buy order for it.</div></span>
+                        <span class="toggle" data-class-on="only_watched" data-action="only-watched">watched<div class="tip">Only the goods you watch (Watch on a good). You hear when one gets a new best price.</div></span>
+                    </div>
+                    <div class="ghead"><span class="n">Good</span><span class="v">sell</span><span class="v">buy</span><span class="v">avg</span></div>
+                    <div class="list">
+                        <div class="hint" style="padding: 10dp;" data-if="goods.size == 0">{{ received ? 'No good matches.' : 'Asking the server...' }}</div>
+                        <div class="g" data-for="r : goods" data-class-selected="r.selected" data-class-quiet="!r.has_orders" data-action="good" data-attr-data-arg="r.key">
+                            <span class="n">{{ r.watched ? '* ' : '' }}{{ r.name }}</span><span class="v s">{{ r.sell }}</span><span class="v b">{{ r.buy }}</span><span class="v a">{{ r.avg }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="detail">
+                    <div class="ihead">
+                        <span class="t">{{ has_item ? item_name : 'Pick a good' }}</span>
+                        <span class="toggle" data-if="has_item" data-class-on="item_watched" data-action="watch" style="margin-right: 12dp;">{{ item_watched ? 'Watched' : 'Watch' }}<div class="tip">Follow this good: the watched filter shows it, a new best offer or buy order is reported to you. Your own orders: you hear when someone undercuts / outbids them or when they expire.</div></span>
+                        <span class="prices">{{ item_prices }}</span>
+                    </div>
+                    <div class="chartbar">
+                        <span class="toggle" data-class-on="!days90" data-action="days" data-arg="30">30 days</span>
+                        <span class="toggle" data-class-on="days90" data-action="days" data-arg="90">90 days</span>
+                        <span class="toggle" style="margin-left: 10dp;" data-class-on="!region_here" data-action="region" data-arg="all">all regions</span>
+                        <span class="toggle" data-class-on="region_here" data-action="region" data-arg="here">{{ here_region != '' ? here_region : 'this region' }}</span>
+                        <span class="legend"><span class="k" style="background-color: #f2b13c;"></span>market mean<span class="k" style="background-color: #dbe6f0;"></span>low - high<span class="k" style="background-color: #3d6d96;"></span>volume</span>
+                    </div>
+                    <div class="axis">
+                        <span class="y" style="top: 0dp;">{{ chart_hi }}</span>
+                        <span class="y" style="top: 176dp;">{{ chart_lo }}</span>
+                    </div>
+                    <div class="chart">
+                        <div class="grid" style="top: 25%;"></div><div class="grid" style="top: 50%;"></div><div class="grid" style="top: 75%;"></div>
+                        <div class="col" data-for="b : bars" data-style-left="b.x + '%'" data-style-width="b.w + '%'">
+                            <div class="mean" data-if="b.trades" data-style-height="b.mean + '%'"></div>
+                            <div class="band" data-if="b.trades" data-style-bottom="b.lo + '%'" data-style-height="(b.hi - b.lo) + '%'"></div>
+                            <div class="tip">{{ b.tip }}</div>
+                        </div>
+                        <div class="empty" data-if="chart_note != ''">{{ chart_note }}</div>
+                    </div>
+                    <div class="vol">
+                        <div class="vb" data-for="b : bars" data-style-left="b.x + '%'" data-style-width="b.w + '%'" data-style-height="b.vol + '%'"></div>
+                    </div>
+                    <div class="dates"><span>{{ chart_from }}</span><span class="r">{{ chart_to }}</span></div>
+
+                    <div class="books" data-if="has_item">
+                        <div class="book gap">
+                            <div class="label">Sell orders - buy from them</div>
+                            <div class="table">
+                                <div class="head"><span class="c1">Base</span><span class="c2">jumps</span><span class="c3">qty</span><span class="c4">price</span></div>
+                                <div class="body">
+                                    <div class="hint" style="padding: 8dp;" data-if="sells.size == 0">Nobody sells this. Place a buy order.</div>
+                                    <div class="row" data-for="r : sells" data-class-selected="r.selected" data-class-mine="r.mine" data-action="pick-sell" data-attr-data-arg="r.id">
+                                        <span class="c1">{{ r.base }}</span><span class="c2">{{ r.jumps }}</span><span class="c3">{{ r.qty }}</span><span class="c4">{{ r.price }}</span>
+                                        <div class="tip">{{ r.who }} - ends in {{ r.expires }}{{ r.mine ? ' - your order' : '' }}{{ r.eta }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="book">
+                            <div class="label">Buy orders - sell into them</div>
+                            <div class="table">
+                                <div class="head"><span class="c1">Base</span><span class="c2">jumps</span><span class="c3">qty</span><span class="c4">price</span></div>
+                                <div class="body">
+                                    <div class="hint" style="padding: 8dp;" data-if="buys.size == 0">Nobody wants this yet. Place a sell order.</div>
+                                    <div class="row" data-for="r : buys" data-class-selected="r.selected" data-class-mine="r.mine" data-class-quiet="!r.reach" data-action="pick-buy" data-attr-data-arg="r.id">
+                                        <span class="c1">{{ r.base }}</span><span class="c2">{{ r.jumps }}</span><span class="c3">{{ r.qty }}</span><span class="c4">{{ r.price }}</span>
+                                        <div class="tip">{{ r.who }} - ends in {{ r.expires }}{{ r.mine ? ' - your order' : '' }} - holds for {{ r.range }}{{ r.reach ? ' - you can sell into it from here' : ' - not from here' }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="panel" data-if="has_pick">
+                        <div class="pick">{{ pick_text }}</div>
+                        <div class="row2">
+                            <input class="range" type="range" min="1" step="1" data-attr-max="amount_max" data-value="amount"/>
+                            <span class="num" style="width: 80dp; text-align: right;">{{ amount_text }}</span>
+                            <div class="btn" style="margin-left: 10dp; padding: 3dp 10dp;" data-action="max">Max</div>
+                            <span class="sum">{{ deal_total }}</span>
+                            <div class="btn primary" data-action="deal">{{ pick_buy ? 'Sell' : 'Buy' }}<div class="tip">{{ pick_buy ? 'Sells from your depot on that base into the buy order; the credits go to your bank.' : 'Buys with your bank credits; the goods go into your depot on that base.' }}</div></div>
+                        </div>
+                    </div>
+
+                    <div class="panel" data-if="has_item">
+                        <div class="row2" style="margin-bottom: 8dp;">
+                            <span class="toggle" data-class-on="!place_buy" data-action="place-mode" data-arg="sell">Sell order</span>
+                            <span class="toggle" style="margin-left: 6dp;" data-class-on="place_buy" data-action="place-mode" data-arg="buy">Buy order</span>
+                            <span class="hint" style="margin-left: 14dp;">{{ place_have }}</span>
+                        </div>
+                        <div class="row2">
+                            <span class="label">Amount</span><input class="text" type="text" data-value="place_qty" maxlength="10"/>
+                            <span class="label" style="width: 90dp;">Price / unit</span><input class="text" type="text" data-value="place_price" maxlength="12"/>
+                            <span class="label" style="width: 50dp;">Days</span><input class="text" type="text" style="width: 50dp;" data-value="place_days" maxlength="2"/>
+                            <span class="toggle on" data-if="place_buy" style="margin-right: 10dp;" data-action="place-range">Reach: {{ place_range }}<div class="tip">Where sellers may sell into your buy order: this station, this system, up to some jumps or the whole region. What they sell from another base goes into your depot there - you fetch it. Click for the next.</div></span>
+                            <div class="btn primary" data-class-disabled="!can_place" data-action="place">Place<div class="tip">Sell order: the goods leave your depot here and wait on the market. Buy order: the credits wait in escrow; what is sold into it goes into your depot here.</div></div>
+                        </div>
+                        <div class="info">{{ place_info }}</div>
+                    </div>
+
+                    <div class="status" data-class-bad="!status_ok" data-if="status != ''">{{ status }}</div>
+                </div>
+            </div>
+
+            <!-- ================================================= MY ORDERS -->
+            <div class="mine-split" data-if="tab == 1">
+                <div class="label">Your orders</div>
+                <div class="table mt" style="flex: 1 1 0;">
+                    <div class="head"><span class="cs">Kind</span><span class="c1">Good</span><span class="cb">Base</span><span class="cn">qty</span><span class="cn">price</span><span class="cn">ends in</span></div>
+                    <div class="body">
+                        <div class="hint" style="padding: 8dp;" data-if="mine.size == 0">You have no orders on the market.</div>
+                        <div class="row" data-for="r : mine" data-class-selected="r.selected" data-action="mine-pick" data-attr-data-arg="r.id">
+                            <span class="cs" data-style-color="r.buy ? '#5fd08a' : '#f2b13c'">{{ r.kind }}</span><span class="c1">{{ r.item }}</span><span class="cb">{{ r.base }}</span>
+                            <span class="cn">{{ r.qty }}</span><span class="cn">{{ r.price }}</span><span class="cn">{{ r.expires }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="panel" data-if="has_mine_pick">
+                    <div class="row2">
+                        <span class="label">New price</span><input class="text" type="text" data-value="reprice" maxlength="12"/>
+                        <div class="btn primary" data-action="mine-price">Set price<div class="tip">A new price per unit; the broker fee is charged again. A buy order's escrow follows the price.</div></div>
+                        <div class="btn danger" style="margin-left: 10dp;" data-action="mine-cancel">Take back<div class="tip">Sell order: the goods go back into your depot on that base. Buy order: the escrow goes back to your bank.</div></div>
+                    </div>
+                </div>
+                <div class="status" data-class-bad="!status_ok" data-if="status != ''">{{ status }}</div>
+                <div class="label" style="margin-top: 12dp;">Your last trades</div>
+                <div class="table mt" style="flex: 1 1 0;">
+                    <div class="head"><span class="cb">When</span><span class="cs">Side</span><span class="c1">Good</span><span class="cn">qty</span><span class="cn">price</span><span class="cb">Base</span></div>
+                    <div class="body">
+                        <div class="hint" style="padding: 8dp;" data-if="trades.size == 0">No trades yet.</div>
+                        <div class="row" data-for="r : trades">
+                            <span class="cb">{{ r.when }}</span><span class="cs">{{ r.side }}</span><span class="c1">{{ r.item }}</span>
+                            <span class="cn">{{ r.qty }}</span><span class="cn">{{ r.price }}</span><span class="cb">{{ r.base }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--/PANE-->
+        </div>
+    </div>
+    <div class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+    </div>
+</body>
+</rml>
@@ -0,0 +1,78 @@
+<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-left: 3dp #24405c; background-color: #5cc8f010; }
+        .offer:hover { border-left-color: #5cc8f0; }
+        .offer.selected { border-left-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: 280dp; height: 280dp; margin: 0 0 10dp 0; }
+        .briefing { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; background-color: #5cc8f008; }
+        .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="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">Offers <span class="v">{{ all_count }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="subtabs">
+                <div class="tab" data-class-active="tab == 0" data-action="tab" data-arg="0">Arc missions ({{ arc_count }})</div>
+                <div class="tab" data-class-active="tab == 1" data-action="tab" data-arg="1">Job offers ({{ job_count }})</div>
+            </div>
+            <div class="empty-board" data-if="offers.size == 0">
+                <img src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/>
+                <div class="hint">{{ all_count == 0 ? empty_text : (tab == 0 ? 'No story chapter for you here right now.' : 'No other job offers here.') }}</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-dbl="accept" 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>
@@ -0,0 +1,40 @@
+<rml>
+<head>
+    <title>Mission log</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* accents at the left instead of boxes in the window's box */
+        .cap { display: block; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 2dp; color: #8fb3d0; margin-bottom: 8dp; }
+        .cap .sl { margin-left: 8dp; color: #5cc8f0; letter-spacing: -1dp; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+        .now { border-left: 3dp #f2b13c; background-color: #f2b13c14; padding: 10dp 14dp; margin-bottom: 18dp; }
+        .now .cap { color: #f2b13c; margin-bottom: 4dp; }
+        .now .t { font-size: 16dp; line-height: 1.45; white-space: pre-line; color: #e8f4ff; }
+        .list { flex: 1; overflow-y: auto; }
+        .entry { padding: 8dp 12dp; border-left: 3dp #00000000; border-bottom: 1dp #24405c66; white-space: pre-line; line-height: 1.4; font-size: 14dp; color: #8197ad; }
+        .entry.objective { border-left-color: #5cc8f0; color: #dbe6f0; background-color: #5cc8f00f; }
+    </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="sl">\\\</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 != ''"><span class="cap">CURRENT OBJECTIVE</span><div class="t">{{ current }}</div></div>
+                <span class="cap">HISTORY<span class="sl">\\\</span></span>
+                <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>
@@ -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 { padding: 12dp; margin-bottom: 12dp; background-color: #5cc8f010; }
+        .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="sl">\\\</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>
@@ -0,0 +1,50 @@
+<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: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: transparent;
+        }
+        /* in the flight HUD's design, as its maneuver bar (hud.rml .mans): one frame with cut corners
+           (rem.rcss, hudframes), icon over its name, a thin line between, the active one amber */
+        .navbar { display: flex; flex-direction: row; align-items: center; height: 76dp; box-sizing: border-box; padding: 0 18dp; decorator: ninepatch(fb, fb-i); }
+        .nb { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 84dp; height: 62dp; padding: 0 10dp; border-left: 1dp #2b6f9e; }
+        .nb:first-child, .nb.active { border-left-width: 0; }
+        .nb:hover { background-color: #f2b13c14; }
+        .nb.active { background-color: #f2b13c1f; }
+        .nb.disabled { opacity: 0.35; }
+        .nb.disabled:hover { background-color: transparent; }
+        .nb img { width: 34dp; height: 34dp; }
+        .nb:hover img, .nb.active img { image-color: #f2b13c; }
+        .nb span { margin-top: 2dp; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; white-space: nowrap; color: #b9d4ea; }
+        .nb.active span { color: #f2b13c; }
+        /* the room's services (repair, launch, the dealer's desk, ...) in a smaller second row under it */
+        .navbar.tabs { height: 56dp; margin-top: 4dp; padding: 0 14dp; }
+        .tabs .nb { min-width: 72dp; height: 46dp; }
+        .tabs .nb img { width: 26dp; height: 26dp; }
+    </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>
+    <div class="navbar tabs" data-if="shown && tabs.size &gt; 0">
+        <div class="nb" 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>
@@ -0,0 +1,197 @@
+<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 */
+        /* the frame's edge alone over the whole window (hudframes fo); the head and the side bring
+           their fills with the cut corners, just inside the edge -- no fill over the map. The map
+           box is 760 dp (rem_ui_navmap.cpp kMapDp): the window only as big as map and side */
+        body.window { decorator: ninepatch(fo, fo-i); left: 19%; top: 7%; width: 1180dp; height: 880dp; max-width: none; }
+        .win-head { decorator: ninepatch(fh, fh-i); margin: 2dp 2dp 0 2dp; }
+        .win-main .content { padding: 0; }
+        .mapframe { display: flex; flex-direction: column; margin: 0 0 2dp 2dp; border: 18dp #0d1622eb; border-right-width: 0; border-bottom-width: 0; }
+        .mapfill { flex: 1; min-height: 18dp; background-color: #0d1622eb; }
+        #map .gcol, #map .gnum { position: absolute; font-family: "Saira SemiCondensed"; font-size: 13dp; letter-spacing: 1dp; color: #8fb3d0c0; }
+        #map .gcol { top: 4dp; width: 20dp; margin-left: -10dp; text-align: center; }
+        #map .gnum { left: 6dp; height: 16dp; margin-top: -8dp; line-height: 16dp; }
+        #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: 0 2dp 2dp 0; padding: 18dp; decorator: ninepatch(fbr, fbr-i); 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; margin-bottom: 10dp; background-color: #5cc8f008; }
+        .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; margin-bottom: 10dp; border-left: 3dp #f2b13c; background-color: #5cc8f008; }
+        .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; background-color: #5cc8f008; }
+        .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; max-height: 220dp; overflow-y: auto; background-color: #5cc8f008; }
+        .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; }
+        .bookmark.locked .s { border-color: #f2b13c; background-color: #8a6420; }
+        .bookmark.sel .s { border-color: #ffffff; }
+        .hit .mk { margin-left: 6dp; padding: 0 6dp; font-size: 11dp; color: #8197ad; border: 1dp #24405c; border-radius: 2dp; }
+        .hit .mk:hover { color: #f2b13c; border-color: #f2b13c; }
+        .hit .mk.del:hover { color: #ef6a5b; border-color: #ef6a5b; }
+        .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; decorator: ninepatch(fw, fw-i); }
+        .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; }
+
+        /* the original's look (player's wish): lanes, jump links, the route and every marker are drawn by
+           the original map under the box (NeuroNetNavMap::RemDrawBackground); ours stay as names, the
+           selection ring and the bookmarks (REM's own) */
+        .ln { display: none; }
+        .mi .s { opacity: 0; }
+        .bookmark .s { opacity: 1; }
+    </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="sl">\\\</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="gcol" data-for="g : grid_cols" data-style-left="g.left">{{ g.name }}</div>
+                    <div class="gnum" data-for="g : grid_rows" data-style-top="g.top">{{ g.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 class="pb" data-if="can_mark" data-action="bookmark">Set bookmark</div>
+                        <div class="pb" data-if="pick_mark" data-action="mark_lock">{{ mark_locked ? 'Unlock bookmark' : 'Lock bookmark' }}</div>
+                        <div class="pb" data-if="pick_mark &amp;&amp; !mark_locked" data-action="mark_del">Delete bookmark</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-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="universe &amp;&amp; uncharted_list.size &gt; 0 &amp;&amp; search == ''">
+                        <h3>Known uncharted systems</h3>
+                        <div class="hit" data-for="u : uncharted_list"><span class="hn">{{ u.name }}</span><span class="hk">{{ u.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><span class="mk" data-action="mark_lock" data-attr-data-arg="b.key">{{ b.kind == 'locked' ? 'Unlock' : 'Lock' }}<span class="tip">{{ b.kind == 'locked' ? 'Locked: it can be neither moved nor deleted. Click to unlock.' : 'Lock it in place: no moving, no deleting.' }}</span></span><span class="mk del" data-if="b.kind != 'locked'" data-action="mark_del" data-attr-data-arg="b.key">&#215;</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>
@@ -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-left: 3dp #24405c; background-color: #5cc8f010; }
+        .story:hover { border-left-color: #5cc8f0; }
+        .story.selected { border-left-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: 320dp; height: 320dp; margin: 4dp 0 12dp 0; }
+        .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; font-size: 16dp; background-color: #5cc8f008; }
+    </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="sl">\\\</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>
@@ -0,0 +1,33 @@
+<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; }
+        /* in the flight HUD's design: one frame with cut corners (rem.rcss, hudframes), no box per icon */
+        .nnbar { pointer-events: auto; position: absolute; top: 0; right: 0; height: 52dp; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; padding: 0 16dp; decorator: ninepatch(fb, fb-i); }
+        .nb { width: 40dp; padding: 4dp 5dp; margin: 0 1dp; border-radius: 3dp; position: relative; }
+        .nb:hover { background-color: #5cc8f01a; }
+        .nb.active { background-color: #f2b13c1f; }
+        .nb img { width: 30dp; height: 30dp; display: block; image-color: #b9d4ea; }
+        .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 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: 46dp; right: 0; left: auto; bottom: auto; width: 230dp; white-space: normal; text-align: right; }
+        .edit-grip { display: none; position: absolute; left: 0; top: 0; padding: 2dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; border-radius: 3dp; white-space: nowrap; drag: drag; cursor: move; pointer-events: auto; z-index: 10; }
+        .hud-editing .edit-grip { display: block; }
+    </style>
+</head>
+<body class="nnstrip movable" data-model="nnbar">
+    <div class="win-head edit-grip">NeuroNet bar &#10021;</div>
+    <div class="nnbar" data-if="shown" data-style-width="icons.size * 42 + 32 + '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>
@@ -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>
@@ -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; decorator: ninepatch(fw, fw-i); }
+        .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; decorator: ninepatch(fw, fw-i); }
+        @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>
@@ -0,0 +1,28 @@
+<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. The body spans the
+           screen (a 0 x 0 body made the banner's box shrink to nothing at the left edge with the
+           text running out of it) and lets the mouse through. */
+        body.objdoc { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; background-color: transparent; pointer-events: none; }
+        .obj
+        {
+            margin-top: 70dp;
+            max-width: 900dp;
+            padding: 8dp 22dp;
+            font-family: "Saira SemiCondensed";
+            font-weight: 600;
+            font-size: 17dp;
+            letter-spacing: 1.5dp;
+            color: #f2b13c;
+            text-align: center;
+            decorator: ninepatch(fw, fw-i);
+        }
+    </style>
+</head>
+<body class="objdoc" data-model="objective">
+    <div class="obj" data-if="shown" data-style-opacity="opacity">{{ text }}</div>
+</body>
+</rml>
@@ -0,0 +1,114 @@
+<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; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; letter-spacing: 1.5dp; text-transform: uppercase; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
+        .page:hover { color: #5cc8f0; border-left-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; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; border-bottom: 2dp #00000000; }
+        .subtab:hover { color: #5cc8f0; border-bottom-color: #5cc8f0; }
+        .subtab.active { color: #f2b13c; border-bottom-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: 18dp; margin: 0 8dp; padding: 6dp 0; cursor: pointer; }
+        .slide .rail { height: 6dp; background-color: #24405c; border-radius: 3dp; }
+        .slide .track:hover .rail { background-color: #2e5378; }
+        .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; display: flex; flex-direction: row; align-items: center; border-left: 3dp #f2b13c; background-color: #5cc8f008; }
+        .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="sl">\\\</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="can_save" data-class-disabled="!unsaved" data-action="save">Save settings<div class="tip">Applies and keeps the changed settings (marked).</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" data-scrub="set" data-attr-data-arg="r.key"><div class="rail"><div class="fill" data-style-width="r.fill + '%'"></div></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 class="btn" data-if="r.kind == 4" data-action="open-window" data-attr-data-arg="r.value">Open</div>
+                            </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 ? 'Settings changed - not saved yet.' : 'Settings marked * take effect after a restart.' }}</span>
+    </div>
+</body>
+</rml>
@@ -0,0 +1,196 @@
+<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; }
+        .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.misfit { opacity: 0.45; } /* fits no hardpoint of the ship: still for sale, into the hold */
+        .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; decorator: vertical-gradient(#0a1424 #05080d); }
+        .deal { margin-top: 14dp; padding: 12dp; display: flex; flex-direction: row; align-items: center; background-color: #5cc8f010; }
+        .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; background-color: #5cc8f008; }
+        .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; }
+        .col-h .tools { margin-left: auto; display: flex; flex-direction: row; align-items: center; }
+        .col-h .tools .btn { margin: 0 0 0 8dp; padding: 3dp 10dp; }
+        .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; }
+        .flag { display: flex; flex-direction: row; align-items: center; font-size: 13dp; color: #b8c4cc; }
+        .flag .switch { width: 44dp; margin-right: 6dp; }
+        .gear { font-size: 16dp; }
+        .panel { position: absolute; top: 60dp; width: 420dp; max-height: 70%; display: flex; flex-direction: column; padding: 14dp; z-index: 10; decorator: ninepatch(fw, fw-i); }
+        .panel.left { left: 24dp; }
+        .panel.right { right: 24dp; }
+        .panel h3 { margin-bottom: 4dp; }
+        .panel .pnote { font-size: 12dp; color: #8197ad; margin-bottom: 10dp; }
+        .panel .plist { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+        .panel .prow { display: flex; flex-direction: row; align-items: center; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; }
+        .panel .prow .n { flex: 1; min-width: 0; }
+        .panel .pfoot { display: flex; flex-direction: row; margin-top: 10dp; }
+        .panel .pfoot .btn { margin: 0 8dp 0 0; padding: 3dp 10dp; }
+        .content { position: relative; }
+        /* your equipment in three parts: the ship's hardpoints (what sits on each, the empty ones dim), what is
+           mounted without a hardpoint, the hold -- not mounted, an amber edge */
+        .sec { display: flex; flex-direction: row; align-items: center; margin: 12dp 0 4dp 0; padding-bottom: 3dp; border-bottom: 1dp #2b6f9e; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #5cc8f0; }
+        .sec:first-child { margin-top: 0; }
+        .sec .cnt { margin-left: auto; font-family: "IBM Plex Mono"; font-weight: 400; letter-spacing: 0; color: #8197ad; }
+        .sec.held { color: #f2b13c; border-bottom-color: #f2b13c66; }
+        .good .slot { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 10dp; letter-spacing: 1dp; text-transform: uppercase; white-space: nowrap; color: #8fb3d0; }
+        .good.empty .n { color: #5c7a94; }
+        .good.empty .txt { margin-left: 40dp; } /* in line with the rows that have an icon (30 + 10 dp) */
+        .good.held { border-left-color: #f2b13c66; }
+        .good.held.selected { border-left-color: #f2b13c; }
+        .good.held .note { color: #5fd08a; }
+    </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="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip" data-if="tax != ''">{{ tax }}<div class="tip">The server takes this share of what you sell to the base. It follows the region's trade of the last days: the busiest region pays the most.</div></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="subtabs">
+                <div class="tab" data-class-active="category == -1" data-action="category" data-arg="-1">All</div>
+                <div class="tab" data-class-active="category == 0" data-action="category" data-arg="0">Weapons</div>
+                <div class="tab" data-class-active="category == 1" data-action="category" data-arg="1">Ammo</div>
+                <div class="tab" data-class-active="category == 2" data-action="category" data-arg="2">Equipment</div>
+                <div class="tab" data-class-active="category == 3" data-action="category" data-arg="3">Cargo bay</div>
+                <div class="dstat" style="margin-left: auto;"><span class="sk">HOLD</span><div class="hbar"><div class="hf" data-class-warn="hold_pct &gt;= 75" data-class-bad="hold_pct &gt;= 100" data-style-width="hold_pct + '%'"></div><span class="ht">{{ hold }}</span></div></div>
+                <div class="dstat"><span class="sk">CREDITS</span><span class="sv">{{ credits }}</span></div>
+            </div>
+            <div class="split">
+                <div class="colm">
+                    <div class="col-h"><h3>For sale here</h3><span class="hint" style="margin-left: 10dp;">{{ market.size }}</span>
+                        <span class="tools"><div class="btn" data-class-active="panel == 1" data-action="autobuy-panel"><span class="gear">&#9881;</span> Autobuy<div class="tip">What the server buys by itself when you dock: ammunition for your launchers, nanobots and shield batteries.</div></div></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-class-misfit="r.slot == 'Incompatible'" data-action="buy-pick" data-dbl="deal" 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="slot" data-if="r.slot != ''">{{ r.slot }}</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><span class="tools"><div class="btn" data-action="ship-reset">Reset view<div class="tip">Turns the ship back to its start view and zoom.</div></div></span></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="tools">
+                            <span class="flag"><div class="switch" data-class-on="hide_mounted" data-action="hide-mounted">{{ hide_mounted ? 'ON' : 'OFF' }}</div>loot only<div class="tip">Leaves out what is mounted and the ammunition, nanobots and shield batteries your ship uses: what is left is loot to sell.</div></span>
+                            <div class="btn" data-class-disabled="loot_count == 0" data-action="sell-loot">Sell all loot ({{ loot_count }})<div class="tip">Sells everything that came aboard since you last launched (loot), except what you keep (the gear button).</div></div>
+                            <div class="btn" data-class-active="panel == 2" data-action="keep-panel"><span class="gear">&#9881;</span><div class="tip">What "Sell all loot" keeps.</div></div>
+                        </span>
+                    </div>
+                    <div class="list">
+                        <div class="sec" data-if="hps.size &gt; 0">HARDPOINTS<span class="cnt">{{ hp_used }} / {{ hps.size }}</span></div>
+                        <div class="good" data-for="r : hps" data-class-empty="r.key == ''" data-class-selected="r.selected" data-class-disabled="r.disabled" data-action="sell-pick" data-dbl="deal" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                            <div class="txt"><div class="n">{{ r.key == '' ? 'empty' : r.name }}</div><div class="slot">{{ r.slot }}</div></div>
+                            <span class="p">{{ r.price }}</span>
+                        </div>
+                        <div class="sec" data-if="inside.size &gt; 0">MOUNTED, NO HARDPOINT</div>
+                        <div class="good" data-for="r : inside" data-class-selected="r.selected" data-class-disabled="r.disabled" data-action="sell-pick" data-dbl="deal" 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>
+                            <span class="c">{{ r.count }}</span><span class="p">{{ r.price }}</span>
+                        </div>
+                        <div class="sec held">CARGO HOLD &#183; NOT MOUNTED<span class="cnt">{{ hold }}</span></div>
+                        <div class="hint" style="padding: 10dp;" data-if="gear.size == 0">Nothing in the hold.</div>
+                        <div class="good held" data-for="r : gear" data-class-selected="r.selected" data-class-disabled="r.disabled" data-action="sell-pick" data-dbl="deal" 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="c">{{ r.count }}</span><span class="p">{{ r.price }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="panel left" data-if="panel == 1">
+                <h3>AUTOBUY</h3>
+                <div class="pnote" data-if="autobuy_known">Bought by itself when you dock, where the base sells it, as far as hold and credits go (also /autobuy in the chat).</div>
+                <div class="pnote" data-if="!autobuy_known">This server sends no autobuy settings.</div>
+                <div class="plist">
+                    <div class="prow" data-for="r : autobuy"><span class="n">{{ r.name }}</span><div class="switch" data-class-on="r.on" data-action="autobuy" data-attr-data-arg="r.key">{{ r.on ? 'ON' : 'OFF' }}</div></div>
+                </div>
+                <div class="pfoot"><div class="btn" data-action="autobuy-all" data-arg="1">All on</div><div class="btn" data-action="autobuy-all" data-arg="0">All off</div><div class="btn" data-action="autobuy-panel">Close</div></div>
+            </div>
+            <div class="panel right" data-if="panel == 2">
+                <h3>KEEP LOOT</h3>
+                <div class="pnote">"Sell all loot" sells everything that came aboard since you launched; what is set to KEEP here stays in the hold.</div>
+                <div class="plist">
+                    <div class="hint" style="padding: 10dp;" data-if="keep.size == 0">No equipment in the hold.</div>
+                    <div class="prow" data-for="r : keep"><span class="n">{{ r.name }}</span><div class="switch" data-class-on="r.on" data-action="keep" data-attr-data-arg="r.key">{{ r.on ? 'KEEP' : 'SELL' }}</div></div>
+                </div>
+                <div class="pfoot"><div class="btn" data-action="keep-panel">Close</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">
+                    <div class="abar" data-scrub="amount-at" data-class-off="amount_max &lt;= 1">
+                        <div class="arail"><div class="afill" data-style-width="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div><div class="tk" style="left: 25%;"></div><div class="tk" style="left: 50%;"></div><div class="tk" style="left: 75%;"></div><div class="aknob" data-style-left="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div></div>
+                        <div class="aticks" data-if="amount_max &gt; 1"><span class="lo" style="left: 0;">1</span><span style="left: 25%;" data-if="amount_max &gt;= 5">{{ 1 + (amount_max - 1) / 4 | format(0) }}</span><span style="left: 50%;" data-if="amount_max &gt;= 3">{{ 1 + (amount_max - 1) / 2 | format(0) }}</span><span style="left: 75%;" data-if="amount_max &gt;= 5">{{ 1 + (amount_max - 1) * 3 / 4 | format(0) }}</span><span class="hi">{{ amount_max }}</span></div>
+                    </div>
+                    <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>
+                <span class="why" data-if="tax_note != ''" style="color: #b8c4cc;">{{ tax_note }}</span>
+                <div class="btn" style="margin-right: 10dp;" data-if="side == 1 &amp;&amp; mount_label != ''" data-action="mount">{{ mount_label }}<div class="tip">{{ mount_tip }}</div></div>
+                <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>
@@ -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; padding: 18dp 22dp 12dp 22dp; decorator: ninepatch(fw, fw-i); }
+        .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-left: 3dp #3d6d96; background-color: #5cc8f010; }
+        .row:hover { border-left-color: #5cc8f0; background-color: #5cc8f01a; }
+        .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>
@@ -0,0 +1,127 @@
+<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; padding: 10dp 12dp; background-color: #5cc8f010; }
+        .stat .stat-ico { width: 34dp; height: auto; max-height: 34dp; margin-right: 12dp; } /* the icons' own colours, their own proportions (a blue tint and a forced square made them look washed out and squashed) */
+        .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-left: 3dp #24405c; background-color: #5cc8f010; }
+        .skill:hover { border-left-color: #5cc8f0; }
+        .skill.selected { border-left-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; }
+        .skill .eff { display: block; font-family: "IBM Plex Mono"; font-weight: 400; font-size: 11dp; color: #8197ad; margin-top: 2dp; }
+        .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; }
+        .coin-log .row .c1 { width: 120dp; font-family: "IBM Plex Mono"; color: #8197ad; }
+        .coin-log .row .c2 { width: 110dp; font-family: "IBM Plex Mono"; text-align: right; margin-right: 12dp; }
+        .coin-log .row .c2.plus { color: #5fd08a; }
+        .coin-log .row .c3 { width: 80dp; }
+        .coin-log .row .c4 { flex: 1; color: #8197ad; }
+    </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="sl">\\\</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="chip">REM Coin <span class="v">{{ coins }}</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 class="item" data-class-active="page == 3" data-action="page" data-arg="3"><img class="ico" src="3db:INTERFACE/REM/IMAGES/stat_rating_icon.3db"/><span>REM Coin</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 class="eff" data-if="k.effect != ''">{{ k.effect }}</span></span>
+                    <span class="lvl">{{ k.level }} / {{ k.maxlvl }}</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 class="split" data-if="page == 3">
+                <div class="colm gap">
+                    <h3>REM Coin</h3>
+                    <div class="big-num">{{ coins }}</div>
+                    <div class="hint" data-if="coin_note != ''">{{ coin_note }}</div>
+                    <div class="hint" style="margin-bottom: 10dp;">{{ coin_drones }}</div>
+                    <div class="namefield"><span class="label">This character</span><span class="v">{{ coin_xp }}</span></div>
+                    <div class="namefield"><span class="label">Amount</span><input class="text" type="text" data-value="coin_amount" maxlength="13"/></div>
+                    <div class="actions">
+                        <div class="btn primary" data-action="coin_xp">XP to REM Coin<div class="tip">{{ coin_xp_rule }}</div></div>
+                        <div class="btn" data-action="coin_all_xp">All XP<div class="tip">Turns all XP of this character into REM Coin.</div></div>
+                        <div class="btn primary" data-if="coin_exchange" data-action="coin_credits">REM Coin to credits<div class="tip">{{ coin_cr_rule }}</div></div>
+                    </div>
+                    <div class="hint">REM Coin belongs to your Discord account - all your characters share it. You earn it with XP and with your drones, and spend it in the shop.</div>
+                </div>
+                <div class="colm">
+                    <h3 style="margin-bottom: 8dp;">Bookings</h3>
+                    <div class="table coin-log" style="flex: 1;">
+                        <div class="body">
+                            <div class="empty" data-if="coin_log.size == 0">No bookings yet.</div>
+                            <div class="row" data-for="l : coin_log"><span class="c1">{{ l.time }}</span><span class="c2" data-class-plus="l.plus">{{ l.delta }}</span><span class="c3">{{ l.kind }}</span><span class="c4">{{ l.note }}</span></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>
@@ -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; }
+        /* the career narrow on the left (a stat a line), the reputation list, the picked faction's card beside it */
+        .colm.side { flex: 0 0 26%; margin-right: 18dp; overflow-y: auto; }
+        .colm.cardcol { margin-left: 18dp; }
+        .grid { display: block; margin-bottom: 8dp; }
+        .stat { display: flex; flex-direction: row; align-items: center; margin-bottom: 4dp; padding: 6dp 10dp; background-color: #5cc8f010; }
+        .stat .k { flex: 1; min-width: 0; 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: 15dp; margin-left: 8dp; }
+        .list { flex: 1; overflow-y: auto; }
+        .faction { display: flex; flex-direction: row; align-items: center; padding: 7dp 10dp; margin-bottom: 5dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
+        .faction:hover { border-left-color: #5cc8f0; }
+        .faction.selected { border-left-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; background-color: #5cc8f008; }
+    </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="sl">\\\</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">
+                    <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 class="colm cardcol" data-if="has_card">
+                    <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">Close</div></div>
+                    <div class="card">{{ card }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
+</body>
+</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; background-color: #5cc8f008; }
+        .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="sl">\\\</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="250"/>
+                <div class="btn primary" data-action="send">Send</div>
+            </div>
+        </div>
+    </div>
+</body>
+</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; decorator: ninepatch(fw, fw-i); }
+        .tab:hover { background-color: #122033; }
+        .tab.open { ; }
+        .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>
@@ -0,0 +1,57 @@
+<rml>
+<head>
+    <title>Radar</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        /* the radar (rem_ui_radar.cpp): the dish, rim, fans, symbols and wireframes are the <radar> element's own
+           geometry; frame, title, projection / range buttons and names are this document's */
+        .head .threat { margin-left: 8dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #ff3b30; font-weight: 700; }
+        body.radar { position: absolute; left: 16dp; top: 31%; width: 320dp; height: 250dp; background-color: transparent; pointer-events: none;
+                     font-family: "Saira SemiCondensed"; font-size: 14dp; color: #dbe6f0; }
+        .frame {
+                 position: absolute;
+                 left: 0;
+                 top: 0;
+                 right: 0;
+                 bottom: 0;
+                 box-sizing: border-box;
+                 pointer-events: auto;
+                 display: flex;
+                 flex-direction: column;
+                 decorator: ninepatch(fw, fw-i);
+             }
+        .head { display: flex; flex-direction: row; align-items: center; height: 26dp; padding: 0 10dp; border-bottom: 1dp #24405c; }
+        .head .title { font-weight: 600; letter-spacing: 1.5dp; font-size: 14dp; color: #f2b13c; }
+        .head .count { margin-left: 8dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; }
+        .head .spacer { flex: 1; }
+        .rng { font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; padding: 1dp 5dp; margin-left: 3dp; border: 1dp #24405c; border-radius: 3dp; }
+        .rng:hover { color: #5cc8f0; border-color: #5cc8f0; }
+        .rng.on { color: #f2b13c; border-color: #f2b13c; background-color: #f2b13c24; }
+        #scope { position: relative; flex: 1; }
+        radar { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
+        .lbl { position: absolute; font-size: 12dp; white-space: nowrap; pointer-events: none; }
+        .fwd { position: absolute; left: 50%; margin-left: -4dp; top: 4dp; font-family: "IBM Plex Mono"; font-size: 10dp; color: #f2b13c; pointer-events: none; }
+        .edit-grip { display: none; position: absolute; left: 0; top: 0; padding: 2dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; border-radius: 3dp; white-space: nowrap; drag: drag; cursor: move; pointer-events: auto; z-index: 10; }
+        .hud-editing .edit-grip { display: block; }
+    </style>
+</head>
+<body class="radar movable" data-model="radar">
+    <div class="win-head edit-grip">Radar &#10021;</div>
+    <div class="frame">
+        <div class="head">
+            <span class="title">RADAR</span><span class="count">{{ count }}</span>
+            <span class="threat" data-if="threat">MISSILE</span>
+            <span class="spacer"></span>
+            <span class="rng" data-action="projection">{{ projection == 1 ? '3D' : 'TOP' }}</span>
+            <span class="rng" data-class-on="range == 0" data-action="range" data-arg="0">2.5K</span>
+            <span class="rng" data-class-on="range == 1" data-action="range" data-arg="1">5K</span>
+            <span class="rng" data-class-on="range == 2" data-action="range" data-arg="2">7.5K</span>
+            <span class="rng" data-class-on="range == 3" data-action="range" data-arg="3">15K</span>
+        </div>
+        <div id="scope">
+            <radar id="radar"></radar>
+            <div class="lbl" data-for="l : labels" data-style-left="l.left" data-style-top="l.top" data-style-color="l.colour">{{ l.text }}</div>
+        </div>
+    </div>
+</body>
+</rml>
@@ -0,0 +1,477 @@
+/* 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;
+    /* the flight HUD's frame: cut corners, one bright edge (hudframes, at the end of this file) */
+    decorator: ninepatch(fw, fw-i);
+    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 12dp 28dp; /* clear of the cut corner */
+    border-bottom: 1dp #2b6f9e;
+    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: 20dp;
+    letter-spacing: 2dp;
+    color: #e8f4ff;
+    margin-right: 16dp;
+}
+/* three slashes after a window's title, as the HUD's panel titles */
+.win-head .sl { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; letter-spacing: -1dp; color: #5cc8f0; margin: 0 16dp 0 -6dp; }
+.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 4dp;
+    margin-left: 14dp;
+}
+.chip .v { font-family: "IBM Plex Mono"; color: #dbe6f0; }
+.close
+{
+    width: 28dp;
+    height: 28dp;
+    line-height: 26dp;
+    text-align: center;
+    margin-left: 14dp;
+    color: #8197ad;
+    font-size: 20dp;
+}
+.close:hover { color: #5cc8f0; }
+
+.win-main
+{
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    min-height: 0;
+}
+
+.nav
+{
+    width: 200dp;
+    border-right: 1dp #2b6f9e;
+    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: #5cc8f01a; }
+.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: #f2b13c14; }
+.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 #2b6f9e;
+    padding: 8dp 28dp 10dp 18dp; /* clear of the cut corner */
+    font-size: 13dp;
+    color: #8197ad;
+}
+.win-foot .key
+{
+    font-family: "IBM Plex Mono";
+    font-size: 11dp;
+    color: #dbe6f0;
+    background-color: #24405c;
+    padding: 0 5dp;
+    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;
+    decorator: ninepatch(fs, fs-i); /* a small cut-corner frame */
+    padding: 7dp 16dp;
+    margin-right: 8dp;
+    margin-bottom: 8dp;
+    position: relative;
+    transition: color border-color 0.12s;
+}
+.btn:hover { color: #5cc8f0; }
+.btn:active { color: #ffffff; }
+.btn.primary { color: #f2b13c; decorator: ninepatch(fsa, fsa-i); }
+.btn.primary:hover { color: #ffd07a; }
+.btn.danger { color: #ef6a5b; decorator: ninepatch(fsd, fsd-i); }
+.btn.armed { color: #160604; decorator: none; background-color: #ef6a5b; }
+.btn.disabled { color: #8197ad66; opacity: 0.6; }
+.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;
+    decorator: ninepatch(fw, fw-i);
+    padding: 7dp 12dp;
+}
+/* shown by the tool tip window over every window (rem_ui_tooltip.cpp), not here: inside its own
+   document another window could cover it */
+
+.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-bottom: 1dp #3d6d96;
+    background-color: #12203399;
+    color: #dbe6f0;
+    font-size: 14dp;
+    cursor: text;
+}
+input.text:focus { border-bottom-color: #5cc8f0; }
+input.text .placeholder, input.text:placeholder { color: #8197ad; }
+
+.table
+{
+    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: #8fb3d0;
+    border-bottom: 1dp #2b6f9e;
+}
+.table .body { flex: 1; overflow-y: auto; }
+.table .row { font-size: 14dp; border-bottom: 1dp #24405c66; border-left: 3dp #00000000; }
+.table .row:hover { background-color: #5cc8f01a; }
+.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; }
+/* the dealers' amount: a wide bar clicked or dragged anywhere (data-scrub, its scale too) -- the fill and the knob at
+   the amount, a scale 1 / quarters / the most under it */
+.abar { flex: 1; position: relative; padding-top: 6dp; }
+.abar.off { opacity: 0.4; }
+.abar .arail { position: relative; height: 12dp; border: 1dp #2b6f9e; background-color: #0a1424; }
+.abar .afill { position: absolute; left: 0; top: 0; bottom: 0; background-color: #f2b13c55; }
+.abar .tk { position: absolute; top: 0; bottom: 0; width: 1dp; background-color: #2b6f9e; }
+.abar .aknob { position: absolute; top: -6dp; width: 12dp; height: 22dp; margin-left: -6dp; background-color: #f2b13c; border-radius: 2dp; }
+.abar:hover .aknob { background-color: #ffd27a; }
+.abar .aticks { position: relative; height: 14dp; margin-top: 7dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; }
+.abar .aticks span { position: absolute; top: 0; width: 60dp; margin-left: -30dp; text-align: center; }
+.abar .aticks .lo { margin-left: 0; text-align: left; }
+.abar .aticks .hi { left: auto; right: 0; margin-left: 0; text-align: right; }
+.table .empty { padding: 12dp 10dp; color: #8197ad; }
+
+/* ---------------------------------------------------------------- cards, stats */
+
+.stats
+{
+    display: flex;
+    flex-direction: row;
+    border-top: 1dp #2b6f9e;
+    border-bottom: 1dp #2b6f9e;
+    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-left: 3dp #2b6f9e; /* an accent at the left, no box in the window's box */
+    background-color: #5cc8f00a;
+    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; display: 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); } }
+
+/* the flight HUD's frames (every window, the HUD, the bars): panels with cut corners and one bright edge, as
+   ninepatch sprites -- img/hud_frames.png, drawn by tools/rem/make_hud_frames.py (2x: 1 dp = 2 px).
+   fa: top left + bottom right cut, fb: all four, fs: all four (small), fed: the HUD editor's,
+   fw: as fa but nearly opaque, for windows and tips; fsa / fsd: the primary / danger button;
+   fo / fh / fbr: a window with a clear hole (navmap.rml): the edge alone, the head's fill (top left
+   cut), the side's fill (bottom right cut) */
+@spritesheet hudframes {
+    src: img/hud_frames.png;
+    resolution: 2x;
+    fa: 0px 0px 96px 96px;    fa-i: 32px 32px 32px 32px;
+    fb: 96px 0px 96px 96px;   fb-i: 128px 32px 32px 32px;
+    fs: 192px 0px 96px 96px;  fs-i: 224px 32px 32px 32px;
+    fed: 288px 0px 96px 96px; fed-i: 320px 32px 32px 32px;
+    fw: 384px 0px 96px 96px;  fw-i: 416px 32px 32px 32px;
+    fsa: 480px 0px 96px 96px; fsa-i: 512px 32px 32px 32px;
+    fsd: 576px 0px 96px 96px; fsd-i: 608px 32px 32px 32px;
+    fo: 672px 0px 96px 96px;  fo-i: 704px 32px 32px 32px;
+    fh: 768px 0px 96px 96px;  fh-i: 800px 32px 32px 32px;
+    fbr: 864px 0px 96px 96px; fbr-i: 896px 32px 32px 32px;
+}
+
+/* a dealer's hold and credits, large (the tabs' row of the equipment dealer, the commodity trader's row): the hold a
+   bar that fills with the load, amber from 3/4, red full */
+.dstat { display: flex; flex-direction: row; align-items: center; align-self: center; margin-left: 24dp; }
+.dstat .sk { margin-right: 10dp; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #8197ad; }
+.dstat .sv { font-family: "IBM Plex Mono"; font-size: 20dp; color: #f2b13c; }
+.hbar { position: relative; width: 200dp; height: 24dp; border: 1dp #2b6f9e; background-color: #00000066; }
+.hbar .hf { position: absolute; left: 0; top: 0; bottom: 0; background-color: #3a8fc899; }
+.hbar .hf.warn { background-color: #f2b13c99; }
+.hbar .hf.bad { background-color: #ef6a5bcc; }
+.hbar .ht { position: relative; display: block; line-height: 24dp; text-align: center; font-family: "IBM Plex Mono"; font-size: 15dp; color: #e8f4ff; }
@@ -0,0 +1,33 @@
+<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; }
+        /* in the flight HUD's design: one frame with cut corners (rem.rcss, hudframes), no box per icon */
+        .nnbar { pointer-events: auto; position: absolute; top: 0; left: 0; height: 52dp; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; padding: 0 16dp; decorator: ninepatch(fb, fb-i); }
+        .nb { width: 40dp; padding: 4dp 5dp; margin: 0 1dp; border-radius: 3dp; position: relative; }
+        .nb:hover { background-color: #5cc8f01a; }
+        .nb.active { background-color: #f2b13c1f; }
+        .nb img { width: 30dp; height: 30dp; display: block; image-color: #b9d4ea; }
+        .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 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: 46dp; left: 0; right: auto; bottom: auto; width: 230dp; white-space: normal; }
+        .edit-grip { display: none; position: absolute; left: 0; top: 0; padding: 2dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; border-radius: 3dp; white-space: nowrap; drag: drag; cursor: move; pointer-events: auto; z-index: 10; }
+        .hud-editing .edit-grip { display: block; }
+    </style>
+</head>
+<body class="nnstrip movable" data-model="rembar">
+    <div class="win-head edit-grip">REM bar &#10021;</div>
+    <div class="nnbar" data-if="shown" data-style-width="icons.size * 42 + 32 + '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>
@@ -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-left: 3dp #24405c; background-color: #5cc8f010; }
+        .item:hover { border-left-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; }
+        .go { margin: 12dp 0 0 0; padding: 10dp 16dp; text-align: center; font-size: 16dp; } /* the whole width under the total */
+        .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="sl">\\\</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>
+                <div class="btn primary go" 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 class="win-foot">
+        <span class="key">Esc</span><span class="hint">close</span>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</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; 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="sl">\\\</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>
@@ -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 { color: #f2b13c; border-left-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; background-color: #5cc8f008; }
+        .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="sl">\\\</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>
@@ -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-left: 3dp #3d6d96; background-color: #5cc8f010; }
+        .scard:hover { border-left-color: #5cc8f0; }
+        .scard.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
+        .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; 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; margin-top: 10dp; background-color: #5cc8f008; }
+        .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; display: flex; flex-direction: row; align-items: center; background-color: #5cc8f010; }
+        .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="sl">\\\</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>
@@ -0,0 +1,169 @@
+<rml>
+<head>
+    <title>Ship trade</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 32%; margin: 0 18dp; }
+        .col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
+        .col-h .hint { margin-left: 10dp; }
+        .col-h .tools { margin-left: auto; display: flex; flex-direction: row; align-items: center; }
+        .col-h .tools .btn { margin: 0 0 0 8dp; padding: 3dp 10dp; }
+        .list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
+        .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 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 .slot { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 10dp; letter-spacing: 1dp; text-transform: uppercase; white-space: nowrap; color: #8fb3d0; }
+        .good .c { font-family: "IBM Plex Mono"; width: 44dp; text-align: right; color: #8197ad; }
+        .good .p { font-family: "IBM Plex Mono"; width: 100dp; text-align: right; color: #f2b13c; }
+        /* what the trade takes off the price (left), what was brought along (right, nothing to pay) */
+        .good .p.off { color: #5fd08a; }
+        .good .p.own { color: #8197ad; }
+        /* the ship's own parts: they stay where they are */
+        .good.fixed .n, .good.fixed .p { color: #5c7a94; }
+        .good.fixed:hover { background-color: #00000000; }
+        .good.empty .n { color: #5c7a94; }
+        .good.empty .txt { margin-left: 40dp; } /* in line with the rows that have an icon (30 + 10 dp) */
+        .good.held { border-left-color: #f2b13c66; }
+        .good.held.selected { border-left-color: #f2b13c; }
+        .sec { display: flex; flex-direction: row; align-items: center; margin: 12dp 0 4dp 0; padding-bottom: 3dp; border-bottom: 1dp #2b6f9e; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #5cc8f0; }
+        .sec:first-child { margin-top: 0; }
+        .sec .cnt { margin-left: auto; font-family: "IBM Plex Mono"; font-weight: 400; letter-spacing: 0; color: #8197ad; }
+        .sec.held { color: #f2b13c; border-bottom-color: #f2b13c66; }
+        #ship { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); }
+        .holdrow { display: flex; flex-direction: row; align-items: center; margin-top: 10dp; }
+        .holdrow .dstat { margin-left: 0; }
+        /* the move strip under the ship: the picked piece, its amount, the button */
+        .move { margin-top: 10dp; padding: 10dp 12dp; background-color: #5cc8f008; }
+        .move .mrow { display: flex; flex-direction: row; align-items: center; }
+        .move .mrow.second { margin-top: 10dp; }
+        .move img { width: 40dp; height: 40dp; margin-right: 12dp; }
+        .move .what { flex: 1; min-width: 0; }
+        .move .what .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
+        .move .v { font-family: "IBM Plex Mono"; width: 60dp; text-align: right; margin-left: 10dp; }
+        .move .btn { margin: 0 0 0 10dp; }
+        .move .small { padding: 3dp 10dp; }
+        .why { color: #ef6a5b; }
+        .move .why { flex: 1; min-width: 0; font-size: 13dp; }
+        /* the bill */
+        .deal { margin-top: 14dp; padding: 12dp; display: flex; flex-direction: row; align-items: center; background-color: #5cc8f010; }
+        .deal .fig { margin-right: 26dp; }
+        .deal .fig .k { display: block; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #8197ad; text-transform: uppercase; }
+        .deal .fig .v { display: block; font-family: "IBM Plex Mono"; font-size: 16dp; margin-top: 2dp; }
+        .deal .fig .v.off { color: #5fd08a; }
+        .deal .gap { flex: 1; }
+        .deal .why { margin-right: 18dp; }
+        .deal .sumbox { margin-right: 18dp; text-align: right; }
+        .deal .sumbox .k { display: block; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #8197ad; text-transform: uppercase; }
+        .deal .sumbox .sum { display: block; font-family: "IBM Plex Mono"; font-size: 20dp; color: #f2b13c; margin-top: 2dp; }
+        .deal .btn { margin: 0 0 0 10dp; }
+    </style>
+</head>
+<body class="window" data-model="shiptrade">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/>
+        <span class="title">SHIP DEALER</span><span class="sl">\\\</span>
+        <span class="loc">Buy the {{ ship_name }}</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="split">
+                <div class="colm">
+                    <div class="col-h"><h3>Stays with the old ship</h3><span class="hint">sold with the trade</span></div>
+                    <div class="list">
+                        <div class="sec">EQUIPMENT<span class="cnt">{{ old_gear.size }}</span></div>
+                        <div class="hint" style="padding: 10dp;" data-if="old_gear.size == 0">Nothing stays behind.</div>
+                        <div class="good" data-for="r : old_gear" data-class-selected="r.selected" data-class-fixed="r.fixed" data-action="pick-old" data-dbl="move" 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="c">{{ r.count }}</span><span class="p off">{{ r.price }}</span>
+                        </div>
+                        <div class="sec held">CARGO AND SUPPLIES<span class="cnt">{{ old_cargo.size }}</span></div>
+                        <div class="hint" style="padding: 10dp;" data-if="old_cargo.size == 0">Nothing stays behind.</div>
+                        <div class="good held" data-for="r : old_cargo" data-class-selected="r.selected" data-class-fixed="r.fixed" data-action="pick-old" data-dbl="move" 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="c">{{ r.count }}</span><span class="p off">{{ r.price }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm mid">
+                    <div class="col-h"><h3>{{ ship_name }}</h3><span class="tools"><div class="btn" data-action="ship-reset">Reset view<div class="tip">Turns the ship back to its start view and zoom.</div></div></span></div>
+                    <div id="ship"></div>
+                    <div class="holdrow">
+                        <div class="dstat"><span class="sk">HOLD</span><div class="hbar"><div class="hf" data-class-warn="hold_pct &gt;= 75" data-class-bad="hold_pct &gt;= 100" data-style-width="hold_pct + '%'"></div><span class="ht">{{ hold }}</span></div></div>
+                    </div>
+                    <div class="move">
+                        <div class="mrow">
+                            <img data-if="pick_icon != ''" data-attr-src="pick_icon"/>
+                            <div class="what">
+                                <div class="label">{{ move_title }}</div>
+                                <div class="t">{{ has_pick ? pick_name : 'Pick a piece to move it' }}</div>
+                            </div>
+                        </div>
+                        <div class="mrow second" data-if="amount_max &gt; 1">
+                            <div class="abar" data-scrub="amount-at">
+                                <div class="arail"><div class="afill" data-style-width="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div><div class="tk" style="left: 25%;"></div><div class="tk" style="left: 50%;"></div><div class="tk" style="left: 75%;"></div><div class="aknob" data-style-left="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div></div>
+                                <div class="aticks"><span class="lo" style="left: 0;">1</span><span style="left: 50%;" data-if="amount_max &gt;= 3">{{ 1 + (amount_max - 1) / 2 | format(0) }}</span><span class="hi">{{ amount_max }}</span></div>
+                            </div>
+                            <span class="v">{{ amount_text }}</span>
+                            <div class="btn small" data-action="max">Max</div>
+                        </div>
+                        <div class="mrow second">
+                            <span class="why">{{ reason }}</span>
+                            <div class="btn primary" data-class-disabled="!has_pick || reason != ''" data-action="move">{{ move_label }}<div class="tip">Moves the picked piece to the other side. What stays with the old ship is sold with it; a double click on a piece moves it too.</div></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm">
+                    <div class="col-h"><h3>New ship</h3><span class="hint">what you fly away with</span></div>
+                    <div class="list">
+                        <div class="sec" data-if="hps.size &gt; 0">HARDPOINTS<span class="cnt">{{ hp_used }} / {{ hps.size }}</span></div>
+                        <div class="good" data-for="r : hps" data-class-empty="r.name == ''" data-class-selected="r.selected" data-class-fixed="r.fixed" data-action="pick-new" data-dbl="move" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                            <div class="txt"><div class="n">{{ r.name == '' ? 'empty' : r.name }}</div><div class="slot">{{ r.slot }}</div></div>
+                            <span class="p" data-class-own="!r.package">{{ r.price }}</span>
+                        </div>
+                        <div class="sec" data-if="inside.size &gt; 0">MOUNTED, NO HARDPOINT</div>
+                        <div class="good" data-for="r : inside" data-class-selected="r.selected" data-class-fixed="r.fixed" data-action="pick-new" data-dbl="move" 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="c">{{ r.count }}</span><span class="p" data-class-own="!r.package">{{ r.price }}</span>
+                        </div>
+                        <div class="sec held">CARGO HOLD &#183; NOT MOUNTED<span class="cnt">{{ hold }}</span></div>
+                        <div class="hint" style="padding: 10dp;" data-if="held.size == 0">Nothing in the hold.</div>
+                        <div class="good held" data-for="r : held" data-class-selected="r.selected" data-class-fixed="r.fixed" data-action="pick-new" data-dbl="move" 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="c">{{ r.count }}</span><span class="p" data-class-own="!r.package">{{ r.price }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="deal">
+                <div class="fig"><span class="k">Ship</span><span class="v">{{ c_ship }}</span><div class="tip">The bare hull at this base.</div></div>
+                <div class="fig"><span class="k">Package parts</span><span class="v">{{ c_package }}</span><div class="tip">The parts of the ship package that are on the new ship. Leave one behind and you do not pay for it.</div></div>
+                <div class="fig"><span class="k">Old ship</span><span class="v off">{{ c_oldship }}</span><div class="tip">What your ship fetches as a trade-in: 80 % of its price here, less for damage.</div></div>
+                <div class="fig"><span class="k">Sold</span><span class="v off">{{ c_sold }}</span><div class="tip">What stays with the old ship is sold: used equipment at 30 % of its price, cargo at the market price.</div></div>
+                <span class="gap"></span>
+                <span class="why" data-if="why != ''">{{ why }}</span>
+                <div class="sumbox"><span class="k">{{ total_label }}</span><span class="sum">{{ total }}</span></div>
+                <div class="btn" data-action="back">Back<div class="tip">Back to the ship dealer's list. Nothing is traded.</div></div>
+                <div class="btn primary" data-class-disabled="!can_buy" data-action="buy">Buy ship<div class="tip">Buys the ship with what is listed on the right. Your old ship and what stays with it are traded in.</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>
@@ -0,0 +1,203 @@
+<rml>
+<head>
+    <title>Shop</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.grid-col { flex: 1; }
+        .colm.side { flex: 0 0 30%; margin-left: 16dp; }
+        .nav .item.sub { padding-left: 34dp; }
+        .nav .item.sub2 { padding-left: 50dp; }
+        .nav .item .n { flex: 1; }
+        .nav .item .cnt { font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; margin-left: 6dp; }
+        .toolbar { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
+        .toolbar h3 { flex: 1; }
+        .toolbar input.text { width: 220dp; }
+        .grid { flex: 1; overflow-y: auto; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
+        .icard { position: relative; width: 150dp; height: 186dp; margin: 0 10dp 10dp 0; padding: 10dp; display: flex; flex-direction: column; align-items: center; border-left: 3dp #24405c; background-color: #5cc8f010; }
+        .icard:hover { border-left-color: #5cc8f0; background-color: #5cc8f01a; }
+        .icard.selected { background-color: #f2b13c14; border-left-color: #f2b13c; }
+        .icard.out { opacity: 0.55; }
+        .icard .pic { width: 86dp; height: 86dp; margin: 4dp 0 8dp 0; display: flex; align-items: center; justify-content: center; border-radius: 4dp; decorator: vertical-gradient(#1a3150 #0b1524); }
+        .icard .pic img { width: 64dp; height: 64dp; }
+        .icard .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 15dp; text-align: center; height: 38dp; overflow: hidden; }
+        .icard .q { font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; position: absolute; top: 8dp; left: 8dp; }
+        .icard .badge { position: absolute; top: 8dp; right: 8dp; padding: 1dp 6dp; font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 11dp; letter-spacing: 1dp; color: #160604; background-color: #f2b13c; border-radius: 2dp; }
+        .icard .star { position: absolute; top: 30dp; right: 8dp; width: 16dp; height: 16dp; }
+        .icard .incart { position: absolute; bottom: 52dp; right: 8dp; padding: 1dp 5dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #070b12; background-color: #5cc8f0; border-radius: 2dp; }
+        .price { display: flex; flex-direction: row; justify-content: center; margin-top: auto; }
+        .pb { font-family: "IBM Plex Mono"; font-size: 13dp; padding: 2dp 6dp; border-radius: 2dp; margin: 0 2dp; }
+        .pb.coin { color: #f2b13c; border: 1dp #f2b13c66; }
+        .pb.cr { color: #dbe6f0; border: 1dp #3d6d96; }
+        .icard .note { font-size: 11dp; color: #8197ad; margin-top: 4dp; text-align: center; }
+        .icard .note.warn { color: #ef6a5b; }
+        .detail { padding: 12dp; margin-bottom: 12dp; background-color: #5cc8f008; }
+        .detail .top { display: flex; flex-direction: row; align-items: center; }
+        .detail .top .pic { width: 72dp; height: 72dp; margin-right: 12dp; display: flex; align-items: center; justify-content: center; border-radius: 4dp; decorator: vertical-gradient(#1a3150 #0b1524); }
+        .detail .top .pic img { width: 56dp; height: 56dp; }
+        .detail .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; }
+        .detail .k { font-size: 12dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; }
+        .detail .txt { font-size: 13dp; line-height: 1.4; margin-top: 8dp; max-height: 110dp; overflow-y: auto; white-space: pre-line; color: #b9c8d6; }
+        .detail .row { display: flex; flex-direction: row; align-items: center; margin-top: 10dp; }
+        .detail .row .l { flex: 1; font-size: 13dp; color: #8197ad; }
+        .stepper { display: flex; flex-direction: row; align-items: center; }
+        .stepper .sb { width: 26dp; text-align: center; padding: 2dp 0; border: 1dp #3d6d96; border-radius: 3dp; }
+        .stepper .sb:hover { border-color: #5cc8f0; color: #5cc8f0; }
+        .stepper .v { width: 44dp; text-align: center; font-family: "IBM Plex Mono"; }
+        .cart { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 12dp; background-color: #5cc8f008; }
+        .cart .lines { flex: 1; overflow-y: auto; min-height: 60dp; }
+        .cline { display: flex; flex-direction: row; align-items: center; padding: 5dp 0; border-bottom: 1dp #ffffff08; }
+        .cline img { width: 26dp; height: 26dp; margin-right: 8dp; }
+        .cline .n { flex: 1; font-size: 13dp; min-width: 0; }
+        .cline .p { font-family: "IBM Plex Mono"; font-size: 12dp; color: #f2b13c; margin: 0 8dp; text-align: right; }
+        .cline .x { color: #ef6a5b; padding: 0 4dp; }
+        .sum { display: flex; flex-direction: row; font-size: 13dp; padding: 3dp 0; }
+        .sum .l { flex: 1; color: #8197ad; }
+        .sum .v { font-family: "IBM Plex Mono"; }
+        .sum .v.bad { color: #ef6a5b; }
+        .dpsel { display: flex; flex-direction: row; align-items: center; margin: 4dp 0 8dp 0; padding: 6dp 8dp; background-color: #5cc8f010; }
+        .dpsel .dn { flex: 1; font-size: 13dp; color: #f2b13c; min-width: 0; }
+        .dpsel .btn { margin: 0; padding: 2dp 10dp; }
+        .dplist { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+        .dplist input.text { margin-bottom: 6dp; }
+        .dprows { flex: 1; overflow-y: auto; min-height: 60dp; }
+        .dprow { display: flex; flex-direction: row; font-size: 13dp; padding: 5dp 8dp; border-bottom: 1dp #ffffff08; }
+        .dprow:hover { background-color: #122033; color: #5cc8f0; }
+        .dprow.selected { color: #f2b13c; background-color: #f2b13c14; }
+        .dprow .n { flex: 1; }
+        .dprow .here { font-size: 11dp; color: #5fd08a; }
+        .sellrow { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 8dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
+        .sellrow:hover { border-left-color: #5cc8f0; }
+        .sellrow.selected { background-color: #f2b13c14; border-left-color: #f2b13c; }
+        .sellrow img { width: 44dp; height: 44dp; margin-right: 12dp; }
+        .sellrow .n { flex: 1; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; }
+        .sellrow .s { font-size: 12dp; color: #8197ad; margin-right: 14dp; text-align: right; }
+        .banner { padding: 10dp 12dp; margin-bottom: 10dp; font-size: 13dp; border-left: 3dp #f2b13c; background-color: #5cc8f010; }
+    </style>
+</head>
+<body class="window" data-model="shop">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/nn_traderequest.3db"/>
+        <span class="title">SHOP</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <span class="chip">REM Coin <span class="v">{{ coins }}</span></span>
+        <span class="chip">Bank <span class="v">{{ credits }}</span></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="nav">
+            <div class="item" data-for="p : pages" data-class-active="p.active" data-class-sub="p.depth == 1" data-class-sub2="p.depth &gt;= 2" data-action="page" data-attr-data-arg="p.id">
+                <img class="ico" data-if="p.icon != ''" data-attr-src="p.icon"/><span class="n">{{ p.name }}</span><span class="cnt" data-if="p.count &gt; 0">{{ p.count }}</span>
+            </div>
+        </div>
+        <div class="content">
+            <div class="banner" data-if="note != ''">{{ note }}</div>
+            <div class="split">
+                <div class="colm grid-col" data-if="!selling">
+                    <div class="toolbar">
+                        <h3>{{ page_title }}</h3>
+                        <input class="text" type="text" data-value="search" placeholder="Search..." maxlength="40"/>
+                    </div>
+                    <div class="grid">
+                        <div class="hint" data-if="cards.size == 0">{{ empty }}</div>
+                        <div class="icard" data-for="c : cards" data-class-selected="c.selected" data-class-out="c.out" data-action="pick" data-dbl="add" data-attr-data-arg="c.key">
+                            <span class="q" data-if="c.qty != ''">{{ c.qty }}</span>
+                            <span class="badge" data-if="c.badge != ''">{{ c.badge }}</span>
+                            <img class="star" data-if="c.featured" src="3db:INTERFACE/REM/IMAGES/stat_rating_icon.3db"/>
+                            <div class="pic"><img data-attr-src="c.icon"/></div>
+                            <div class="t">{{ c.title }}</div>
+                            <span class="incart" data-if="c.incart != ''">{{ c.incart }}</span>
+                            <div class="price">
+                                <span class="pb coin" data-if="c.coins != ''">{{ c.coins }}</span>
+                                <span class="pb cr" data-if="c.credits != ''">{{ c.credits }}</span>
+                            </div>
+                            <div class="note" data-class-warn="c.out" data-if="c.note != ''">{{ c.note }}</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm grid-col" data-if="selling">
+                    <div class="toolbar"><h3>Sell event items for REM Coin</h3></div>
+                    <div class="hint" style="margin-bottom: 10dp;">The items are taken out of the depot picked on the right. Each item has a daily limit.</div>
+                    <div class="hint" data-if="sells.size == 0">The shop buys nothing at the moment.</div>
+                    <div style="flex: 1; overflow-y: auto;">
+                        <div class="sellrow" data-for="s : sells" data-class-selected="s.selected" data-action="sellpick" data-attr-data-arg="s.key">
+                            <img data-attr-src="s.icon"/>
+                            <span class="n">{{ s.title }}</span>
+                            <span class="s">{{ s.today }}</span>
+                            <span class="pb coin">{{ s.coins }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm side">
+                    <div class="detail" data-if="has_pick &amp;&amp; !selling">
+                        <div class="top">
+                            <div class="pic"><img data-attr-src="pick_icon"/></div>
+                            <div style="flex: 1; min-width: 0;"><div class="t">{{ pick_title }}</div><div class="k">{{ pick_kind }}</div></div>
+                        </div>
+                        <div class="txt" data-if="pick_text != ''">{{ pick_text }}</div>
+                        <div class="row"><span class="l">Price</span><span class="pb coin" data-if="pick_coins != ''">{{ pick_coins }}</span><span class="pb cr" data-if="pick_credits != ''">{{ pick_credits }}</span></div>
+                        <div class="row" data-if="pick_limit != ''"><span class="l">{{ pick_limit }}</span></div>
+                        <div class="row">
+                            <span class="l">Amount</span>
+                            <div class="stepper"><span class="sb" data-action="count" data-arg="-1">-</span><span class="v">{{ pick_count }}</span><span class="sb" data-action="count" data-arg="1">+</span><span class="sb" data-action="count" data-arg="10" style="margin-left: 4dp;">+10</span></div>
+                        </div>
+                        <div class="actions" style="margin-top: 10dp;"><div class="btn primary" data-class-disabled="!can_add" data-action="add">Add to cart<div class="tip">Into the cart - you buy everything in it at once.</div></div></div>
+                    </div>
+                    <div class="detail" data-if="selling">
+                        <div class="top" data-if="has_sell">
+                            <div class="pic"><img data-attr-src="sell_icon"/></div>
+                            <div style="flex: 1; min-width: 0;"><div class="t">{{ sell_title }}</div><div class="k">{{ sell_rule }}</div></div>
+                        </div>
+                        <div class="hint" data-if="!has_sell">Pick an item on the left.</div>
+                        <div class="row" data-if="has_sell"><span class="l">Units</span><input class="text" type="text" data-value="sell_amount" maxlength="7" style="width: 90dp;"/></div>
+                        <div class="row" data-if="has_sell"><span class="l">You get</span><span class="pb coin">{{ sell_total }}</span></div>
+                        <div class="actions" style="margin-top: 10dp;" data-if="has_sell"><div class="btn primary" data-action="sell">Sell<div class="tip">Takes the units out of the picked depot and pays REM Coin.</div></div></div>
+                    </div>
+                    <div class="cart">
+                        <div class="dplist" data-if="depot_picking">
+                            <h3 style="margin-bottom: 6dp;">Pick a depot <span class="hint">({{ depot_count }})</span></h3>
+                            <input class="text" type="text" data-value="depot_filter" placeholder="Search a base..." maxlength="30"/>
+                            <div class="dprows">
+                                <div class="hint" style="padding: 8dp;" data-if="depots.size == 0">No depot matches.</div>
+                                <div class="dprow" data-for="d : depots" data-class-selected="d.selected" data-action="depot" data-attr-data-arg="d.id"><span class="n">{{ d.name }}</span><span class="here" data-if="d.here">docked here</span></div>
+                            </div>
+                        </div>
+                        <h3 style="margin-bottom: 6dp;" data-if="!selling &amp;&amp; !depot_picking">Cart</h3>
+                        <div class="lines" data-if="!selling &amp;&amp; !depot_picking">
+                            <div class="hint" data-if="cart.size == 0">Your cart is empty. Pick something and add it.</div>
+                            <div class="cline" data-for="l : cart">
+                                <img data-attr-src="l.icon"/>
+                                <span class="n">{{ l.title }}</span>
+                                <div class="stepper"><span class="sb" data-action="cartdec" data-attr-data-arg="l.key">-</span><span class="v">{{ l.count }}</span><span class="sb" data-action="cartinc" data-attr-data-arg="l.key">+</span></div>
+                                <span class="p">{{ l.price }}</span>
+                                <span class="x" data-action="cartdel" data-attr-data-arg="l.key">&#215;</span>
+                            </div>
+                        </div>
+                        <div data-if="!selling &amp;&amp; !depot_picking">
+                            <div class="sum" data-if="sum_coins != ''"><span class="l">REM Coin</span><span class="v">{{ sum_coins }}</span></div>
+                            <div class="sum" data-if="sum_credits != ''"><span class="l">Bank credits</span><span class="v">{{ sum_credits }}</span></div>
+                            <div class="sum" data-if="after_coins != ''"><span class="l">REM Coin afterwards</span><span class="v" data-class-bad="short_coins">{{ after_coins }}</span></div>
+                            <div class="sum" data-if="after_credits != ''"><span class="l">Bank afterwards</span><span class="v" data-class-bad="short_credits">{{ after_credits }}</span></div>
+                        </div>
+                        <div data-if="(needs_depot || selling) &amp;&amp; !depot_picking">
+                            <div class="hint" style="margin-top: 8dp;">{{ selling ? 'Sell out of depot' : 'Deliver to depot' }}</div>
+                            <div class="hint" data-if="depot_count == 0">You have no depot. Buy one at a base first (Base manager).</div>
+                            <div class="dpsel" data-if="depot_count &gt; 0"><span class="dn">{{ depot_name }}</span><span class="btn" data-action="depotpick">Change</span></div>
+                        </div>
+                        <div class="actions" data-if="depot_picking"><div class="btn" data-action="depotpick">Back to the cart</div></div>
+                        <div class="actions" data-if="!selling &amp;&amp; !depot_picking">
+                            <div class="btn primary" data-class-disabled="!can_buy" data-action="buy">Buy<div class="tip">{{ buy_tip }}</div></div>
+                            <div class="btn" data-action="clear">Empty cart</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>
@@ -0,0 +1,89 @@
+<rml>
+<head>
+    <title>Construction site</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; }
+        .sub { font-size: 12dp; margin-bottom: 6dp; color: #8197ad; }
+        .lst { flex: 1; overflow-y: auto; background-color: #5cc8f008; }
+        .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.dim { color: #8197ad; }
+        .it .n { flex: 1; min-width: 0; font-size: 14dp; }
+        .it .c { font-family: "IBM Plex Mono"; font-size: 12dp; color: #f2b13c; margin-left: 8dp; }
+        .it .o { font-family: "IBM Plex Mono"; font-size: 11dp; color: #5cc8f0; margin-left: 8dp; }
+        .bar { height: 6dp; background-color: #ffffff10; margin: 4dp 0 10dp 0; }
+        .bar .fill { height: 6dp; background-color: #f2b13c; }
+        .move { margin-top: 12dp; padding: 12dp; display: flex; flex-direction: row; align-items: center; border-left: 3dp #f2b13c; background-color: #5cc8f010; }
+        .move .t { flex: 1; min-width: 0; }
+        .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 .range { width: 220dp; margin: 0 10dp; }
+        .move .btn { margin: 0 0 0 6dp; }
+        .fund { margin-top: 12dp; padding: 12dp; display: flex; flex-direction: row; align-items: center; border-left: 3dp #5cc8f0; background-color: #5cc8f010; }
+        .fund .t { flex: 1; min-width: 0; }
+        .fund .t .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 15dp; }
+        .fund .t .a { font-size: 12dp; color: #8197ad; margin-top: 2dp; }
+        .fund .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="sitetrade">
+    <div class="win-head">
+        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
+        <span class="title">CONSTRUCTION SITE</span><span class="sl">\\\</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;">
+            <div class="t" style="font-family: 'Saira SemiCondensed'; font-weight: 600; font-size: 18dp;">{{ title }}</div>
+            <div class="hint">{{ line }}</div>
+            <div class="bar"><div class="fill" data-style-width="progress + '%'"></div></div>
+            <div class="cols">
+                <div class="col">
+                    <h3>Your cargo</h3>
+                    <div class="sub">Click a ware the site needs</div>
+                    <div class="lst">
+                        <div class="hint" style="padding: 10dp;" data-if="hold.size == 0">Your hold is empty.</div>
+                        <div class="it" data-for="i : hold" data-class-picked="i.selected" data-class-dim="!i.useful" data-action="pick" data-attr-data-arg="i.key">
+                            <span class="n">{{ i.name }}</span><span class="c">{{ i.hold }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col last">
+                    <h3>The site needs</h3>
+                    <div class="sub">Delivered / needed - ordered from the traders</div>
+                    <div class="lst">
+                        <div class="hint" style="padding: 10dp;" data-if="needs.size == 0">Nothing - all wares are in.</div>
+                        <div class="it" data-for="i : needs" data-class-picked="i.selected" data-class-dim="!i.useful" data-action="pick" data-attr-data-arg="i.key">
+                            <span class="n">{{ i.name }}</span><span class="c">{{ i.need }}</span><span class="o" data-if="i.ordered != ''">{{ i.ordered }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="move" data-if="can_deliver">
+                <div class="t"><div class="n">{{ pick_name }}</div><div class="a">{{ qty_text }}</div></div>
+                <input class="range" type="range" min="1" step="1" data-attr-max="qty_max" data-value="qty"/>
+                <div class="btn" data-action="all">Max</div>
+                <div class="btn primary" data-action="deliver">Deliver<div class="tip">Hands the amount from your hold to the site.</div></div>
+            </div>
+            <div class="fund" data-if="owner">
+                <div class="t"><div class="n">{{ fund_title }}</div><div class="a">{{ fund_line }}</div></div>
+                <div class="btn" data-if="funded" data-action="unfund">Take orders back<div class="tip">Withdraws the site's buy orders - the escrow goes back to your bank.</div></div>
+                <div class="btn primary" data-if="can_fund" data-action="fund">{{ fund_button }}<div class="tip">Places buy orders on the Galactic Market for what the site still lacks; the price is paid from your bank as escrow. Trader pilots fly the wares in.</div></div>
+            </div>
+            <div class="foot2">
+                <span class="hint">{{ status }}</span>
+                <div class="btn" data-action="close">Close</div>
+            </div>
+        </div>
+    </div>
+</body>
+</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; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; border-bottom: 2dp #00000000; }
+        .tab:hover { color: #5cc8f0; border-bottom-color: #5cc8f0; }
+        .tab.primary { color: #f2b13c; border-bottom-color: #f2b13c; }
+        .story { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 12dp; background-color: #5cc8f008; }
+        .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="sl">\\\</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>
--- a/Show More
+++ b/Show More