From 70d0da353d2b5dbbe21fee8bf83ea9a3fbfa06c1 Mon Sep 17 00:00:00 2001
From: Katya Sarmiento <5871075+Kitkatnik@users.noreply.github.com>
Date: Sun, 26 Apr 2026 22:11:02 -0400
Subject: [PATCH 01/13] Add Dashboard link to signed-in navbar

Surfaces /dashboard from the global nav so signed-in users can
return to the action-card grid without backing up through their
browser history. Added in both the desktop list and the mobile
drawer.
---
 app/views/shared/_navbar.html.erb | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index a2944d8..ba89f85 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -10,6 +10,7 @@
       <div class="hidden lg:block">
         <div class="flex items-center gap-x-3">
           <% if current_user %>
+            <%= link_to "Dashboard", dashboard_path, class: "text-blue px-3 py-1 text-lg font-medium" %>
             <%= link_to "Schedule", schedule_path, class: "text-blue px-3 py-1 text-lg font-medium" %>
             <%= link_to "My Plan", plan_path, class: "text-blue px-3 py-1 text-lg font-medium" %>
             <% if admin? %>
@@ -38,6 +39,7 @@
     <div data-toggle-target="toggleable" class="hidden lg:hidden">
       <div class="flex flex-col py-4 gap-y-2">
         <% if current_user %>
+          <%= link_to "Dashboard", dashboard_path, class: "text-blue block py-2 font-medium" %>
           <%= link_to "Schedule", schedule_path, class: "text-blue block py-2 font-medium" %>
           <%= link_to "My Plan", plan_path, class: "text-blue block py-2 font-medium" %>
           <% if admin? %>

From b1499db6d63b7dcb7b7d5aecc87692c65278e1d6 Mon Sep 17 00:00:00 2001
From: Katya Sarmiento <5871075+Kitkatnik@users.noreply.github.com>
Date: Sun, 26 Apr 2026 22:11:28 -0400
Subject: [PATCH 02/13] Add day picker to Host-an-Activity form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the form is opened from /dashboard's "Host an Activity" card,
no day is implied by the entry point, so the user couldn't pick
which day their activity belonged to — everything defaulted to
Saturday.

Render a Day select dropdown in that case (driven by
ScheduleItem::DAY_META). When the form is opened from /plan's
"+ Add custom block" link the day is already implied by the
section, so keep using a hidden field there. The distinguisher
is whether the caller passes show_day_picker: true.
---
 app/views/schedule_items/_form.html.erb | 22 +++++++++++++++++-----
 app/views/schedule_items/edit.html.erb  |  2 +-
 app/views/schedule_items/new.html.erb   |  2 +-
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/app/views/schedule_items/_form.html.erb b/app/views/schedule_items/_form.html.erb
index 4d83ab8..a36419b 100644
--- a/app/views/schedule_items/_form.html.erb
+++ b/app/views/schedule_items/_form.html.erb
@@ -10,11 +10,23 @@
 
 <div class="card card-compact">
   <%= form_with model: schedule_item, class: "space-y-4" do |f| %>
-    <%# Day is implied by the plan section this form was opened from —
-        ScheduleItemsController#new seeds @schedule_item.day from params[:day].
-        We render it as a hidden field so admins-browsing-as-attendees still
-        submit the intended day without an extra dropdown. %>
-    <%= f.hidden_field :day %>
+    <%# Day is set one of two ways:
+        - When the form is opened from a /plan day section ("+ Add custom block"),
+          ScheduleItemsController#new seeds @schedule_item.day from params[:day]
+          and we keep the field hidden — the user already chose the day implicitly.
+        - When opened from /dashboard ("Host an Activity"), no day is implied,
+          so the caller passes show_day_picker: true and we render a select. %>
+    <% if local_assigns.fetch(:show_day_picker, false) %>
+      <div>
+        <%= f.label :day, "Day", class: "label" %>
+        <%= f.select :day,
+                     ScheduleItem::DAY_META.map { |key, meta| [ "#{meta[:label]} · #{meta[:date]}", key ] },
+                     {},
+                     class: "input" %>
+      </div>
+    <% else %>
+      <%= f.hidden_field :day %>
+    <% end %>
 
     <div class="field-grid-2">
       <div>
diff --git a/app/views/schedule_items/edit.html.erb b/app/views/schedule_items/edit.html.erb
index 74c5bd8..b296d98 100644
--- a/app/views/schedule_items/edit.html.erb
+++ b/app/views/schedule_items/edit.html.erb
@@ -6,6 +6,6 @@
       Edit your activity
     </h1>
 
-    <%= render "form", schedule_item: @schedule_item %>
+    <%= render "form", schedule_item: @schedule_item, show_day_picker: false %>
   </div>
 </section>
diff --git a/app/views/schedule_items/new.html.erb b/app/views/schedule_items/new.html.erb
index 5aa4920..c91a77d 100644
--- a/app/views/schedule_items/new.html.erb
+++ b/app/views/schedule_items/new.html.erb
@@ -14,7 +14,7 @@
         on /plan this fragment is extracted into that frame (form
         expands inline). On direct visit, the surrounding page renders. %>
     <%= turbo_frame_tag "new_schedule_item_#{@schedule_item.day}" do %>
-      <%= render "form", schedule_item: @schedule_item %>
+      <%= render "form", schedule_item: @schedule_item, show_day_picker: params[:day].blank? %>
     <% end %>
   </div>
 </section>

From 7328348f6bf206eba05c8b462e1db6bdede4fe55 Mon Sep 17 00:00:00 2001
From: Katya Sarmiento <5871075+Kitkatnik@users.noreply.github.com>
Date: Sun, 26 Apr 2026 22:11:38 -0400
Subject: [PATCH 03/13] Add zap emoji to Lightning Talks badge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Single source of truth — the override flows through
kind_display_label and propagates to the kind filter chips,
public schedule cards, and admin index automatically.
---
 app/helpers/schedule_helper.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/helpers/schedule_helper.rb b/app/helpers/schedule_helper.rb
index 3317b59..7f40864 100644
--- a/app/helpers/schedule_helper.rb
+++ b/app/helpers/schedule_helper.rb
@@ -1,5 +1,5 @@
 module ScheduleHelper
-  KIND_DISPLAY_OVERRIDES = { "lightning" => "Lightning Talks" }.freeze
+  KIND_DISPLAY_OVERRIDES = { "lightning" => "⚡ Lightning Talks" }.freeze
 
   def kind_display_label(kind)
     return nil if kind.blank?

From 7f38e741b17be9d26fd1f609f1fdcfab575a8eef Mon Sep 17 00:00:00 2001
From: Katya Sarmiento <5871075+Kitkatnik@users.noreply.github.com>
Date: Sun, 26 Apr 2026 22:11:51 -0400
Subject: [PATCH 04/13] Fix stale PDF page count on application confirmation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The confirmation page advertised "2 pages" but the rendered PDF
is actually 3 pages — page-one's instructions overflow into a
second sheet before the notary addendum starts on the third.
---
 app/views/embassy_applications/show.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/embassy_applications/show.html.erb b/app/views/embassy_applications/show.html.erb
index f62ab71..5f2ee45 100644
--- a/app/views/embassy_applications/show.html.erb
+++ b/app/views/embassy_applications/show.html.erb
@@ -27,7 +27,7 @@
                   embassy_application_path(@application, format: :pdf),
                   class: "btn btn-red btn-lg" %>
       <p class="text-muted mt-2">
-        2 pages · standard letter size · includes Notary Certification
+        3 pages · standard letter size · includes Notary Certification
       </p>
     </section>
 

From d7c85c0d2e73efa6f7dfa7f1a8e94d48e21c535e Mon Sep 17 00:00:00 2001
From: Katya Sarmiento <5871075+Kitkatnik@users.noreply.github.com>
Date: Sun, 26 Apr 2026 22:20:50 -0400
Subject: [PATCH 05/13] Redesign admin embassy application view for interview
 readability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The show page was a single dense card of <dl>/<dt>/<dd> styled with
undefined CSS classes, so the questions and answers blurred together
and the attaché had no way to scan during the stamping interview.

Restructure as:

- Header row with applicant + appointment + submitted timestamp
- Two-up "interview cheat sheet" panel: notary assignment (with
  follow-up prompt) and Section 3 random pool draw
