picker getting closer....

static/styles/category.css

@@ -0,0 +1,9 @@
+.category {
+  background-color: var(--taupe200);
+  padding: 1.5rem;
+
+  h3 {
+    margin: 0 0 0.5rem 0;
+    padding: 0;
+  }
+}

static/styles/nav.css

@@ -0,0 +1,16 @@
+nav {
+  margin: 1rem;
+  height: 4rem;
+  display: flex;
+  background-color: var(--taupe200);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 1rem;
+  max-width: 960px;
+  width: 100vw;
+}

static/styles/picker.css

@@ -0,0 +1,9 @@
+.picker {
+  padding-top: 0.5rem;
+
+  .categories {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+}

static/styles/role.css

@@ -7,7 +7,7 @@
   user-select: none;
   padding: 0.369rem; /* this is silly number pls ignore :3 (^noe) */
   gap: 0.269rem;
-  cursor: pointer;
+  /* cursor: pointer; */
   transition: all 0.35s ease-in-out;
 
   input {
@@ -34,14 +34,16 @@
       transition: all 0.35s ease-in-out;
       content: "";
       mask-image: url(/static/images/check.svg);
-      mask-size: cover;
-      mask-position: center center;
+      mask-size: 1.216rem 1.216rem;
+      mask-position: center;
+      mask-border: 2px;
       background-color: var(--role-color);
       opacity: 0;
       position: absolute;
       top: 0;
       bottom: 0;
-      left: 0;
+      left: -2px;
+      right: -2px;
       width: 1.216rem;
     }
   }
@@ -51,6 +53,27 @@
     font-weight: 600;
   }
 
+  /* slightly more specific than the below rule */
+  &:has(input:disabled) {
+    cursor: not-allowed;
+    input {
+      cursor: not-allowed;
+      opacity: 1;
+      &::before {
+        background-color: var(--role-color);
+        mask-image: url(/static/images/x.svg);
+        opacity: 1;
+      }
+
+      &:hover {
+        background-color: initial !important;
+      }
+    }
+    label {
+      cursor: not-allowed;
+    }
+  }
+
   &:has(input:checked) {
     background-color: var(--role-color);