From e67b4a12f901f76cc1214cacb8a100e2309cc14c Mon Sep 17 00:00:00 2001
From: Sam Serrano <samuel.j.serrano@gmail.com>
Date: Thu, 27 Aug 2026 10:02:56 -0700
Subject: [PATCH 1/3] Development keys

---
 .gitignore                             | 4 ++++
 config/credentials/development.yml.enc | 1 +
 2 files changed, 5 insertions(+)
 create mode 100644 config/credentials/development.yml.enc

diff --git a/.gitignore b/.gitignore
index 3b9513a..010da08 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,7 @@
 .codex-tmp
 .idea
 tmp
+
+# Ignore key files for decrypting credentials and more.
+/config/credentials/*.key
+
diff --git a/config/credentials/development.yml.enc b/config/credentials/development.yml.enc
new file mode 100644
index 0000000..8b713e0
--- /dev/null
+++ b/config/credentials/development.yml.enc
@@ -0,0 +1 @@
+HofK3YYGZp23CUeV9ZZ3zU2eRYlxyFGxxqnaU94Ckn/47SwwOMdSmkx09TW8xTP1laOHo0l7rVPQQyYHUiOncdRFTacpJXNntvaJV60ok4NTSgI5t9nrttU0PHo8j6R2QQbV+ELDNEIBKoucMuZmiCsaQTmGdePttG4X4TLM+yosn8A=--M9oSEULyeP4dmx8x--EMpX4PFTrS/i0BB+3YjTXA==
\ No newline at end of file

From 7436c82b783551b66f76cec8d30a42e2dc619bae Mon Sep 17 00:00:00 2001
From: Sam Serrano <samuel.j.serrano@gmail.com>
Date: Thu, 27 Aug 2026 12:29:30 -0700
Subject: [PATCH 2/3] Add scoped authentication form structure: Task #174

---
 app/views/devise/registrations/new.html.erb   | 54 +++++++++---------
 app/views/devise/sessions/new.html.erb        | 40 ++++++-------
 .../devise/shared/_error_messages.html.erb    |  6 +-
 spec/requests/local_authentication_spec.rb    | 57 ++++++++++++++++---
 4 files changed, 102 insertions(+), 55 deletions(-)

diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
index eb8c9aa..d9009b4 100644
--- a/app/views/devise/registrations/new.html.erb
+++ b/app/views/devise/registrations/new.html.erb
@@ -1,34 +1,36 @@
-<main class="page-shell">
-  <h1>Sign up</h1>
+<main class="page-shell auth-page">
+  <div class="auth-page__panel">
+    <h1 class="auth-page__heading">Sign up</h1>
 
-  <%= render "devise/shared/error_messages", resource: resource %>
+    <%= render "devise/shared/error_messages", resource: resource %>
 
-  <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
-    <div>
-      <%= f.label :email %><br>
-      <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-    </div>
+    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: "auth-form" }) do |f| %>
+      <div class="auth-form__field">
+        <%= f.label :email %><br>
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "auth-form__input" %>
+      </div>
 
-    <div>
-      <%= f.label :password %><br>
-      <%= f.password_field :password, autocomplete: "new-password" %>
-      <% if @minimum_password_length %>
-        <small><%= @minimum_password_length %> characters minimum</small>
-      <% end %>
-    </div>
+      <div class="auth-form__field">
+        <%= f.label :password %><br>
+        <%= f.password_field :password, autocomplete: "new-password", class: "auth-form__input" %>
+        <% if @minimum_password_length %>
+          <small class="auth-form__hint"><%= @minimum_password_length %> characters minimum</small>
+        <% end %>
+      </div>
 
-    <div>
-      <%= f.label :password_confirmation %><br>
-      <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
-    </div>
+      <div class="auth-form__field">
+        <%= f.label :password_confirmation %><br>
+        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "auth-form__input" %>
+      </div>
 
-    <div>
-      <%= f.label :preferred_name, "Preferred name" %><br>
-      <%= f.text_field :preferred_name, autocomplete: "name" %>
-    </div>
+      <div class="auth-form__field">
+        <%= f.label :preferred_name, "Preferred name" %><br>
+        <%= f.text_field :preferred_name, autocomplete: "name", class: "auth-form__input" %>
+      </div>
 
-    <%= f.submit "Sign up" %>
-  <% end %>
+      <%= f.submit "Sign up", class: "auth-form__submit" %>
+    <% end %>
 
-  <p><%= link_to "Log in", new_session_path(resource_name) %></p>
+    <p class="auth-page__alternate"><%= link_to "Log in", new_session_path(resource_name), class: "auth-page__link" %></p>
+  </div>
 </main>
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index 79f8664..2e99c70 100644
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -1,26 +1,28 @@
-<main class="page-shell">
-  <h1>Log in</h1>
+<main class="page-shell auth-page">
+  <div class="auth-page__panel">
+    <h1 class="auth-page__heading">Log in</h1>
 
-  <%= render "devise/shared/error_messages", resource: resource %>
+    <%= render "devise/shared/error_messages", resource: resource %>
 
-  <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-    <div>
-      <%= f.label :email %><br>
-      <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-    </div>
+    <%= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: "auth-form" }) do |f| %>
+      <div class="auth-form__field">
+        <%= f.label :email %><br>
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "auth-form__input" %>
+      </div>
 
-    <div>
-      <%= f.label :password %><br>
-      <%= f.password_field :password, autocomplete: "current-password" %>
-    </div>
+      <div class="auth-form__field">
+        <%= f.label :password %><br>
+        <%= f.password_field :password, autocomplete: "current-password", class: "auth-form__input" %>
+      </div>
 
-    <div>
-      <%= f.check_box :remember_me %>
-      <%= f.label :remember_me, "Remember me" %>
-    </div>
+      <div class="auth-form__remember">
+        <%= f.check_box :remember_me, class: "auth-form__checkbox" %>
+        <%= f.label :remember_me, "Remember me" %>
+      </div>
 
-    <%= f.submit "Log in" %>
-  <% end %>
+      <%= f.submit "Log in", class: "auth-form__submit" %>
+    <% end %>
 
-  <p><%= link_to "Sign up", new_registration_path(resource_name) %></p>
+    <p class="auth-page__alternate"><%= link_to "Sign up", new_registration_path(resource_name), class: "auth-page__link" %></p>
+  </div>
 </main>
diff --git a/app/views/devise/shared/_error_messages.html.erb b/app/views/devise/shared/_error_messages.html.erb
index 28807af..1ea9f39 100644
--- a/app/views/devise/shared/_error_messages.html.erb
+++ b/app/views/devise/shared/_error_messages.html.erb
@@ -1,7 +1,7 @@
 <% if resource.errors.any? %>
-  <div id="error_explanation" role="alert">
-    <h2><%= pluralize(resource.errors.count, "error") %> prevented this account from being saved:</h2>
-    <ul>
+  <div id="error_explanation" class="auth-errors" role="alert">
+    <h2 class="auth-errors__heading"><%= pluralize(resource.errors.count, "error") %> prevented this account from being saved:</h2>
+    <ul class="auth-errors__list">
       <% resource.errors.full_messages.each do |message| %>
         <li><%= message %></li>
       <% end %>
diff --git a/spec/requests/local_authentication_spec.rb b/spec/requests/local_authentication_spec.rb
index d2e7c7a..43262df 100644
--- a/spec/requests/local_authentication_spec.rb
+++ b/spec/requests/local_authentication_spec.rb
@@ -5,18 +5,55 @@
 
   let(:password) { "password123" }
 
-  it "shows standard sign-in and sign-up pages" do
+  it "renders the sign-in form with scoped structure and preserved semantics" do
     get "/users/sign_in"
 
     expect(response).to have_http_status(:ok)
-    expect(response.body).to include("Log in")
-    expect(response.body).to include("Remember me")
+    page = Nokogiri::HTML(response.body)
+    panel = page.at_css("main.page-shell.auth-page > div.auth-page__panel")
+
+    expect(panel).to be_present
+
+    form = panel.at_css('form.auth-form[action="/users/sign_in"][method="post"]')
 
+    expect(form).to be_present
+
+    expect(panel.at_css("h1.auth-page__heading")&.text).to eq("Log in")
+    expect(form.at_css('div.auth-form__field label[for="user_email"]')&.text).to eq("Email")
+    expect(form.at_css('input.auth-form__input[name="user[email]"][type="email"][autofocus][autocomplete="email"]')).to be_present
+    expect(form.at_css('div.auth-form__field label[for="user_password"]')&.text).to eq("Password")
+    expect(form.at_css('input.auth-form__input[name="user[password]"][type="password"][autocomplete="current-password"]')).to be_present
+    expect(form.at_css('div.auth-form__remember input.auth-form__checkbox[name="user[remember_me]"][type="checkbox"]')).to be_present
+    expect(form.at_css('div.auth-form__remember label[for="user_remember_me"]')&.text).to eq("Remember me")
+    expect(form.at_css('input.auth-form__submit[type="submit"][value="Log in"]')).to be_present
+    expect(panel.at_css('p.auth-page__alternate a.auth-page__link[href="/users/sign_up"]')&.text).to eq("Sign up")
+  end
+
+  it "renders the sign-up form with scoped structure and preserved semantics" do
     get "/users/sign_up"
 
     expect(response).to have_http_status(:ok)
-    expect(response.body).to include("Sign up")
-    expect(response.body).to include("Preferred name")
+    page = Nokogiri::HTML(response.body)
+    panel = page.at_css("main.page-shell.auth-page > div.auth-page__panel")
+
+    expect(panel).to be_present
+
+    form = panel.at_css('form.auth-form[action="/users"][method="post"]')
+
+    expect(form).to be_present
+
+    expect(panel.at_css("h1.auth-page__heading")&.text).to eq("Sign up")
+    expect(form.at_css('div.auth-form__field label[for="user_email"]')&.text).to eq("Email")
+    expect(form.at_css('input.auth-form__input[name="user[email]"][type="email"][autofocus][autocomplete="email"]')).to be_present
+    expect(form.at_css('div.auth-form__field label[for="user_password"]')&.text).to eq("Password")
+    expect(form.at_css('input.auth-form__input[name="user[password]"][type="password"][autocomplete="new-password"]')).to be_present
+    expect(form.at_css("small.auth-form__hint")&.text).to include("characters minimum")
+    expect(form.at_css('div.auth-form__field label[for="user_password_confirmation"]')&.text).to eq("Password confirmation")
+    expect(form.at_css('input.auth-form__input[name="user[password_confirmation]"][type="password"][autocomplete="new-password"]')).to be_present
+    expect(form.at_css('div.auth-form__field label[for="user_preferred_name"]')&.text).to eq("Preferred name")
+    expect(form.at_css('input.auth-form__input[name="user[preferred_name]"][type="text"][autocomplete="name"]')).to be_present
+    expect(form.at_css('input.auth-form__submit[type="submit"][value="Sign up"]')).to be_present
+    expect(panel.at_css('p.auth-page__alternate a.auth-page__link[href="/users/sign_in"]')&.text).to eq("Log in")
   end
 
   it "creates one user and profile with a normalized email and secure password" do
@@ -58,8 +95,14 @@
     expect(Profile.count).to eq(0)
     expect(response).to have_http_status(:unprocessable_entity)
     page = Nokogiri::HTML(response.body)
-    expect(page.text).to include("Password confirmation doesn't match Password")
-    expect(page.text).to include("Preferred name can't be blank")
+    errors = page.at_css('div#error_explanation.auth-errors[role="alert"]')
+
+    expect(errors).to be_present
+
+    expect(errors.at_css("h2.auth-errors__heading")&.text).to include("prevented this account from being saved")
+    messages = errors.css("ul.auth-errors__list > li").map { |item| item.text.strip }
+    expect(messages).to include("Password confirmation doesn't match Password")
+    expect(messages).to include("Preferred name can't be blank")
   end
 
   it "rejects malformed email and short passwords without persisting anything" do

From f4be818c06b62c842fa8bd56f6a7b7ef69552593 Mon Sep 17 00:00:00 2001
From: Sam Serrano <samuel.j.serrano@gmail.com>
Date: Thu, 27 Aug 2026 12:41:46 -0700
Subject: [PATCH 3/3] Style responsive authentication experience: Task #175

---
 app/assets/stylesheets/application.css | 177 +++++++++++++++++++++
 spec/system/authentication_spec.rb     | 206 +++++++++++++++++++++++++
 2 files changed, 383 insertions(+)
 create mode 100644 spec/system/authentication_spec.rb

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 520c942..29d5c1d 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -641,6 +641,183 @@ body {
   outline-offset: 2px;
 }
 
+.auth-page {
+  align-items: start;
+  display: grid;
+  justify-items: center;
+  min-height: calc(100vh - 4.75rem);
+  padding: clamp(2rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem);
+}
+
+.auth-page__panel {
+  background:
+    linear-gradient(145deg, rgba(245, 241, 232, 0.075), rgba(245, 241, 232, 0.025));
+  border: 1px solid rgba(229, 184, 91, 0.32);
+  border-radius: 0.75rem;
+  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.32);
+  max-width: 34rem;
+  overflow-wrap: anywhere;
+  padding: clamp(1.5rem, 5vw, 3rem);
+  width: 100%;
+}
+
+.auth-page__heading {
+  color: #f5f1e8;
+  font-size: clamp(2.5rem, 8vw, 4.5rem);
+  letter-spacing: -0.035em;
+  line-height: 1;
+  margin: 0 0 2rem;
+}
+
+.auth-form {
+  display: grid;
+  gap: 1.25rem;
+}
+
+.auth-form__field {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.auth-form__field br {
+  display: none;
+}
+
+.auth-form__field label,
+.auth-form__remember label {
+  color: #e5b85b;
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
+.auth-form__field label {
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.auth-form__input {
+  appearance: none;
+  background: #f5f1e8;
+  border: 1px solid rgba(25, 23, 20, 0.28);
+  border-radius: 0.375rem;
+  color: #191714;
+  font: inherit;
+  min-height: 3rem;
+  padding: 0.75rem;
+  width: 100%;
+}
+
+.auth-form__input::placeholder {
+  color: rgba(25, 23, 20, 0.62);
+  opacity: 1;
+}
+
+.auth-form__input:-webkit-autofill,
+.auth-form__input:-webkit-autofill:hover,
+.auth-form__input:-webkit-autofill:focus {
+  -webkit-text-fill-color: #191714;
+  box-shadow: 0 0 0 1000px #f5f1e8 inset;
+  caret-color: #191714;
+}
+
+.auth-form__hint {
+  color: rgba(245, 241, 232, 0.72);
+  line-height: 1.4;
+}
+
+.auth-form__remember {
+  align-items: center;
+  display: flex;
+  gap: 0.65rem;
+}
+
+.auth-form__checkbox {
+  accent-color: #e5b85b;
+  cursor: pointer;
+  height: 1.2rem;
+  margin: 0;
+  width: 1.2rem;
+}
+
+.auth-form__submit {
+  appearance: none;
+  background: #e5b85b;
+  border: 1px solid rgba(229, 184, 91, 0.74);
+  border-radius: 0.375rem;
+  color: #191714;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 800;
+  min-height: 3rem;
+  padding: 0.75rem 1rem;
+  width: 100%;
+}
+
+.auth-form__submit:hover {
+  background: #f5d284;
+}
+
+.auth-page__alternate {
+  color: rgba(245, 241, 232, 0.78);
+  margin: 1.5rem 0 0;
+  text-align: center;
+}
+
+.auth-page__link {
+  color: #e5b85b;
+  font-weight: 700;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+}
+
+.auth-page__link:hover {
+  color: #f5d284;
+}
+
+.auth-form__input:focus-visible,
+.auth-form__checkbox:focus-visible,
+.auth-form__submit:focus-visible,
+.auth-page__link:focus-visible {
+  outline: 3px solid #f5d284;
+  outline-offset: 3px;
+}
+
+.auth-errors {
+  background: rgba(240, 138, 115, 0.08);
+  border-left: 0.25rem solid #f08a73;
+  color: #f5f1e8;
+  margin: 0 0 1.5rem;
+  overflow-wrap: anywhere;
+  padding: 0.9rem 1rem;
+}
+
+.auth-errors__heading {
+  font-size: 1rem;
+  line-height: 1.4;
+  margin: 0 0 0.5rem;
+}
+
+.auth-errors__list {
+  line-height: 1.5;
+  margin: 0;
+  padding-left: 1.2rem;
+}
+
+@media (max-width: 40rem) {
+  .auth-page {
+    min-height: auto;
+    padding: 1.25rem 1rem 6rem;
+  }
+
+  .auth-page__panel {
+    padding: 1.5rem;
+  }
+
+  .auth-page__heading {
+    margin-bottom: 1.5rem;
+  }
+}
+
 .status-page {
   display: grid;
   min-height: calc(100vh - 4.75rem);
diff --git a/spec/system/authentication_spec.rb b/spec/system/authentication_spec.rb
new file mode 100644
index 0000000..7c3a740
--- /dev/null
+++ b/spec/system/authentication_spec.rb
@@ -0,0 +1,206 @@
+require "rails_helper"
+require_relative "../support/browser_system_testing"
+
+RSpec.describe "Authentication", type: :system, system: true do
+  before do
+    driven_by :selenium, using: :chrome, screen_size: BrowserSystemTesting::SCREEN_SIZE,
+      options: { name: :authentication_headless_chrome } do |options|
+      BrowserSystemTesting.configure_chrome_options(options)
+    end
+  end
+
+  before(:context) do
+    BrowserSystemTesting.verify_browser!
+  end
+
+  it "renders constrained dark-and-gold login and sign-up forms at the desktop viewport" do
+    visit new_user_session_path
+
+    expect(page.driver.browser.manage.window.size.to_a).to eq(BrowserSystemTesting::SCREEN_SIZE)
+    expect_authentication_panel("Log in")
+    expect_authentication_palette
+
+    find("a.auth-page__link", text: "Sign up", exact_text: true).click
+
+    expect_authentication_panel("Sign up")
+    expect_authentication_palette
+  end
+
+  it "keeps registration and validation feedback contained at the narrow viewport" do
+    page.driver.browser.manage.window.resize_to(640, 720)
+    visit new_user_registration_path
+
+    expect(page.evaluate_script("document.documentElement.scrollWidth")).to be <= 640
+    expect_element_horizontally_within_viewport(find(".auth-page__panel"))
+
+    fill_in "Email", with: "pilot@example.com"
+    fill_in "Password", with: "password123"
+    fill_in "Password confirmation", with: "different"
+    click_button "Sign up"
+
+    errors = find("#error_explanation.auth-errors[role='alert']")
+    panel = find(".auth-page__panel")
+    error_rect = element_rect(errors)
+    panel_rect = element_rect(panel)
+
+    expect(page.evaluate_script("document.documentElement.scrollWidth")).to be <= 640
+    expect_element_horizontally_within_viewport(panel)
+    expect(error_rect.fetch("left")).to be >= panel_rect.fetch("left")
+    expect(error_rect.fetch("right")).to be <= panel_rect.fetch("right")
+    expect(page).to have_css(".auth-errors__list", text: "Password confirmation doesn't match Password")
+
+    error_style = computed_style(errors)
+    expect(error_style.fetch("borderLeftWidth").to_f).to be >= 3
+    expect_element_vertically_reachable(find("a.auth-page__link", text: "Log in", exact_text: true))
+  end
+
+  it "provides visible keyboard focus for every login control type" do
+    visit new_user_session_path
+
+    email = find_field("Email")
+    password = find_field("Password")
+    remember_me = find_field("Remember me")
+    submit = find_button("Log in")
+    sign_up = find("a.auth-page__link", text: "Sign up", exact_text: true)
+
+    expect_visible_authentication_focus(email)
+    email.send_keys(:tab)
+    expect_visible_authentication_focus(password)
+    password.send_keys(:tab)
+    expect_visible_authentication_focus(remember_me)
+    remember_me.send_keys(:tab)
+    expect_visible_authentication_focus(submit)
+    submit.send_keys(:tab)
+    expect_visible_authentication_focus(sign_up)
+  end
+
+  it "retains native remember-me interaction" do
+    user = FactoryBot.create(:user, email: "pilot@example.com", password: "password123", password_confirmation: "password123")
+
+    visit new_user_session_path
+    fill_in "Email", with: user.email
+    fill_in "Password", with: "password123"
+    check "Remember me"
+
+    expect(find_field("Remember me")).to be_checked
+
+    click_button "Log in"
+
+    expect(page).to have_current_path(root_path)
+
+    find("summary.account-menu__button[aria-label='Account menu']").click
+    within(".account-menu") { click_button "Logout" }
+
+    expect(page).to have_current_path(root_path)
+    expect(page).to have_link("Log in", href: new_user_session_path)
+  end
+
+  it "exposes failed-login feedback at the narrow viewport" do
+    user = FactoryBot.create(:user, email: "pilot@example.com", password: "password123", password_confirmation: "password123")
+
+    page.driver.browser.manage.window.resize_to(640, 720)
+    visit new_user_session_path
+    fill_in "Email", with: user.email
+    fill_in "Password", with: "incorrect-password"
+    click_button "Log in"
+
+    alert = find(".site-notice.site-notice--alert[role='alert'][aria-live='assertive']")
+    expect(alert).to be_visible
+    expect_element_within_viewport(alert)
+    expect(computed_style(alert).fetch("borderLeftWidth").to_f).to be >= 3
+  end
+
+  it "defines deterministic hover, placeholder, autofill, checkbox, and focus contracts" do
+    stylesheet = Rails.root.join("app/assets/stylesheets/application.css").read
+
+    expect(stylesheet).to match(/\.auth-form__input::placeholder\s*\{[^}]*color:/m)
+    expect(stylesheet).to match(/\.auth-form__input:-webkit-autofill:focus\s*\{[^}]*-webkit-text-fill-color:[^}]*box-shadow:/m)
+    expect(stylesheet).to match(/\.auth-form__submit:hover\s*\{[^}]*background:/m)
+    expect(stylesheet).to match(/\.auth-page__link:hover\s*\{[^}]*color:/m)
+    expect(stylesheet).to match(/\.auth-form__checkbox\s*\{[^}]*accent-color:/m)
+    expect(stylesheet).to match(/\.auth-page__link:focus-visible\s*\{[^}]*outline:[^}]*outline-offset:/m)
+  end
+
+  private
+
+  def expect_authentication_panel(heading)
+    expect(page).to have_css(".auth-page__heading", text: heading, exact_text: true)
+
+    panel = find(".auth-page__panel")
+    rect = element_rect(panel)
+    viewport_width = page.evaluate_script("document.documentElement.clientWidth")
+
+    expect(rect.fetch("width")).to be <= 640
+    expect(rect.fetch("left") + (rect.fetch("width") / 2.0)).to be_within(2).of(viewport_width / 2.0)
+    expect(rect.fetch("left")).to be >= 0
+    expect(rect.fetch("right")).to be <= viewport_width
+  end
+
+  def expect_authentication_palette
+    label_style = computed_style(find(".auth-form__field label", match: :first))
+    input_style = computed_style(find(".auth-form__input", match: :first))
+    submit_style = computed_style(find(".auth-form__submit"))
+
+    expect(label_style.fetch("color")).to eq("rgb(229, 184, 91)")
+    expect(input_style.fetch("backgroundColor")).to eq("rgb(245, 241, 232)")
+    expect(input_style.fetch("color")).to eq("rgb(25, 23, 20)")
+    expect(submit_style.fetch("backgroundColor")).to eq("rgb(229, 184, 91)")
+    expect(submit_style.fetch("color")).to eq("rgb(25, 23, 20)")
+  end
+
+  def expect_visible_authentication_focus(element)
+    expect(element).to match_css(":focus")
+
+    style = computed_style(element)
+    expect(style.fetch("outlineStyle")).to eq("solid")
+    expect(style.fetch("outlineWidth")).to eq("3px")
+    expect(style.fetch("outlineColor")).to eq("rgb(245, 210, 132)")
+  end
+
+  def expect_element_horizontally_within_viewport(element)
+    rect = element_rect(element)
+    viewport_width = page.evaluate_script("document.documentElement.clientWidth")
+
+    expect(rect.fetch("left")).to be >= 0
+    expect(rect.fetch("right")).to be <= viewport_width
+  end
+
+  def expect_element_vertically_reachable(element)
+    page.execute_script("arguments[0].scrollIntoView({ block: 'center' })", element)
+    rect = element_rect(element)
+    viewport_height = page.evaluate_script("document.documentElement.clientHeight")
+
+    expect(rect.fetch("top")).to be >= 0
+    expect(rect.fetch("bottom")).to be <= viewport_height
+  end
+
+  def expect_element_within_viewport(element)
+    expect_element_horizontally_within_viewport(element)
+
+    rect = element_rect(element)
+    viewport_height = page.evaluate_script("document.documentElement.clientHeight")
+    expect(rect.fetch("top")).to be >= 0
+    expect(rect.fetch("bottom")).to be <= viewport_height
+  end
+
+  def element_rect(element)
+    page.evaluate_script("arguments[0].getBoundingClientRect().toJSON()", element)
+  end
+
+  def computed_style(element)
+    page.evaluate_script(<<~JAVASCRIPT, element)
+      (() => {
+        const style = getComputedStyle(arguments[0])
+        return {
+          backgroundColor: style.backgroundColor,
+          borderLeftWidth: style.borderLeftWidth,
+          boxShadow: style.boxShadow,
+          color: style.color,
+          outlineColor: style.outlineColor,
+          outlineStyle: style.outlineStyle,
+          outlineWidth: style.outlineWidth
+        }
+      })()
+    JAVASCRIPT
+  end
+end