- Pill-style jump-nav across the five sections
- Each section gets a strong header, instructions, and (for section 3)
  a "random pool" badge so the attaché knows the questions vary
- Each Q&A renders as its own card: a "1.3" tag, the external_id, the
  question label in muted text, and the answer in a left-accented
  callout box that's the visual focus

Answer rendering by type:
- short/long/select/date: prose in the callout, simple_format-aware
- checkbox_group: pill chips instead of bulleted list (faster to scan)
- checkbox: green "✓ Affirmed" / red "✗ Not affirmed"
- blank: muted italic "— Blank —"

Extracts a _question_row partial to keep the case-by-field-type logic
out of the show template.
---
 app/assets/stylesheets/application.css        | 226 ++++++++++++++++++
 .../_question_row.html.erb                    |  37 +++
 .../admin/embassy_applications/show.html.erb  |  96 ++++----
 3 files changed, 313 insertions(+), 46 deletions(-)
 create mode 100644 app/views/admin/embassy_applications/_question_row.html.erb

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 4a39ffc..bf01765 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1508,6 +1508,232 @@ hr {
   margin: 0;
 }
 
+/* Admin: embassy application — interview view ------------------------- */
+/* The attaché reads each Q&A aloud during the stamping ceremony, so the
+   answer is the visual focus and the question is a small label above it. */
+
+.qa-meta-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+}
+@media (min-width: 720px) {
+  .qa-meta-grid { grid-template-columns: 1fr 1fr; }
+}
+
+.qa-meta-card {
+  background: #fffaf0;
+  border: 1px solid #e6d3a3;
+  border-left: 4px solid #c89b3c;
+  border-radius: 0.375rem;
+  padding: 1rem 1.25rem;
+}
+
+.qa-meta-card__label {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #8a6d2a;
+  margin: 0 0 0.375rem;
+}
+
+.qa-meta-card__value {
+  font-size: 1rem;
+  color: #0C2866;
+  margin: 0;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.qa-meta-card__sub {
+  font-size: 0.8125rem;
+  color: #6b7280;
+  margin: 0.5rem 0 0;
+  line-height: 1.4;
+}
+
+/* Section jump-nav at top of Q&A */
+.qa-jump-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.625rem;
+  background: #f3f4f6;
+  border-radius: 0.5rem;
+}
+
+.qa-jump-nav__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.875rem;
+  background: #ffffff;
+  border: 1px solid #d9dee1;
+  border-radius: 999px;
+  font-size: 0.8125rem;
+  text-decoration: none;
+  color: #0C2866;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.qa-jump-nav__link:hover {
+  background: #0C2866;
+  color: #ffffff;
+  border-color: #0C2866;
+}
+
+.qa-jump-nav__num {
+  font-weight: 700;
+  font-size: 0.75rem;
+  color: #c11e2a;
+}
+
+.qa-jump-nav__link:hover .qa-jump-nav__num { color: #ffffff; }
+
+/* One section block (header + question rows) */
+.qa-section {
+  margin-bottom: 2.5rem;
+  scroll-margin-top: 1rem;
+}
+
+.qa-section__header {
+  margin-bottom: 1.25rem;
+}
+
+.qa-section__header .embassy-section-header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.qa-section__instructions {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-style: italic;
+  margin: 0.5rem 0 0;
+  max-width: 65ch;
+  line-height: 1.5;
+}
+
+.qa-randompool-badge {
+  display: inline-block;
+  padding: 0.1875rem 0.625rem;
+  background: #fef3c7;
+  color: #92400e;
+  border-radius: 999px;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+/* One question + answer */
+.qa-question {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 1.25rem 1.5rem;
+  margin-bottom: 0.875rem;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
+}
+
+.qa-question__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin-bottom: 0.5rem;
+}
+
+.qa-question__num {
+  display: inline-block;
+  padding: 0.1875rem 0.5rem;
+  background: #0C2866;
+  color: #ffffff;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.qa-question__id {
+  font-size: 0.75rem;
+  color: #9ca3af;
+}
+
+.qa-question__label {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: #4b5563;
+  margin: 0 0 0.875rem;
+  line-height: 1.45;
+}
+
+/* The answer is the focal element. Left accent bar draws the eye. */
+.qa-question__answer {
+  background: #f9fafb;
+  border-left: 4px solid #0C2866;
+  border-radius: 0 0.375rem 0.375rem 0;
+  padding: 0.875rem 1.125rem;
+}
+
+.qa-question__answer p {
+  margin: 0 0 0.5rem;
+  font-size: 1.0625rem;
+  line-height: 1.55;
+  color: #111827;
+}
+
+.qa-question__answer p:last-child { margin-bottom: 0; }
+
+.qa-question__answer .qa-answer-text {
+  font-size: 1.0625rem;
+  line-height: 1.55;
+  color: #111827;
+}
+
+.qa-question__answer .qa-answer-blank {
+  font-style: italic;
+  color: #9ca3af;
+  font-size: 0.9375rem;
+}
+
+.qa-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4375rem;
+}
+
+.qa-pill {
+  display: inline-block;
+  padding: 0.3125rem 0.75rem;
+  background: #e0e7ff;
+  color: #1e3a8a;
+  border-radius: 999px;
+  font-size: 0.9375rem;
+  font-weight: 500;
+}
+
+.qa-question__answer .qa-affirm {
+  font-size: 1.0625rem;
+  color: #047857;
+  font-weight: 600;
+  margin: 0;
+}
+
+.qa-question__answer .qa-decline {
+  font-size: 1.0625rem;
+  color: #b91c1c;
+  font-weight: 600;
+  margin: 0;
+}
+
+/* Long-form answers get a touch more breathing room. */
+.qa-question--long .qa-question__answer { padding: 1rem 1.25rem; }
+
 /* Booking confirm actions --------------------------------------------- */
 
 /* button_to wraps its button in a <form>, which is block-level by default.
diff --git a/app/views/admin/embassy_applications/_question_row.html.erb b/app/views/admin/embassy_applications/_question_row.html.erb
new file mode 100644
index 0000000..cb0599f
--- /dev/null
+++ b/app/views/admin/embassy_applications/_question_row.html.erb
@@ -0,0 +1,37 @@
+<%# Renders one question + answer in the admin/interview view.
+    Locals: application (EmbassyApplication), question (Question), section_label (e.g. "1.3") %>
+<% answer = application.answer_for(question) %>
+<article class="qa-question qa-question--<%= question.field_type %>">
+  <header class="qa-question__meta">
+    <span class="qa-question__num"><%= section_label %></span>
+    <span class="qa-question__id mono"><%= question.external_id %></span>
+  </header>
+
+  <p class="qa-question__label"><%= question.label %></p>
+
+  <div class="qa-question__answer">
+    <% case question.field_type %>
+    <% when "checkbox_group" %>
+      <% values = Array(answer&.value_array) %>
+      <% if values.any? %>
+        <div class="qa-pills">
+          <% values.each do |v| %><span class="qa-pill"><%= v %></span><% end %>
+        </div>
+      <% else %>
+        <p class="qa-answer-blank">— None selected —</p>
+      <% end %>
+    <% when "checkbox" %>
+      <% if answer&.value_text == "true" %>
+        <p class="qa-affirm">✓ Affirmed</p>
+      <% else %>
+        <p class="qa-decline">✗ Not affirmed</p>
+      <% end %>
+    <% else %>
+      <% if answer&.value_text.present? %>
+        <%= simple_format(answer.value_text, class: "qa-answer-text") %>
+      <% else %>
+        <p class="qa-answer-blank">— Blank —</p>
+      <% end %>
+    <% end %>
+  </div>
+</article>
diff --git a/app/views/admin/embassy_applications/show.html.erb b/app/views/admin/embassy_applications/show.html.erb
index 29e86f2..4b5fc00 100644
--- a/app/views/admin/embassy_applications/show.html.erb
+++ b/app/views/admin/embassy_applications/show.html.erb
@@ -1,12 +1,12 @@
 <% content_for :title, "Application #{@application.serial} — Embassy Admin" %>
 
-<div class="flex items-center justify-between mb-6">
+<div class="flex items-start justify-between mb-6 gap-4 flex-wrap">
   <div>
     <h1 class="text-2xl font-bold text-navy">
       Application <span class="mono"><%= @application.serial %></span>
     </h1>
-    <p class="text-muted">
-      <%= @booking.user.full_name %> ·
+    <p class="text-muted mt-1">
+      <strong class="text-navy"><%= @booking.user.full_name %></strong> ·
       <%= ScheduleItem::DAY_META.dig(@schedule_item.day, :date) %> · <%= @schedule_item.time_label %> ·
       submitted <%= @application.submitted_at&.strftime("%b %-d · %-l:%M %p") %>
     </p>
@@ -19,52 +19,56 @@
   </div>
 </div>
 
-<div class="alert alert-notice mb-4">
-  <strong>Random pool draw:</strong>
-  <span class="mono"><%= @application.drawn_question_ids.join(", ") %></span>
-  (4 questions from the active Section 3 pool).
+<%# Interviewer cheat sheet — what the attaché needs at a glance. %>
+<div class="qa-meta-grid mb-6">
   <% if @notary %>
-    <br>
-    <strong>Notary assignment:</strong>
-    <span class="mono"><%= @notary.external_id %></span> ·
-    &ldquo;Someone who <%= @notary.description.sub(/^./, &:downcase) %>&rdquo;
+    <div class="qa-meta-card">
+      <p class="qa-meta-card__label">Notary assignment</p>
+      <p class="qa-meta-card__value">
+        <span class="mono"><%= @notary.external_id %></span> · Someone who
+        <%= @notary.description.sub(/^./, &:downcase) %>
+      </p>
+      <% if @notary.followup_prompt.present? %>
+        <p class="qa-meta-card__sub">
+          <strong>Notary's follow-up:</strong> <%= @notary.followup_prompt %>
+        </p>
+      <% end %>
+    </div>
   <% end %>
+  <div class="qa-meta-card">
+    <p class="qa-meta-card__label">Section 3 random pool draw</p>
+    <p class="qa-meta-card__value mono"><%= @application.drawn_question_ids.join("  ·  ") %></p>
+    <p class="qa-meta-card__sub">4 questions drawn from the active Section 3 pool.</p>
+  </div>
 </div>
 
-<div class="card">
-  <h2 class="embassy-section-header mb-4">Submitted Answers</h2>
-  <% [1, 2, 3, 4, 5].each do |n| %>
-    <div class="embassy-admin-section mb-4">
-      <h3 class="embassy-section-subhead">
+<%# Jump-nav so the attaché can flip between sections during the interview. %>
+<nav class="qa-jump-nav mb-8" aria-label="Jump to section">
+  <% [ 1, 2, 3, 4, 5 ].each do |n| %>
+    <a href="#section-<%= n %>" class="qa-jump-nav__link">
+      <span class="qa-jump-nav__num"><%= n %></span>
+      <span class="qa-jump-nav__label"><%= embassy_section_title(n) %></span>
+    </a>
+  <% end %>
+</nav>
+
+<% [ 1, 2, 3, 4, 5 ].each do |n| %>
+  <section id="section-<%= n %>" class="qa-section">
+    <header class="qa-section__header">
+      <h2 class="embassy-section-header">
         Section <%= n %> · <%= embassy_section_title(n) %>
-      </h3>
-      <dl class="embassy-admin-dl">
-        <% @sections[n].each do |question| %>
-          <% answer = @application.answer_for(question) %>
-          <dt><span class="mono"><%= question.external_id %></span> · <%= question.label %></dt>
-          <dd>
-            <% case question.field_type %>
-            <% when "checkbox_group" %>
-              <% values = Array(answer&.value_array) %>
-              <% if values.any? %>
-                <ul class="list-disc">
-                  <% values.each { |v| %><li><%= v %></li><% } %>
-                </ul>
-              <% else %>
-                <span class="text-muted">— None selected —</span>
-              <% end %>
-            <% when "checkbox" %>
-              <%= answer&.value_text == "true" ? "✓ Affirmed" : "— Not affirmed —" %>
-            <% else %>
-              <% if answer&.value_text.present? %>
-                <%= simple_format(answer.value_text) %>
-              <% else %>
-                <span class="text-muted">— Blank —</span>
-              <% end %>
-            <% end %>
-          </dd>
+        <% if n == 3 %>
+          <span class="qa-randompool-badge">★ random pool</span>
         <% end %>
-      </dl>
-    </div>
-  <% end %>
-</div>
+      </h2>
+      <p class="qa-section__instructions"><%= embassy_section_instructions(n) %></p>
+    </header>
+
+    <% @sections[n].each_with_index do |question, idx| %>
+      <%= render "question_row",
+                 application: @application,
+                 question: question,
+                 section_label: "#{n}.#{idx + 1}" %>
+    <% end %>
+  </section>
+<% end %>

From a694778da6c687b8d9d31434071dbbebe6aa91b4 Mon Sep 17 00:00:00 2001
From: Katya Sarmiento <5871075+Kitkatnik@users.noreply.github.com>
Date: Sun, 26 Apr 2026 22:27:02 -0400
Subject: [PATCH 06/13] Tighten admin application view to fit one screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the card-per-question layout with a dense 3-column grid
([1.3] | question | answer) so the whole application fits without
scrolling far. Drop section instructions and jump-nav (interview
context, not form-filling). Collapse cheat-sheet panel into a
single-row notary strip — pool draw IDs were noise and got cut.

Section 3 (the randomized pool) gets a tinted background and a
prominent "★ Randomized question pool" badge so the attaché's eye
lands on it instantly; gold tags on each row carry that signal
through when scrolling.

Restore "Download PDF" button text — the truncated "PDF" label
was unclear about the action.
---
 app/assets/stylesheets/application.css        | 287 +++++++++---------
 .../admin/embassy_applications/show.html.erb  |  75 ++---
 2 files changed, 174 insertions(+), 188 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index bf01765..57be24a 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1509,230 +1509,237 @@ hr {
 }
 
 /* Admin: embassy application — interview view ------------------------- */
