Init Best Practice document for new terms

docs/_data/navigation.yml

@@ -30,6 +30,9 @@
     - name: Code of Conduct
       link: "/CODE_OF_CONDUCT.html"
       description: Guidelines for ethical behaviour, respectful interactions, and community standards.
+    - name: Add a New Term
+      link: "/best_practice_new_term.html"
+      description: Guidelines for adding a new technique to PaNET.
 
 - name: Technical References
   link: "/build.html"

docs/assets/css/custom.css

@@ -2,13 +2,14 @@
 
 :root {
   /* New PANET color palette */
-  --panet-pink: rgb(186, 69, 118);
-  --panet-purple: rgb(101, 109, 177);
-  --panet-blue-cyan: rgb(129, 183, 228);
-  --panet-dark-blue: rgb(16, 55, 100);
-  --panet-black: rgb(17, 33, 62);
-  --panet-light-grey: rgb(248, 249, 250);
+  --panet-pink:        rgb(186, 69, 118);
+  --panet-purple:      rgb(101, 109, 177);
+  --panet-blue-cyan:   rgb(129, 183, 228);
+  --panet-dark-blue:   rgb(16, 55, 100);
+  --panet-black:       rgb(17, 33, 62);
+  --panet-light-grey:  rgb(248, 249, 250);
   --panet-border-grey: rgb(220, 224, 228);
+  --panet-light-blue:  rgb(208, 226, 240);
 }
 
 /* Fixed Header Styles */
@@ -71,6 +72,11 @@ body {
   box-shadow: 0 0 20px rgba(17, 33, 62, 0.1);
 }
 
+mark {
+  color: var(--panet-dark-blue);
+  background-color: var(--panet-light-blue);
+}
+
 #content {
   display: flex;
   width: 100%;
@@ -254,34 +260,82 @@ body {
   }
 }
 
-.content-section h2 {
+.hidden {
+  position: absolute;
+  left: -1000px;
+  top: -1000px;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  display: inline;
+}
+
+#scope-sidebar h1, summary.h1 {
+  color: var(--panet-purple);
+  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 2.5rem;
+  margin: 35px 0 20px 0;
+  font-weight: 600;
+}
+
+#scope-sidebar h2, summary.h2 {
   color: var(--panet-dark-blue);
   font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  font-size: 2.8rem; /* Reduced from 3.2rem to 2.8rem */
-  margin-bottom: 25px; /* Reduced from 30px to 25px */
-  border-bottom: 4px solid var(--panet-pink);
-  padding-bottom: 15px; /* Reduced from 20px to 15px */
+  font-size: 2rem;
+  margin:  25px 0 15px 0;
   font-weight: 700;
   line-height: 1.1;
   text-shadow: 0 1px 2px rgba(17, 33, 62, 0.1);
 }
 
-.content-section h1 {
-  color: var(--panet-purple);
-  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  font-size: 2rem; /* Reduced from 2.2rem to 2rem */
-  margin: 35px 0 20px 0; /* Reduced margins from 40px 0 25px 0 */
+#scope-sidebar h3, summary.h3 {
+  color: var(--panet-dark-blue);
+  font-size: 1.4rem;
   font-weight: 600;
-  border-left: 5px solid var(--panet-pink);
-  padding-left: 20px;
+  margin: 25px 0 15px 0;
+  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
-.content-section h3 {
+#scope-sidebar h4, summary.h4 {
   color: var(--panet-dark-blue);
-  font-size: 1.4rem; /* Reduced from 1.6rem to 1.4rem */
+  font-size: 1.4rem;
   font-weight: 600;
-  margin: 25px 0 15px 0; /* Reduced margins from 30px 0 20px 0 */
+  margin: 15px 0 5px 0;
+  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-style: italic;
+}
+
+#scope-sidebar h5, summary.h5 {
+  color: var(--panet-dark-blue);
+  font-size: 1.2rem;
+  font-weight: normal;
+  margin: 10px 0 5px 0;
   font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-style: italic;
+}
+
+.code-block {
+    background: var(--panet-light-grey);
+    color: var(--panet-black);
+    padding: 8px;
+    border-radius: 8px;
+    border: 2px solid var(--panet-border-grey);
+    overflow-x: auto;
+    font-family: 'Fira Code', monospace;
+    line-height: 1.5;
+}
+
+#ID_ranges {
+  padding-left: 24px;
+}
+
+#ID_ranges td, th {
+  padding: 4px 12px;
+}
+
+#ID_ranges td:nth-child(2),
+#ID_ranges td:nth-child(3) {
+    text-align: right;
 }
 
 .content-section p {