picker getting closer....

static/images/check.svg

@@ -1,4 +1,4 @@
 <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <rect fill="#000" width="2" height="5" x="3" y="4" style="transform: rotate(-45deg); transform-origin: center;" />
-  <rect fill="#000" width="2" height="7" x="7" y="4.5" style="transform: rotate(45deg); transform-origin: center;" />
+  <rect fill="#000" width="2" height="5" x="4" y="5" style="transform: rotate(-45deg); transform-origin: center;" />
+  <rect fill="#000" width="2" height="7" x="8" y="3" style="transform: rotate(45deg); transform-origin: center;" />
 </svg>

static/main.css

@@ -1,4 +1,10 @@
+/* Always first (just in case) */
 @import url(styles/palette.css);
+
+/* Sort these */
+@import url(styles/category.css);
+@import url(styles/nav.css);
+@import url(styles/picker.css);
 @import url(styles/role.css);
 
 * {
@@ -6,7 +12,17 @@
 }
 
 body {
+  margin: 1rem;
+  padding: 0;
   font-family: "Atkinson Hyperlegible", sans-serif;
-  background-color: var(--taupe200);
+  background-color: var(--taupe100);
   color: var(--taupe600);
+  max-width: 960px;
+  width: 100vw;
+}
+
+main {
+  padding: 4rem 1rem 1rem 1rem;
+  background-color: var(--taupe300);
+  box-shadow: 0 0 10px #00000044;
 }

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);