From 5cf1e79c603c6fa00f331fa02449080d4a55bbc5 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Mon, 29 Jun 2026 21:33:52 +0900
Subject: fix: study-mode checkbox wasn't visible or bound (wrong RmlUi flow)

The checkbox used data-value (binds the element's 'value' string attribute)
instead of data-checked (binds the 'checked' bool state) -- per RmlUi docs,
checkboxes must use data-checked with a bool. So it neither reflected nor
toggled study_mode, and with no explicit styling it rendered invisibly.

Fix: wrap the input in a <form> (canonical RmlUi form-control flow), switch
data-value -> data-checked, and give #cb-study an explicit visible style
(border + background, green fill when :checked). Verified the document loads
with no RmlUi parse errors.

Note: RmlUi's border shorthand is 'width color' (no 'solid' keyword).
---
 game/study_player/ui/main.rcss | 13 +++++++++++++
 game/study_player/ui/main.rml  | 10 ++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/game/study_player/ui/main.rcss b/game/study_player/ui/main.rcss
index 78b83bf..4c28aa6 100644
--- a/game/study_player/ui/main.rcss
+++ b/game/study_player/ui/main.rcss
@@ -271,6 +271,11 @@ body {
     color: #8c8ca0;
 }
 
+#study-form {
+    display: block;
+    height: 0;
+}
+
 #study-mode-box {
     position: absolute;
     top: 684px;
@@ -284,6 +289,14 @@ body {
     width: 22px;
     height: 22px;
     vertical-align: middle;
+    decorator: none;
+    border: 2px #8c8ca0;
+    background-color: #181825;
+}
+
+#cb-study:checked {
+    background-color: #a6e3a1;
+    border-color: #a6e3a1;
 }
 
 #study-label {
diff --git a/game/study_player/ui/main.rml b/game/study_player/ui/main.rml
index 821293e..f6bc5fe 100644
--- a/game/study_player/ui/main.rml
+++ b/game/study_player/ui/main.rml
@@ -57,10 +57,12 @@
     <!-- ================================================================ -->
     <div id="bottom-bar">
         <div id="help-text">{{help_text}}</div>
-        <div id="study-mode-box">
-            <input type="checkbox" id="cb-study" data-value="study_mode"/>
-            <span id="study-label">Study Mode</span>
-        </div>
+        <form id="study-form">
+            <div id="study-mode-box">
+                <input type="checkbox" id="cb-study" data-checked="study_mode"/>
+                <span id="study-label">Study Mode</span>
+            </div>
+        </form>
     </div>
 
     <!-- ================================================================ -->
-- 
cgit v1.2.3