Fix feedback spam: lock buttons after vote, add comment box on No

Voting now locks the widget for the page view (buttons disabled, chosen one highlighted, thank-you shown); reload to vote again. Fixes the CSS bug where display:flex overrode the hidden attribute so buttons stayed clickable. On No, an optional comment box posts to a separate Comment field. Adds a guarded [hidden] rule and selected/disabled/comment styles.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

css/pages/_guide.css

@@ -431,6 +431,10 @@
     align-items: center;
     gap: 14px;
 }
+/* Ensure hidden children stay hidden even though some have their own display rule. */
+.guide-feedback [hidden] {
+    display: none !important;
+}
 .guide-feedback-q {
     margin: 0;
     font-weight: 600;
@@ -474,6 +478,26 @@
 .guide-feedback-btn[data-vote="no"]:hover i {
     color: #F04438;
 }
+/* Locked state after voting: dim the buttons, keep the chosen one vivid. */
+.guide-feedback-btn:disabled {
+    cursor: default;
+    opacity: .55;
+}
+.guide-feedback-btn.is-selected {
+    opacity: 1;
+    color: #fff;
+}
+.guide-feedback-btn.is-selected[data-vote="yes"] {
+    background: #12B76A;
+    border-color: #12B76A;
+}
+.guide-feedback-btn.is-selected[data-vote="no"] {
+    background: #F04438;
+    border-color: #F04438;
+}
+.guide-feedback-btn.is-selected i {
+    color: #fff;
+}
 .guide-feedback-msg {
     margin: 0;
     color: #475467;
@@ -483,6 +507,60 @@
     color: #7360F2;
     font-weight: 600;
 }
+/* Optional comment box shown after "No". */
+.guide-feedback-comment {
+    flex-basis: 100%;
+    margin-top: 4px;
+}
+.guide-feedback-comment-label {
+    display: block;
+    margin-bottom: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #344054;
+}
+.guide-feedback-comment-input {
+    width: 100%;
+    max-width: 520px;
+    padding: 10px 12px;
+    border: 1.5px solid #D0D5DD;
+    border-radius: 8px;
+    font: inherit;
+    color: #101828;
+    resize: vertical;
+}
+.guide-feedback-comment-input:focus {
+    outline: none;
+    border-color: #7360F2;
+    box-shadow: 0 0 0 3px rgba(115, 96, 242, .15);
+}
+.guide-feedback-comment-send {
+    display: inline-block;
+    margin-top: 8px;
+    padding: 8px 20px;
+    border: none;
+    border-radius: 8px;
+    background: #7360F2;
+    color: #fff;
+    font-weight: 600;
+    font-size: 15px;
+    cursor: pointer;
+    transition: background .15s, transform .15s;
+}
+.guide-feedback-comment-send:hover {
+    background: #5f4de6;
+    transform: translateY(-1px);
+}
+.guide-feedback-comment-send:disabled {
+    opacity: .6;
+    cursor: default;
+    transform: none;
+}
+.guide-feedback-comment-thanks {
+    margin: 8px 0 0;
+    color: #12B76A;
+    font-weight: 600;
+}
 @media (max-width: 640px) {
     .guide-help {
         grid-template-columns: 1fr;