-/* The attaché reads each Q&A aloud during the stamping ceremony, so the
-   answer is the visual focus and the question is a small label above it. */
+/* Dense single-page layout. The attaché scans down a tight 3-column grid
+   (label / question / answer), so each Q&A occupies one or two lines. */
 
-.qa-meta-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1rem;
-}
-@media (min-width: 720px) {
-  .qa-meta-grid { grid-template-columns: 1fr 1fr; }
-}
-
-.qa-meta-card {
-  background: #fffaf0;
-  border: 1px solid #e6d3a3;
-  border-left: 4px solid #c89b3c;
-  border-radius: 0.375rem;
-  padding: 1rem 1.25rem;
+.qa-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 0.875rem;
 }
 
-.qa-meta-card__label {
-  font-size: 0.6875rem;
+.qa-header__title {
+  font-size: 1.25rem;
   font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: #8a6d2a;
-  margin: 0 0 0.375rem;
-}
-
-.qa-meta-card__value {
-  font-size: 1rem;
   color: #0C2866;
   margin: 0;
-  font-weight: 500;
-  line-height: 1.4;
 }
 
-.qa-meta-card__sub {
+.qa-header__sub {
   font-size: 0.8125rem;
   color: #6b7280;
-  margin: 0.5rem 0 0;
-  line-height: 1.4;
+  margin: 0.125rem 0 0;
 }
 
-/* Section jump-nav at top of Q&A */
-.qa-jump-nav {
+.qa-header__sub strong { color: #0C2866; }
+
+.qa-header__actions {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  padding: 0.625rem;
-  background: #f3f4f6;
-  border-radius: 0.5rem;
+  gap: 0.375rem;
 }
 
-.qa-jump-nav__link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.875rem;
-  background: #ffffff;
-  border: 1px solid #d9dee1;
-  border-radius: 999px;
+.qa-header__actions .btn {
+  padding: 0.375rem 0.75rem;
   font-size: 0.8125rem;
-  text-decoration: none;
-  color: #0C2866;
-  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
 
-.qa-jump-nav__link:hover {
-  background: #0C2866;
-  color: #ffffff;
-  border-color: #0C2866;
+/* Compact info strip — notary + pool draw on one row */
+.qa-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+  background: #fffaf0;
+  border: 1px solid #e6d3a3;
+  border-left: 4px solid #c89b3c;
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+  font-size: 0.8125rem;
+  line-height: 1.4;
 }
 
-.qa-jump-nav__num {
-  font-weight: 700;
-  font-size: 0.75rem;
-  color: #c11e2a;
+.qa-strip__cell {
+  flex: 1 1 18rem;
+  padding: 0.5rem 0.75rem;
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  min-width: 0;
 }
 
-.qa-jump-nav__link:hover .qa-jump-nav__num { color: #ffffff; }
+.qa-strip__label {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #8a6d2a;
+  white-space: nowrap;
+}
 
-/* One section block (header + question rows) */
-.qa-section {
-  margin-bottom: 2.5rem;
-  scroll-margin-top: 1rem;
+.qa-strip__value {
+  color: #0C2866;
+  min-width: 0;
+  word-wrap: break-word;
 }
 
-.qa-section__header {
+/* Section block */
+.qa-section {
   margin-bottom: 1.25rem;
 }
 
-.qa-section__header .embassy-section-header {
+.qa-section__head {
   display: flex;
   align-items: baseline;
-  gap: 0.75rem;
+  gap: 0.5rem;
   flex-wrap: wrap;
+  margin: 0 0 0.25rem;
+  padding-bottom: 0.25rem;
+  border-bottom: 2px solid #0C2866;
+  font-family: "Playfair Display", Georgia, serif;
 }
 
-.qa-section__instructions {
-  font-size: 0.875rem;
+.qa-section__num {
+  font-size: 0.75rem;
+  font-weight: 700;
   color: #6b7280;
-  font-style: italic;
-  margin: 0.5rem 0 0;
-  max-width: 65ch;
-  line-height: 1.5;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
-.qa-randompool-badge {
+.qa-section__title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #0C2866;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.qa-section__badge {
+  margin-left: auto;
   display: inline-block;
   padding: 0.1875rem 0.625rem;
-  background: #fef3c7;
-  color: #92400e;
-  border-radius: 999px;
+  background: #fbbf24;
+  color: #78350f;
+  border-radius: 0.25rem;
   font-size: 0.6875rem;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: none;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
-/* One question + answer */
-.qa-question {
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
-  padding: 1.25rem 1.5rem;
-  margin-bottom: 0.875rem;
-  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
+/* Section 3 — randomized pool gets a distinct background tint
+   and a thicker yellow accent so the eye lands on it instantly. */
+.qa-section--pool {
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  border-left: 4px solid #f59e0b;
+  border-radius: 0.375rem;
+  padding: 0.625rem 0.875rem 0.5rem;
+  margin: 1.25rem 0;
 }
 
-.qa-question__meta {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  margin-bottom: 0.5rem;
+.qa-section--pool .qa-section__head {
+  border-bottom-color: #f59e0b;
 }
 
-.qa-question__num {
-  display: inline-block;
-  padding: 0.1875rem 0.5rem;
-  background: #0C2866;
-  color: #ffffff;
-  border-radius: 0.25rem;
+/* One Q&A row: label · question · answer */
+.qa-row {
+  display: grid;
+  grid-template-columns: 2.25rem minmax(10rem, 17rem) 1fr;
+  gap: 0.5rem 0.75rem;
+  align-items: baseline;
+  padding: 0.4rem 0.25rem;
+  border-bottom: 1px solid #f1f3f5;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.qa-row:last-child { border-bottom: none; }
+
+.qa-row__num {
   font-size: 0.75rem;
   font-weight: 700;
-  letter-spacing: 0.04em;
+  color: #ffffff;
+  background: #0C2866;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  text-align: center;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  align-self: center;
+  justify-self: start;
 }
 
-.qa-question__id {
-  font-size: 0.75rem;
-  color: #9ca3af;
+.qa-section--pool .qa-row__num {
+  background: #f59e0b;
+  color: #78350f;
 }
 
-.qa-question__label {
-  font-size: 0.9375rem;
-  font-weight: 500;
+.qa-row__q {
+  font-size: 0.8125rem;
   color: #4b5563;
-  margin: 0 0 0.875rem;
-  line-height: 1.45;
-}
-
-/* The answer is the focal element. Left accent bar draws the eye. */
-.qa-question__answer {
-  background: #f9fafb;
-  border-left: 4px solid #0C2866;
-  border-radius: 0 0.375rem 0.375rem 0;
-  padding: 0.875rem 1.125rem;
+  font-weight: 500;
 }
 
-.qa-question__answer p {
-  margin: 0 0 0.5rem;
-  font-size: 1.0625rem;
-  line-height: 1.55;
+.qa-row__a {
   color: #111827;
+  font-weight: 500;
+  min-width: 0;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
 }
 
-.qa-question__answer p:last-child { margin-bottom: 0; }
-
-.qa-question__answer .qa-answer-text {
-  font-size: 1.0625rem;
-  line-height: 1.55;
+.qa-row__a p {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
   color: #111827;
 }
 
-.qa-question__answer .qa-answer-blank {
+.qa-row__a p + p { margin-top: 0.25rem; }
+
+.qa-blank {
   font-style: italic;
   color: #9ca3af;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
 }
 
 .qa-pills {
-  display: flex;
+  display: inline-flex;
   flex-wrap: wrap;
-  gap: 0.4375rem;
+  gap: 0.25rem;
 }
 
 .qa-pill {
   display: inline-block;
-  padding: 0.3125rem 0.75rem;
+  padding: 0.0625rem 0.5rem;
   background: #e0e7ff;
   color: #1e3a8a;
   border-radius: 999px;
-  font-size: 0.9375rem;
+  font-size: 0.8125rem;
   font-weight: 500;
+  line-height: 1.4;
 }
 
-.qa-question__answer .qa-affirm {
-  font-size: 1.0625rem;
+.qa-affirm {
   color: #047857;
-  font-weight: 600;
-  margin: 0;
+  font-weight: 700;
 }
 
-.qa-question__answer .qa-decline {
-  font-size: 1.0625rem;
+.qa-decline {
   color: #b91c1c;
-  font-weight: 600;
-  margin: 0;
+  font-weight: 700;
 }
 
-/* Long-form answers get a touch more breathing room. */
-.qa-question--long .qa-question__answer { padding: 1rem 1.25rem; }
+/* On narrow screens the question column gets too cramped; stack instead. */
+@media (max-width: 640px) {
+  .qa-row {
+    grid-template-columns: 2.25rem 1fr;
+  }
+  .qa-row__q { grid-column: 2; }
+  .qa-row__a { grid-column: 2; }
+}
 
 /* Booking confirm actions --------------------------------------------- */
 
diff --git a/app/views/admin/embassy_applications/show.html.erb b/app/views/admin/embassy_applications/show.html.erb
index 4b5fc00..168c52f 100644
--- a/app/views/admin/embassy_applications/show.html.erb
+++ b/app/views/admin/embassy_applications/show.html.erb
@@ -1,68 +1,47 @@
 <% content_for :title, "Application #{@application.serial} — Embassy Admin" %>
 
-<div class="flex items-start justify-between mb-6 gap-4 flex-wrap">
+<div class="qa-header">
   <div>
-    <h1 class="text-2xl font-bold text-navy">
+    <h1 class="qa-header__title">
       Application <span class="mono"><%= @application.serial %></span>
     </h1>
-    <p class="text-muted mt-1">
-      <strong class="text-navy"><%= @booking.user.full_name %></strong> ·
+    <p class="qa-header__sub">
+      <strong><%= @booking.user.full_name %></strong> ·
       <%= ScheduleItem::DAY_META.dig(@schedule_item.day, :date) %> · <%= @schedule_item.time_label %> ·
       submitted <%= @application.submitted_at&.strftime("%b %-d · %-l:%M %p") %>
     </p>
   </div>
-  <div class="flex gap-2">
-    <%= link_to "Download PDF",
-                admin_embassy_application_path(@application, format: :pdf),
-                class: "btn btn-red btn-lg" %>
+  <div class="qa-header__actions">
+    <%= link_to "Download PDF", admin_embassy_application_path(@application, format: :pdf), class: "btn btn-red" %>
     <%= link_to "← Back", admin_embassy_applications_path, class: "btn btn-muted" %>
   </div>
 </div>
 
-<%# Interviewer cheat sheet — what the attaché needs at a glance. %>
-<div class="qa-meta-grid mb-6">
-  <% if @notary %>
-    <div class="qa-meta-card">
-      <p class="qa-meta-card__label">Notary assignment</p>
-      <p class="qa-meta-card__value">
-        <span class="mono"><%= @notary.external_id %></span> · Someone who
-        <%= @notary.description.sub(/^./, &:downcase) %>
-      </p>
-      <% if @notary.followup_prompt.present? %>
-        <p class="qa-meta-card__sub">
-          <strong>Notary's follow-up:</strong> <%= @notary.followup_prompt %>
-        </p>
-      <% end %>
+<% if @notary %>
+  <%# What notary the applicant must locate, plus the follow-up question they'll be asked. %>
+  <div class="qa-strip">
+    <div class="qa-strip__cell">
+      <span class="qa-strip__label">Notary</span>
+      <span class="qa-strip__value">
+        <span class="mono"><%= @notary.external_id %></span> ·
+        <em>Someone who <%= @notary.description.sub(/^./, &:downcase) %></em>
+        <% if @notary.followup_prompt.present? %>
+          · follow-up: &ldquo;<%= @notary.followup_prompt %>&rdquo;
+        <% end %>
+      </span>
     </div>
-  <% end %>
-  <div class="qa-meta-card">
-    <p class="qa-meta-card__label">Section 3 random pool draw</p>
-    <p class="qa-meta-card__value mono"><%= @application.drawn_question_ids.join("  ·  ") %></p>
-    <p class="qa-meta-card__sub">4 questions drawn from the active Section 3 pool.</p>
   </div>
-</div>
-
-<%# Jump-nav so the attaché can flip between sections during the interview. %>
-<nav class="qa-jump-nav mb-8" aria-label="Jump to section">
-  <% [ 1, 2, 3, 4, 5 ].each do |n| %>
-    <a href="#section-<%= n %>" class="qa-jump-nav__link">
-      <span class="qa-jump-nav__num"><%= n %></span>
-      <span class="qa-jump-nav__label"><%= embassy_section_title(n) %></span>
-    </a>
-  <% end %>
-</nav>
+<% end %>
 
 <% [ 1, 2, 3, 4, 5 ].each do |n| %>
-  <section id="section-<%= n %>" class="qa-section">
-    <header class="qa-section__header">
-      <h2 class="embassy-section-header">
-        Section <%= n %> · <%= embassy_section_title(n) %>
-        <% if n == 3 %>
-          <span class="qa-randompool-badge">★ random pool</span>
-        <% end %>
-      </h2>
-      <p class="qa-section__instructions"><%= embassy_section_instructions(n) %></p>
-    </header>
+  <section class="qa-section <%= "qa-section--pool" if n == 3 %>">
+    <h2 class="qa-section__head">
+      <span class="qa-section__num">§ <%= n %></span>
+      <span class="qa-section__title"><%= embassy_section_title(n) %></span>
+      <% if n == 3 %>
+        <span class="qa-section__badge">★ Randomized question pool</span>
+      <% end %>
+    </h2>
 
     <% @sections[n].each_with_index do |question, idx| %>
       <%= render "question_row",

From e00fb0c0782b5e20ddf0763054915842b99461d8 Mon Sep 17 00:00:00 2001
From: Katya Sarmiento <5871075+Kitkatnik@users.noreply.github.com>
Date: Sun, 26 Apr 2026 22:31:12 -0400
Subject: [PATCH 07/13] Make admin nav mobile-responsive with burger menu

The admin navy bar was a single flex row with seven inline links,
which collapsed badly on mobile. Mirror the signed-in user navbar
pattern: brand left, burger right, with a toggleable drawer that
stacks the links on screens below the lg breakpoint. Drops the
flex layout from .admin-nav so the inner toggle wrapper handles
both desktop row and mobile column flows.

Reuses the existing toggle Stimulus controller, the burger SVG
markup, and the click@window-to-close behavior.
---
 app/assets/stylesheets/application.css |  5 +--
 app/views/layouts/admin.html.erb       | 57 ++++++++++++++++++++------
 2 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 57be24a..18d5705 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1171,10 +1171,7 @@ hr {
 .admin-nav {
   background: #0C2866;
   color: #ffffff;
-  padding: 0.875rem 2rem;
-  display: flex;
-  align-items: center;
-  gap: 1.5rem;
+  padding: 0.875rem 1.5rem;
 }
 
 .admin-nav a { color: #ffffff; }
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index 974528d..8a86b70 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -20,19 +20,50 @@
 
   <body class="bg-gray-50">
     <nav class="admin-nav">
-      <%= link_to "Ruby Embassy Admin", admin_root_path, class: "font-semibold" %>
-      <%= link_to "Admin Dashboard", admin_root_path %>
-      <%= link_to "Attendees", admin_users_path %>
-      <span class="nav-disabled" aria-disabled="true">
-        Volunteers
-        <span class="nav-soon">Soon</span>
-      </span>
-      <%= link_to "Schedule", admin_schedule_items_path %>
-      <%= link_to "Embassy Applications", admin_embassy_applications_path %>
-      <span class="ml-auto flex items-center gap-4">
-        <%= link_to "User Dashboard", dashboard_path %>
-        <%= button_to "Sign out", session_path, method: :delete, class: "admin-nav-btn" %>
-      </span>
+      <div data-controller="toggle" data-toggle-toggle-class="hidden">
+        <div class="flex items-center justify-between gap-4">
+          <%= link_to "Ruby Embassy Admin", admin_root_path, class: "font-semibold" %>
+
+          <div class="hidden lg:flex items-center gap-x-6 ml-auto">
+            <%= link_to "Admin Dashboard", admin_root_path %>
+            <%= link_to "Attendees", admin_users_path %>
+            <span class="nav-disabled" aria-disabled="true">
+              Volunteers
+              <span class="nav-soon">Soon</span>
+            </span>
+            <%= link_to "Schedule", admin_schedule_items_path %>
+            <%= link_to "Embassy Applications", admin_embassy_applications_path %>
+            <%= link_to "User Dashboard", dashboard_path, class: "ml-2" %>
+            <%= button_to "Sign out", session_path, method: :delete, class: "admin-nav-btn" %>
+          </div>
+
+          <div class="flex lg:hidden">
+            <button data-action="click->toggle#toggle click@window->toggle#hide" class="inline-flex items-center justify-center p-2 text-white cursor-pointer focus:outline-hidden" aria-label="Open menu">
+              <span class="sr-only">Open main menu</span>
+              <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <div data-toggle-target="toggleable" class="hidden lg:hidden">
+          <div class="flex flex-col py-3 gap-y-1">
+            <%= link_to "Admin Dashboard", admin_root_path, class: "block py-2" %>
+            <%= link_to "Attendees", admin_users_path, class: "block py-2" %>
+            <span class="nav-disabled block py-2" aria-disabled="true">
+              Volunteers
+              <span class="nav-soon">Soon</span>
+            </span>
+            <%= link_to "Schedule", admin_schedule_items_path, class: "block py-2" %>
+            <%= link_to "Embassy Applications", admin_embassy_applications_path, class: "block py-2" %>
+            <%= link_to "User Dashboard", dashboard_path, class: "block py-2" %>
+            <div class="py-2">
+              <%= button_to "Sign out", session_path, method: :delete, class: "admin-nav-btn" %>
+            </div>
+          </div>
+        </div>
+      </div>
     </nav>
 
     <main class="px-8 py-10">

From 2820cebc9c4a4ad0cb77ff9cba8a921227abbc5d Mon Sep 17 00:00:00 2001
From: Katya Sarmiento <5871075+Kitkatnik@users.noreply.github.com>
Date: Sun, 26 Apr 2026 22:32:50 -0400
Subject: [PATCH 08/13] Update question row partial to match dense grid markup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Missed in a694778 — the partial still emitted the old
qa-question card markup, which paired with the new qa-row
CSS meant questions rendered unstyled on the deployed page.
---
 .../_question_row.html.erb                    | 33 ++++++++-----------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/app/views/admin/embassy_applications/_question_row.html.erb b/app/views/admin/embassy_applications/_question_row.html.erb
index cb0599f..2b94468 100644
--- a/app/views/admin/embassy_applications/_question_row.html.erb
+++ b/app/views/admin/embassy_applications/_question_row.html.erb
@@ -1,37 +1,32 @@
-<%# Renders one question + answer in the admin/interview view.
-    Locals: application (EmbassyApplication), question (Question), section_label (e.g. "1.3") %>
+<%# One row per question. Three columns: section label · question · answer.
+    Locals: application, question, section_label %>
 <% answer = application.answer_for(question) %>
-<article class="qa-question qa-question--<%= question.field_type %>">
-  <header class="qa-question__meta">
-    <span class="qa-question__num"><%= section_label %></span>
-    <span class="qa-question__id mono"><%= question.external_id %></span>
-  </header>
-
-  <p class="qa-question__label"><%= question.label %></p>
-
-  <div class="qa-question__answer">
+<div class="qa-row qa-row--<%= question.field_type %>">
+  <span class="qa-row__num"><%= section_label %></span>
+  <div class="qa-row__q"><%= question.label %></div>
+  <div class="qa-row__a">
     <% case question.field_type %>
     <% when "checkbox_group" %>
       <% values = Array(answer&.value_array) %>
       <% if values.any? %>
-        <div class="qa-pills">
+        <span class="qa-pills">
           <% values.each do |v| %><span class="qa-pill"><%= v %></span><% end %>
-        </div>
+        </span>
       <% else %>
-        <p class="qa-answer-blank">— None selected —</p>
+        <span class="qa-blank">— none —</span>
       <% end %>
     <% when "checkbox" %>
       <% if answer&.value_text == "true" %>
-        <p class="qa-affirm">✓ Affirmed</p>
+        <span class="qa-affirm">✓ Affirmed</span>
       <% else %>
-        <p class="qa-decline">✗ Not affirmed</p>
+        <span class="qa-decline">✗ Not affirmed</span>
       <% end %>
     <% else %>
       <% if answer&.value_text.present? %>
-        <%= simple_format(answer.value_text, class: "qa-answer-text") %>
+        <%= simple_format(answer.value_text) %>
       <% else %>
-        <p class="qa-answer-blank">— Blank —</p>
+        <span class="qa-blank">— blank —</span>
       <% end %>
     <% end %>
   </div>
-</article>
+</div>

From dac1436d1b7d673a6d10b7a19aeab8c035f91b16 Mon Sep 17 00:00:00 2001
From: Katya Sarmiento <5871075+Kitkatnik@users.noreply.github.com>
Date: Sun, 26 Apr 2026 22:36:42 -0400
Subject: [PATCH 09/13] Make admin dashboard mobile responsive

Wrap every admin table in a .table-scroll container with
overflow-x: auto so wide tables (Users, Schedule Items,
Embassy Applications, Delivered, Question Bank, Notary Pool,
Archived Questions) become horizontally swipable on narrow
screens instead of blowing out the layout.

Move the table's border-radius and shadow up to the wrapper
so the visual chrome survives the overflow clip.

Add gap-3 flex-wrap to admin page header rows so the title
and action buttons can stack vertically on mobile instead of
overlapping. Same for the search forms on the embassy
application queues. Add flex-wrap to the question-bank
section headers (CSS-side fix).
---
 app/assets/stylesheets/application.css        | 19 ++++++++++++++++++-
 .../embassy_applications/delivered.html.erb   |  6 ++++--
 .../admin/embassy_applications/index.html.erb |  6 ++++--
 .../admin/embassy_questions/index.html.erb    |  8 +++++++-
 app/views/admin/schedule_items/index.html.erb |  4 +++-
 app/views/admin/users/index.html.erb          |  4 +++-
 app/views/admin/users/show.html.erb           |  2 +-
 7 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 18d5705..d6f677d 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1138,6 +1138,22 @@ hr {
 
 .table tr:first-child td { border-top: 0; }
 
+/* Horizontal scroll wrapper for wide tables on narrow screens.
+   The table inside keeps width: 100% but expands beyond the wrapper
+   when its content min-width exceeds the available space — at which
+   point overflow-x lets the user swipe through it. */
+.table-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08);
+}
+
+.table-scroll .table {
+  box-shadow: none;
+  border-radius: 0;
+}
+
 
 /* ---------- Role/status badges ---------------------------- */
 
@@ -2364,7 +2380,8 @@ hr {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 1rem;
+  flex-wrap: wrap;
+  gap: 0.75rem 1rem;
   margin-bottom: 0.625rem;
   padding-bottom: 0.5rem;
   border-bottom: 1px solid #eef1f4;
diff --git a/app/views/admin/embassy_applications/delivered.html.erb b/app/views/admin/embassy_applications/delivered.html.erb
index eac8df8..116f1ad 100644
--- a/app/views/admin/embassy_applications/delivered.html.erb
+++ b/app/views/admin/embassy_applications/delivered.html.erb
@@ -1,6 +1,6 @@
 <% content_for :title, "Delivered Passports — Embassy Admin" %>
 
-<div class="flex items-center justify-between mb-6">
+<div class="flex items-center justify-between mb-6 gap-3 flex-wrap">
   <div>
     <h1 class="text-2xl font-bold text-navy">Delivered Passports</h1>
     <p class="text-muted">
@@ -10,7 +10,7 @@
   </div>
 </div>
 
-<%= form_with url: delivered_admin_embassy_applications_path, method: :get, local: true, class: "mb-6 flex gap-2" do %>
+<%= form_with url: delivered_admin_embassy_applications_path, method: :get, local: true, class: "mb-6 flex gap-2 flex-wrap" do %>
   <%= text_field_tag :q, @query,
         placeholder: "Search by name, email, or serial…",
         class: "input flex-1" %>
@@ -30,6 +30,7 @@
     <% end %>
   </div>
 <% else %>
+  <div class="table-scroll">
   <table class="table">
     <thead>
       <tr>
@@ -69,4 +70,5 @@
       <% end %>
     </tbody>
   </table>
+  </div>
 <% end %>
diff --git a/app/views/admin/embassy_applications/index.html.erb b/app/views/admin/embassy_applications/index.html.erb
index 67c4dd2..2ae68c2 100644
--- a/app/views/admin/embassy_applications/index.html.erb
+++ b/app/views/admin/embassy_applications/index.html.erb
@@ -1,6 +1,6 @@
 <% content_for :title, "Submitted Applications — Embassy Admin" %>
 
-<div class="flex items-center justify-between mb-6">
+<div class="flex items-center justify-between mb-6 gap-3 flex-wrap">
   <div>
     <h1 class="text-2xl font-bold text-navy">Submitted Applications</h1>
     <p class="text-muted">
@@ -13,7 +13,7 @@
               class: "btn btn-red" %>
 </div>
 
-<%= form_with url: admin_embassy_applications_path, method: :get, local: true, class: "mb-6 flex gap-2" do %>
+<%= form_with url: admin_embassy_applications_path, method: :get, local: true, class: "mb-6 flex gap-2 flex-wrap" do %>
   <%= text_field_tag :q, @query,
         placeholder: "Search by name, email, or serial…",
         class: "input flex-1" %>
@@ -33,6 +33,7 @@
     <% end %>
   </div>
 <% else %>
+  <div class="table-scroll">
   <table class="table">
     <thead>
       <tr>
@@ -72,4 +73,5 @@
       <% end %>
     </tbody>
   </table>
+  </div>
 <% end %>
diff --git a/app/views/admin/embassy_questions/index.html.erb b/app/views/admin/embassy_questions/index.html.erb
index fbb7c1c..a27d6a7 100644
--- a/app/views/admin/embassy_questions/index.html.erb
+++ b/app/views/admin/embassy_questions/index.html.erb
@@ -1,6 +1,6 @@
 <% content_for :title, "Question Bank — Embassy Admin" %>
 
-<div class="flex items-center justify-between mb-6">
+<div class="flex items-center justify-between mb-6 gap-3 flex-wrap">
   <div>
     <h1 class="text-2xl font-bold text-navy">Question Bank</h1>
     <p class="text-muted">
@@ -40,6 +40,7 @@
       </div>
     </header>
 
+    <div class="table-scroll">
     <table class="table">
       <thead>
         <tr>
@@ -57,6 +58,7 @@
         <% end %>
       </tbody>
     </table>
+    </div>
   </section>
 <% end %>
 
@@ -77,6 +79,7 @@
     </div>
   </header>
 
+  <div class="table-scroll">
   <table class="table">
     <thead>
       <tr>
@@ -100,6 +103,7 @@
       <% end %>
     </tbody>
   </table>
+  </div>
 </section>
 
 <% archived = @questions.select(&:archived?) %>
@@ -113,6 +117,7 @@
         </p>
       </div>
     </header>
+    <div class="table-scroll">
     <table class="table">
       <thead>
         <tr>
@@ -130,5 +135,6 @@
         <% end %>
       </tbody>
     </table>
+    </div>
   </section>
 <% end %>
diff --git a/app/views/admin/schedule_items/index.html.erb b/app/views/admin/schedule_items/index.html.erb
index 957b1bf..b9208f2 100644
--- a/app/views/admin/schedule_items/index.html.erb
+++ b/app/views/admin/schedule_items/index.html.erb
@@ -1,6 +1,6 @@
 <% content_for :container_width, "max-w-6xl" %>
 
-<div class="flex items-center justify-between mb-6">
+<div class="flex items-center justify-between mb-6 gap-3 flex-wrap">
   <h1 class="text-2xl font-bold text-navy">Schedule Items</h1>
   <%= link_to "Add item", new_admin_schedule_item_path, class: "btn btn-red" %>
 </div>
@@ -13,6 +13,7 @@
     <%= link_to "Clear filter", admin_schedule_items_path, class: "text-blue underline" %>
   </p>
 <% else %>
+  <div class="table-scroll">
   <table class="table">
     <thead>
       <tr>
@@ -61,4 +62,5 @@
       <% end %>
     </tbody>
   </table>
+  </div>
 <% end %>
diff --git a/app/views/admin/users/index.html.erb b/app/views/admin/users/index.html.erb
index 12342b8..1ede300 100644
--- a/app/views/admin/users/index.html.erb
+++ b/app/views/admin/users/index.html.erb
@@ -1,6 +1,6 @@
 <% content_for :container_width, "max-w-6xl" %>
 
-<div class="flex items-center justify-between mb-6">
+<div class="flex items-center justify-between mb-6 gap-3 flex-wrap">
   <h1 class="text-2xl font-bold text-navy">Users</h1>
   <div class="flex gap-3">
     <%= button_to "Sync from Tito", sync_admin_users_path, method: :post, class: "btn btn-navy" %>
@@ -8,6 +8,7 @@
   </div>
 </div>
 
+<div class="table-scroll">
 <table class="table">
   <thead>
     <tr>
@@ -49,3 +50,4 @@
     <% end %>
   </tbody>
 </table>
+</div>
diff --git a/app/views/admin/users/show.html.erb b/app/views/admin/users/show.html.erb
index 8c02f4c..b4b223f 100644
--- a/app/views/admin/users/show.html.erb
+++ b/app/views/admin/users/show.html.erb
@@ -4,7 +4,7 @@
   <%= link_to "\u2190 All users", admin_users_path, class: "text-blue underline" %>
 </div>
 
-<div class="flex items-center justify-between mb-6">
+<div class="flex items-center justify-between mb-6 gap-3 flex-wrap">
   <div>
     <h1 class="text-2xl font-bold text-navy"><%= @user.full_name %></h1>
     <p class="text-gray"><%= @user.email %></p>

From c727d2efb1868fce2893cf5edfce64e438c3c085 Mon Sep 17 00:00:00 2001
From: Katya Sarmiento <5871075+Kitkatnik@users.noreply.github.com>
Date: Sun, 26 Apr 2026 22:42:04 -0400
Subject: [PATCH 10/13] Fix admin nav links missing on desktop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hand-written CSS in application.css only defines lg:block
and lg:hidden — there's no lg:flex utility. The desktop link
container had "hidden lg:flex" so on desktop the hidden class
never got overridden and the links stayed display: none.

Mirror the user navbar's nesting pattern: outer "hidden lg:block"
wrapper for visibility, inner "flex items-center gap-x-6" div
for layout. The inner flex always resolves; the outer block
toggles in/out at the lg breakpoint.
---
 app/views/layouts/admin.html.erb | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index 8a86b70..a881293 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -24,17 +24,19 @@
         <div class="flex items-center justify-between gap-4">
           <%= link_to "Ruby Embassy Admin", admin_root_path, class: "font-semibold" %>
 
-          <div class="hidden lg:flex items-center gap-x-6 ml-auto">
-            <%= link_to "Admin Dashboard", admin_root_path %>
-            <%= link_to "Attendees", admin_users_path %>
-            <span class="nav-disabled" aria-disabled="true">
-              Volunteers
-              <span class="nav-soon">Soon</span>
-            </span>
-            <%= link_to "Schedule", admin_schedule_items_path %>
-            <%= link_to "Embassy Applications", admin_embassy_applications_path %>
-            <%= link_to "User Dashboard", dashboard_path, class: "ml-2" %>
-            <%= button_to "Sign out", session_path, method: :delete, class: "admin-nav-btn" %>
+          <div class="hidden lg:block ml-auto">
+            <div class="flex items-center gap-x-6">
+              <%= link_to "Admin Dashboard", admin_root_path %>
+              <%= link_to "Attendees", admin_users_path %>
+              <span class="nav-disabled" aria-disabled="true">
+                Volunteers
+                <span class="nav-soon">Soon</span>
+              </span>
+              <%= link_to "Schedule", admin_schedule_items_path %>
+              <%= link_to "Embassy Applications", admin_embassy_applications_path %>
+              <%= link_to "User Dashboard", dashboard_path, class: "ml-2" %>
+              <%= button_to "Sign out", session_path, method: :delete, class: "admin-nav-btn" %>
+            </div>
           </div>
 
           <div class="flex lg:hidden">

From 6812cadc9102c28909901e316fdda589e556a654 Mon Sep 17 00:00:00 2001
From: Katya Sarmiento <5871075+Kitkatnik@users.noreply.github.com>
Date: Sun, 26 Apr 2026 22:47:34 -0400
Subject: [PATCH 11/13] Restore original admin nav on desktop; rename User
 Dashboard link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The mobile-responsive rewrite changed the admin nav markup and used
Tailwind utilities (lg:flex, gap-x-6) that aren't actually defined
in the hand-rolled application.css, so links rendered smushed and
the desktop navbar no longer matched the screenshot it was supposed
to mirror.

Restore the original markup and the original .admin-nav CSS
(display: flex, gap: 1.5rem, padding: 0.875rem 2rem) byte-for-byte.
The mobile burger is now an additional last-child of the nav with
display: none on desktop — zero visual effect at lg+ widths. Below
the lg breakpoint, a CSS rule hides every nav child except the
brand and burger, and the drawer (a sibling of the nav, never
visible on desktop thanks to a !important guard) reveals the full
link list when toggled.

Also rename the "User Dashboard" link to "back to User Dashboard"
in both the desktop nav and the mobile drawer.
---
 app/assets/stylesheets/application.css | 49 +++++++++++++++-
 app/views/layouts/admin.html.erb       | 79 ++++++++++++--------------
 2 files changed, 83 insertions(+), 45 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index d6f677d..1133ab4 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1187,7 +1187,10 @@ hr {
 .admin-nav {
   background: #0C2866;
   color: #ffffff;
-  padding: 0.875rem 1.5rem;
+  padding: 0.875rem 2rem;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
 }
 
 .admin-nav a { color: #ffffff; }
@@ -1206,6 +1209,50 @@ hr {
 
 .admin-nav-btn:hover { background: rgba(255, 255, 255, 0.2); }
 
+/* Burger button for the admin nav — only renders below the lg breakpoint
+   (≤1023.98px). On desktop it's display:none and stays out of the way so
+   the original navbar layout is byte-identical to pre-mobile-work. */
+.admin-nav__burger {
+  display: none;
+  background: none;
+  border: 0;
+  color: #ffffff;
+  cursor: pointer;
+  padding: 0.25rem;
+  margin-left: auto;
+}
+
+.admin-nav__drawer {
+  background: #0C2866;
+  color: #ffffff;
+  padding: 0.5rem 2rem 1rem;
+}
+
+.admin-nav__drawer a,
+.admin-nav__drawer .nav-disabled {
+  display: block;
+  padding: 0.5rem 0;
+  color: #ffffff;
+}
+
+.admin-nav__drawer a:hover { text-decoration: underline; }
+
+.admin-nav__drawer > div { padding-top: 0.5rem; }
+
+@media (max-width: 1023.98px) {
+  /* Hide every admin-nav child except the brand (first) and the burger so
+     the navy bar collapses to brand + burger. The drawer below the nav
+     reveals the full link list when toggled. */
+  .admin-nav { padding: 0.875rem 1.25rem; gap: 0.75rem; }
+  .admin-nav > *:not(:first-child):not(.admin-nav__burger) { display: none; }
+  .admin-nav__burger { display: inline-flex; }
+}
+
+@media (min-width: 1024px) {
+  /* Drawer is mobile-only; never reveal it on desktop even if toggled. */
+  .admin-nav__drawer { display: none !important; }
+}
+
 
 /* ---------- Section heading helper ------------------------ */
 
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index a881293..976c8ad 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -19,54 +19,45 @@
   </head>
 
   <body class="bg-gray-50">
-    <nav class="admin-nav">
-      <div data-controller="toggle" data-toggle-toggle-class="hidden">
-        <div class="flex items-center justify-between gap-4">
-          <%= link_to "Ruby Embassy Admin", admin_root_path, class: "font-semibold" %>
+    <div data-controller="toggle" data-toggle-toggle-class="hidden">
+      <nav class="admin-nav">
+        <%= link_to "Ruby Embassy Admin", admin_root_path, class: "font-semibold" %>
+        <%= link_to "Admin Dashboard", admin_root_path %>
+        <%= link_to "Attendees", admin_users_path %>
+        <span class="nav-disabled" aria-disabled="true">
+          Volunteers
+          <span class="nav-soon">Soon</span>
+        </span>
+        <%= link_to "Schedule", admin_schedule_items_path %>
+        <%= link_to "Embassy Applications", admin_embassy_applications_path %>
+        <span class="ml-auto flex items-center gap-4">
+          <%= link_to "back to User Dashboard", dashboard_path %>
+          <%= button_to "Sign out", session_path, method: :delete, class: "admin-nav-btn" %>
+        </span>
 
-          <div class="hidden lg:block ml-auto">
-            <div class="flex items-center gap-x-6">
-              <%= link_to "Admin Dashboard", admin_root_path %>
-              <%= link_to "Attendees", admin_users_path %>
-              <span class="nav-disabled" aria-disabled="true">
-                Volunteers
-                <span class="nav-soon">Soon</span>
-              </span>
-              <%= link_to "Schedule", admin_schedule_items_path %>
-              <%= link_to "Embassy Applications", admin_embassy_applications_path %>
-              <%= link_to "User Dashboard", dashboard_path, class: "ml-2" %>
-              <%= button_to "Sign out", session_path, method: :delete, class: "admin-nav-btn" %>
-            </div>
-          </div>
+        <button data-action="click->toggle#toggle click@window->toggle#hide" class="admin-nav__burger" aria-label="Open menu">
+          <span class="sr-only">Open main menu</span>
+          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </button>
+      </nav>
 
-          <div class="flex lg:hidden">
-            <button data-action="click->toggle#toggle click@window->toggle#hide" class="inline-flex items-center justify-center p-2 text-white cursor-pointer focus:outline-hidden" aria-label="Open menu">
-              <span class="sr-only">Open main menu</span>
-              <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-              </svg>
-            </button>
-          </div>
-        </div>
-
-        <div data-toggle-target="toggleable" class="hidden lg:hidden">
-          <div class="flex flex-col py-3 gap-y-1">
-            <%= link_to "Admin Dashboard", admin_root_path, class: "block py-2" %>
-            <%= link_to "Attendees", admin_users_path, class: "block py-2" %>
-            <span class="nav-disabled block py-2" aria-disabled="true">
-              Volunteers
-              <span class="nav-soon">Soon</span>
-            </span>
-            <%= link_to "Schedule", admin_schedule_items_path, class: "block py-2" %>
-            <%= link_to "Embassy Applications", admin_embassy_applications_path, class: "block py-2" %>
-            <%= link_to "User Dashboard", dashboard_path, class: "block py-2" %>
-            <div class="py-2">
-              <%= button_to "Sign out", session_path, method: :delete, class: "admin-nav-btn" %>
-            </div>
-          </div>
+      <div data-toggle-target="toggleable" class="admin-nav__drawer hidden">
+        <%= link_to "Admin Dashboard", admin_root_path %>
+        <%= link_to "Attendees", admin_users_path %>
+        <span class="nav-disabled" aria-disabled="true">
+          Volunteers
+          <span class="nav-soon">Soon</span>
+        </span>
+        <%= link_to "Schedule", admin_schedule_items_path %>
+        <%= link_to "Embassy Applications", admin_embassy_applications_path %>
+        <%= link_to "back to User Dashboard", dashboard_path %>
+        <div>
+          <%= button_to "Sign out", session_path, method: :delete, class: "admin-nav-btn" %>
         </div>
       </div>
-    </nav>
+    </div>
 
     <main class="px-8 py-10">
       <div class="<%= content_for?(:container_width) ? yield(:container_width) : 'max-w-4xl' %> mx-auto">

From fb8d09bc35ab5d592a77abf68c364d0ce872bc39 Mon Sep 17 00:00:00 2001
From: Katya Sarmiento <5871075+Kitkatnik@users.noreply.github.com>
Date: Sun, 26 Apr 2026 22:48:27 -0400
Subject: [PATCH 12/13] Capitalize B in 'Back to User Dashboard' nav link

---
 app/views/layouts/admin.html.erb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index 976c8ad..566614f 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -31,7 +31,7 @@
         <%= link_to "Schedule", admin_schedule_items_path %>
         <%= link_to "Embassy Applications", admin_embassy_applications_path %>
         <span class="ml-auto flex items-center gap-4">
-          <%= link_to "back to User Dashboard", dashboard_path %>
+          <%= link_to "Back to User Dashboard", dashboard_path %>
           <%= button_to "Sign out", session_path, method: :delete, class: "admin-nav-btn" %>
         </span>
 
@@ -52,7 +52,7 @@
         </span>
         <%= link_to "Schedule", admin_schedule_items_path %>
         <%= link_to "Embassy Applications", admin_embassy_applications_path %>
-        <%= link_to "back to User Dashboard", dashboard_path %>
+        <%= link_to "Back to User Dashboard", dashboard_path %>
         <div>
           <%= button_to "Sign out", session_path, method: :delete, class: "admin-nav-btn" %>
         </div>

From 34e93cb67b4aa5385202a99be0f3af55343b48e1 Mon Sep 17 00:00:00 2001
From: Katya Sarmiento <5871075+Kitkatnik@users.noreply.github.com>
Date: Sun, 26 Apr 2026 22:50:47 -0400
Subject: [PATCH 13/13] Add Guide link to user navbar pointing to
 blueridgeruby.com/guide

---
 app/views/shared/_navbar.html.erb | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index ba89f85..577da8f 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -13,6 +13,7 @@
             <%= link_to "Dashboard", dashboard_path, class: "text-blue px-3 py-1 text-lg font-medium" %>
             <%= link_to "Schedule", schedule_path, class: "text-blue px-3 py-1 text-lg font-medium" %>
             <%= link_to "My Plan", plan_path, class: "text-blue px-3 py-1 text-lg font-medium" %>
+            <a href="https://blueridgeruby.com/guide" target="_blank" rel="noopener" class="text-blue px-3 py-1 text-lg font-medium">Guide</a>
             <% if admin? %>
               <%= link_to "Admin", admin_root_path, class: "text-blue px-3 py-1 text-lg font-medium" %>
             <% end %>
@@ -42,6 +43,7 @@
           <%= link_to "Dashboard", dashboard_path, class: "text-blue block py-2 font-medium" %>
           <%= link_to "Schedule", schedule_path, class: "text-blue block py-2 font-medium" %>
           <%= link_to "My Plan", plan_path, class: "text-blue block py-2 font-medium" %>
+          <a href="https://blueridgeruby.com/guide" target="_blank" rel="noopener" class="text-blue block py-2 font-medium">Guide</a>
           <% if admin? %>
             <%= link_to "Admin", admin_root_path, class: "text-blue block py-2 font-medium" %>
           <% end %>