Added mutations encyclopedia.

Styles/Style.css

@@ -1225,7 +1225,7 @@ select {
     display: grid;
     grid-template-columns:
         repeat(
-            3,
+            var(--RecipeWidth, 3),
             minmax(0, 5.75rem)
         );
     gap: 0.75rem;
@@ -1288,7 +1288,7 @@ select {
     .GuideRecipe {
         grid-template-columns:
             repeat(
-                3,
+                var(--RecipeWidth, 3),
                 minmax(0, 1fr)
             );
         gap: 0.5rem;
@@ -1475,3 +1475,246 @@ select {
         gap: 0.2rem;
     }
 }
+
+
+/*
+ * Mutation encyclopedia
+ */
+
+.MutationEncyclopediaList {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    margin-top: 1.5rem;
+}
+
+.MutationEncyclopediaCard {
+    overflow: hidden;
+
+    box-shadow: 3px 3px 0 var(--Crust);
+}
+
+.MutationEncyclopediaHeader {
+    display: flex;
+    gap: 0.75rem;
+
+    align-items: baseline;
+
+    padding: 0.75rem 1rem;
+
+    background-color: var(--Surface0);
+    border-bottom: 3px solid var(--Surface2);
+}
+
+.MutationEncyclopediaHeader h2 {
+    margin: 0;
+
+    color: var(--Mauve);
+}
+
+.MutationEncyclopediaNumber {
+    flex: 0 0 auto;
+
+    color: var(--Overlay2);
+
+    font-size: 1.1rem;
+}
+
+.MutationEncyclopediaBody {
+    padding: 1rem;
+}
+
+.MutationEncyclopediaDescription {
+    margin-bottom: 1rem;
+}
+
+.MutationEncyclopediaStats {
+    display: grid;
+    grid-template-columns:
+        repeat(
+            2,
+            minmax(0, 1fr)
+        );
+    gap: 0 1rem;
+
+    margin-bottom: 1.25rem;
+}
+
+.MutationEncyclopediaStat {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.75rem;
+
+    padding: 0.35rem 0;
+
+    border-bottom: 2px solid var(--Surface0);
+}
+
+.MutationEncyclopediaStatName {
+    flex: 0 0 auto;
+
+    color: var(--Subtext1);
+}
+
+.MutationEncyclopediaStat > :last-child {
+    min-width: 0;
+
+    text-align: right;
+    overflow-wrap: anywhere;
+}
+
+.MutationEncyclopediaRecipeSection {
+    margin-bottom: 1.25rem;
+    padding: 1rem;
+
+    background-color: var(--Base);
+    border: 3px solid var(--Surface2);
+}
+
+.MutationEncyclopediaRecipeSection > h3 {
+    margin-bottom: 0.75rem;
+
+    color: var(--Peach);
+}
+
+.MutationEncyclopediaRecipeFlow {
+    display: grid;
+    grid-template-columns:
+        minmax(0, 1fr)
+        auto
+        minmax(0, 1fr);
+    gap: 0.75rem;
+
+    align-items: center;
+}
+
+.MutationEncyclopediaRecipePanel {
+    min-width: 0;
+}
+
+.MutationEncyclopediaRecipePanel h4 {
+    margin-bottom: 0.25rem;
+
+    color: var(--Subtext1);
+
+    font-size: 1rem;
+    text-align: center;
+}
+
+.MutationEncyclopediaRecipePanel .GuideRecipe {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.MutationEncyclopediaRecipeArrow {
+    color: var(--Yellow);
+
+    font-size: 2rem;
+}
+
+.MutationRecipeAny {
+    color: var(--Overlay2);
+    background-color: var(--Mantle);
+    border-style: dashed;
+}
+
+.MutationRecipeMatcher {
+    color: var(--Sky);
+    background-color: var(--Mantle);
+}
+
+.MutationRecipeKeep {
+    color: var(--Subtext1);
+    background-color: var(--Surface0);
+}
+
+.MutationRecipeCapture {
+    color: var(--Lavender);
+    background-color: var(--Surface0);
+}
+
+.MutationRecipeText {
+    max-width: 100%;
+
+    overflow-wrap: anywhere;
+
+    font-size: 0.75rem;
+    line-height: 1.15;
+    white-space: pre-line;
+}
+
+.MutationEncyclopediaMissingRecipe {
+    margin-bottom: 0;
+
+    color: var(--Overlay1);
+}
+
+.MutationEncyclopediaRelations {
+    display: grid;
+    grid-template-columns:
+        repeat(
+            2,
+            minmax(0, 1fr)
+        );
+    gap: 1rem;
+}
+
+.MutationEncyclopediaRelationGroup {
+    padding: 0.75rem;
+
+    background-color: var(--Base);
+    border: 3px solid var(--Surface2);
+}
+
+.MutationEncyclopediaRelationGroup h3 {
+    margin-bottom: 0.5rem;
+
+    color: var(--Peach);
+
+    font-size: 1rem;
+}
+
+.MutationEncyclopediaRelationList {
+    margin: 0;
+    padding-left: 1.25rem;
+}
+
+.MutationEncyclopediaRelationList li {
+    margin-bottom: 0.35rem;
+}
+
+.MutationEncyclopediaRelationList li:last-child {
+    margin-bottom: 0;
+}
+
+.MutationEncyclopediaRelationUnknown,
+.MutationEncyclopediaRelationEmpty {
+    color: var(--Overlay1);
+}
+
+@media (max-width: 700px) {
+    .MutationEncyclopediaStats,
+    .MutationEncyclopediaRelations {
+        grid-template-columns: 1fr;
+    }
+
+    .MutationEncyclopediaRecipeFlow {
+        grid-template-columns: 1fr;
+    }
+
+    .MutationEncyclopediaRecipeArrow {
+        justify-self: center;
+
+        transform: rotate(90deg);
+    }
+
+    .MutationEncyclopediaStat {
+        flex-direction: column;
+        gap: 0.2rem;
+    }
+
+    .MutationEncyclopediaStat > :last-child {
+        text-align: left;
+    }
+}