Backporting

clinicians.html

@@ -22,7 +22,7 @@
         </div>
         <div class="nav-links">
           <a href="clinicians.html">Annotators</a>
-          <a href="#">Protocol</a>
+          <a href="experimental-protocol.html">Protocol</a>
           <button class="share-button" type="button" data-share-button>Share</button>
         </div>
       </nav>

dataset-release.html

@@ -22,7 +22,7 @@
         </div>
         <div class="nav-links">
           <a href="clinicians.html">Annotators</a>
-          <a href="#">Protocol</a>
+          <a href="experimental-protocol.html">Protocol</a>
           <button class="share-button" type="button" data-share-button>Share</button>
         </div>
       </nav>

feedback.html

@@ -54,7 +54,7 @@
         </div>
         <div class="nav-links">
           <a href="clinicians.html">Annotators</a>
-          <a href="#">Protocol</a>
+          <a href="experimental-protocol.html">Protocol</a>
           <button class="share-button" type="button" data-share-button>Share</button>
         </div>
       </nav>

index.html

@@ -22,7 +22,7 @@
         </div>
         <div class="nav-links">
           <a href="clinicians.html">Annotators</a>
-          <a href="#">Protocol</a>
+          <a href="experimental-protocol.html">Protocol</a>
           <button class="share-button" type="button" data-share-button>Share</button>
         </div>
       </nav>
@@ -41,7 +41,7 @@ <h1>ReportX</h1>
                 <strong>Annotator guide</strong>
                 <span>Annotation protocol, annotation fields, examples, and language selector.</span>
               </a>
-              <a class="landing-card protocol-card" href="#">
+              <a class="landing-card protocol-card" href="experimental-protocol.html">
                 <span class="card-kicker">Protocol</span>
                 <strong>Experimental Protocol</strong>
                 <span>Study design, acquisition parameters, and experimental setup.</span>

join.html

@@ -22,7 +22,7 @@
         </div>
         <div class="nav-links">
           <a href="clinicians.html">Annotators</a>
-          <a href="#">Protocol</a>
+          <a href="experimental-protocol.html">Protocol</a>
           <button class="share-button" type="button" data-share-button>Share</button>
         </div>
       </nav>

styles.css

@@ -384,6 +384,42 @@ body.page-dataset .language-panel {
   cursor: pointer;
 }
 
+.top-language-switch {
+  display: inline-grid;
+  grid-template-columns: repeat(2, minmax(90px, 1fr));
+  gap: 4px;
+  margin-left: 8px;
+  padding: 4px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: #ffffff;
+}
+
+.top-language-switch label {
+  display: grid;
+  place-items: center;
+  min-height: 34px;
+  padding: 0 12px;
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: 0.85rem;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+body.page-protocol .nav-links {
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 8px 14px;
+}
+
+body.page-protocol .nav-links a,
+body.page-protocol .share-button {
+  display: inline-flex;
+  align-items: center;
+  min-height: 34px;
+}
+
 #lang-it:checked + label,
 #lang-en:checked + label {
   color: #ffffff;
@@ -400,6 +436,17 @@ body.page-clinicians[data-lang="en"] .lang-copy-it {
   display: none;
 }
 
+body.page-protocol[data-lang="it"] .protocol-en-content,
+body.page-protocol[data-lang="en"] .protocol-it-content {
+  display: none;
+}
+
+body.page-protocol[data-lang="it"] #lang-it + label,
+body.page-protocol[data-lang="en"] #lang-en + label {
+  color: #ffffff;
+  background: var(--dark);
+}
+
 .section-heading {
   max-width: 940px;
   margin-bottom: 24px;
@@ -1004,6 +1051,10 @@ figcaption {
     grid-template-columns: 1fr;
   }
 
+  body.page-protocol .nav-links {
+    flex-wrap: wrap;
+  }
+
   .landing-links,
   .tumor-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1030,6 +1081,15 @@ figcaption {
     justify-content: flex-start;
   }
 
+  .top-language-switch {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .top-language-switch label {
+    min-height: 40px;
+  }
+
   .hero {
     min-height: auto;
   }