bible270 1.11.0 → 1.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 31871047e1cb4638eee7d513efd350d9acbca88a02e58370c91f8506811ca5ca
-  data.tar.gz: a5fffa5b4ec2aa31addf33ff2dddd5f09ca34f2986bd8aec470cd045a87c04be
+  metadata.gz: a699484a74364bfd2ca703e50a1ab634d9449691f9242acee726d2fbc5a27afc
+  data.tar.gz: 17711f1bf0c60d00bb7b1cb0545e218a808e93226da8627c10c16f20c3f4473a
 SHA512:
-  metadata.gz: 8fe16a2b159bbe1390b23ee0634e12c6bfe00e6c9e3aef711c9e8be35ac4b244b8908f4b7e11e35300d18e4211c2d02df2edb44f4d8c62834ff78bd3ee8692c1
-  data.tar.gz: c7963aa88e83095ee877211b5e192ac58da38abc880dd67323d0008b3044549cdd3a5e6ec76616046f66298030774c5dc454b864e4c6902f51f6b28cc8dd96d5
+  metadata.gz: 66ed48de38122303a4fe50cfbdbf6251334ee9c67bb82be501a95c3c5d14fdcaa63f5356d4db1d7cf518307870fdc0e08b9045ea23e956a55f20ce7d46e771e9
+  data.tar.gz: 6230d31ac89feb6a6d830c9ca2009edcb266ca9886be87a57bc6b1fed378f0580d0e76ae5ec4c51353b3751b1a52c214eca5dbf016eddbeecaa740abed162626

data/CHANGELOG.md

@@ -4,7 +4,66 @@ All notable changes to bible270. Format follows [Keep a Changelog](https://keepa
 
 ## [Unreleased]
 
-**[Full Changelog](https://github.com/avonderluft/bible270/compare/v1.10.2...main)**
+### Fixed
+
+- load avatars eagerly without forced asynchronous decoding, while retaining attachment preloading and bounded database queries
+- recover failed avatar requests with up to two automatic retries, refreshing same-origin uploaded-image redirects without modifying signed provider URLs
+- show accessible initials instead of broken images when avatars fail, including cached failures and images inserted during navigation or conversations
+
+### Added
+
+- automatically create 256×256, center-cropped static WebP avatars on Profile and Admin uploads, with orientation correction, color conversion, transparency preservation, and metadata stripping; animated images use their first frame
+- preserve the current original upload separately and display the optimized thumbnail only after successful processing and storage, without request-time image processing
+- validate actual image data and enforce a 40-megapixel limit in addition to the existing configurable upload byte limit (2 MiB by default)
+- add `bible270:avatars:optimize` to backfill existing uploaded avatars, with `DRY_RUN=1`, `FORCE=1`, bounded batches, rerun-safe version tracking, and protection against concurrent picture changes
+
+Avatar processing requires libvips with PNG, JPEG, GIF and WebP support on upload/backfill hosts; the gem now depends on `image_processing` and `ruby-vips`. No additional database migration is required for hosts already using Active Storage. Existing avatars continue displaying their originals until optimized; remote provider images are unchanged.
+
+**[Full Changelog](https://github.com/avonderluft/bible270/compare/v1.11.1...main)**
+
+## [1.11.1] - 2026-10-22
+
+### Changed
+
+- simplify artwork on phone-sized screens: hide decorative scripture and word reflections, lower landscape scenes, and reduce fine detail while preserving desktop artwork
+- further mute Ocean's mobile colors and wave lines while keeping the shoreline and gulls
+- use a soft moonlight reflection on phones and retain opaque foreground trees in the simplified Forest scene
+- draw Forest trees as direct SVG paths with explicit green fills instead of reused SVG instances
+- increase the space between the app title and compact theme selector
+
+### Fixed
+
+- declare the selected color scheme early in the page and synchronize root settings and metadata on theme changes and Turbo navigation
+- request `color-scheme: only light` for Papyrus, Meadow, and Ocean while preserving System's device-following behavior
+
+Browser website-darkening features can still override theme colors. In iOS Brave, disabling Night Mode resolved the reported darkened light themes and white Forest trees.
+
+**[Full Changelog](https://github.com/avonderluft/bible270/compare/v1.11.0...v1.11.1)**
+
+## [1.11.0] - 2026-10-22
+
+### Added
+
+- add Meadow and Ocean light themes alongside Papyrus, Cedar, Forest, and Moonlight
+- add muted artwork for each theme: textured papyrus with ragged edges and curled corners, a sunrise meadow, an afternoon coast with gulls, cedar grain, layered forest silhouettes, and a moonlit lake
+- add shared Hebrew and Greek scripture backgrounds, with rippled reflections in Moonlight
+- add a compact theme selector beside the app title on every signed-in page
+
+### Changed
+
+- save and apply theme selections immediately from the header, Profile, and Admin without submitting unrelated edits
+- synchronize controls for the same reader while keeping an admin's own theme independent of another reader's setting
+- use short theme names, list light themes first, and retain Light/Dark descriptions in Profile and Admin
+- keep the header icon, title, spacing, and theme selector consistently compact across desktop and mobile, without wrapping the navigation
+- let System follow the device appearance using Papyrus for light and Cedar for dark, including their artwork
+
+### Fixed
+
+- restore the previous theme selection and show an error when saving fails; prevent overlapping saves for the same reader
+
+Existing saved theme preferences are preserved; no additional migration is required for installations with display preferences already enabled.
+
+**[Full Changelog](https://github.com/avonderluft/bible270/compare/v1.10.2...v1.11.0)**
 
 ## [1.10.2] - 2026-10-18
 
@@ -872,7 +931,9 @@ This is the initial public release.
 
 * Email sign-in requires working Action Mailer delivery in the host application. Set `config.mailer_from`; delivery is inline by default, or set `email_sign_in_deliver_later` when a queue backend is available.
 
-[Unreleased]: https://github.com/avonderluft/bible270/compare/v1.10.2...HEAD
+[Unreleased]: https://github.com/avonderluft/bible270/compare/v1.11.1...HEAD
+[1.11.1]: https://github.com/avonderluft/bible270/releases/tag/v1.11.1
+[1.11.0]: https://github.com/avonderluft/bible270/releases/tag/v1.11.0
 [1.10.2]: https://github.com/avonderluft/bible270/releases/tag/v1.10.2
 [1.10.1]: https://github.com/avonderluft/bible270/releases/tag/v1.10.1
 [1.10.0]: https://github.com/avonderluft/bible270/releases/tag/v1.10.0

data/README.md

@@ -21,14 +21,40 @@ The schedule is pure deterministic Ruby (`Bible270::Plan`) — none of it is sto
 
 ## Requirements
 
-- **Ruby** >= 3.2. Plain Ruby, no C extensions. Runs on 4.0.6 — it avoids everything 4.0 dropped or unbundled (notably `cgi`; URL escaping uses `URI.encode_www_form_component`).
+- **Ruby** >= 3.2. Engine code is plain Ruby; avatar processing uses native libvips through `ruby-vips`. Runs on 4.0.6 — it avoids everything 4.0 dropped or unbundled (notably `cgi`; URL escaping uses `URI.encode_www_form_component`).
 - **Rails** >= 7.2. On Ruby 4.0 your host app is the real constraint, not this engine — check your lockfile with RailsBump first.
 - A host app, and Turbo if you want check-offs without a page reload.
+- For picture uploads and avatar backfills: **libvips** with PNG, JPEG, GIF and WebP support. The gem supplies the `image_processing` and `ruby-vips` Ruby dependencies. Install libvips on every upload/backfill host (for example, `sudo apt-get install libvips-tools` on Ubuntu or `sudo pacman -S libvips` on Arch). Native processing is loaded only when optimizing an image; existing pages and provider avatars do not require it.
 
 Mutation controls expose pending, success, and retry feedback when JavaScript runs, while ordinary HTML
 forms remain the fallback. Repeated checkoff and like requests converge on the intended state rather
 than accidentally reversing it.
 
+## Avatar optimization
+
+Profile and Admin picture uploads produce a **256×256 static WebP thumbnail at quality 85** before switching the displayed avatar. Images are auto-oriented, center-cropped, converted to sRGB, and stripped of metadata; transparency is preserved. Animated GIF/WebP uploads use the first frame. Small images are upscaled to the same dimensions. Invalid or corrupt image data is rejected, even if its filename or declared type looks valid.
+
+Uploads are limited to **2 MiB by default** (`config.avatar_max_bytes`) and **40 million pixels** in the selected frame/container canvas. The pixel limit bounds dimensions, not total processor memory. A processing or storage failure leaves the previous picture and profile details unchanged.
+
+The current original remains in the `avatar` attachment, including its original metadata; the display image is stored separately as `avatar_thumbnail`. This preserves the source for future reprocessing, not a history of past pictures. Removing/replacing a picture detaches the old pair; Active Storage's purge jobs clean up their files. Keep the host's Active Job worker running for that cleanup. Original retention increases storage use even though avatar downloads become smaller. No new database migration is needed if Active Storage is already installed.
+
+Existing uploaded avatars continue displaying their originals until optimized. Run the following **from the host Rails application**, with its normal database/storage credentials and production environment when appropriate:
+
+```sh
+# Metadata-only preview: no image downloads or attachment changes
+RAILS_ENV=production bundle exec rake bible270:avatars:optimize DRY_RUN=1
+
+# Process existing uploaded reader avatars, sequentially in bounded batches
+RAILS_ENV=production bundle exec rake bible270:avatars:optimize BATCH_SIZE=100
+
+# Rebuild even current thumbnails from the retained originals
+RAILS_ENV=production bundle exec rake bible270:avatars:optimize FORCE=1
+```
+
+The task skips current thumbnails, protects concurrent avatar changes, continues after per-image failures, and exits nonzero if any fail. It prints reader IDs, counts, and original/optimized display-byte totals (not total storage savings). Correct failed files, limits, storage access, or processor dependencies and rerun. `BATCH_SIZE` defaults to 100 and must be between 1 and 1000. Dry-run checks eligibility only; it does not verify file availability or decodability. Take a normal database/storage backup before a production backfill. The task reads originals and writes thumbnails to the configured storage service; remote storage can incur request and transfer costs. It does **not** download remote sign-in-provider avatars or modify unrelated host attachments.
+
+For host code that uploads reader pictures, use `reader.attach_avatar(upload)` or `Bible270::AvatarImages.update!(reader, attributes, upload: upload)` rather than attaching directly with Active Storage, which bypasses this processing pipeline. Uploads and backfills must run **outside a caller-owned database transaction**: the service owns the commit boundary so a later outer rollback cannot orphan already-uploaded files. Failed cleanup retains unattached blob records with their storage keys for retry; check logged blob IDs and include these in the host's unattached-blob maintenance.
+
 ## Install
 
 ```ruby

data/app/controllers/bible270/admin_controller.rb

@@ -229,23 +229,20 @@ module Bible270
     # Name and picture together, mirroring what a reader can change about
     # themselves on their own profile.
     def update_profile
-      problems = []
-      @reader.transaction do
-        if (params[:first_name].present? || params[:last_name].present?) && !@reader.update_names(params[:first_name],
-                                                                                                  params[:last_name])
-          problems << 'both a first and last name'
+      attributes = {}
+      if params[:first_name].present? || params[:last_name].present?
+        attributes = Names.normalize(params[:first_name], params[:last_name])
+        unless attributes
+          return redirect_to admin_reader_path(@reader), alert: 'Needs both a first and last name.'
         end
-        if problems.empty? && params[:avatar].present? && !@reader.attach_avatar(params[:avatar])
-          problems << (@reader.errors[:avatar].first || 'a valid image')
-        end
-        raise ActiveRecord::Rollback if problems.any?
       end
 
-      if problems.empty?
-        redirect_to admin_reader_path(@reader), notice: 'Updated.'
-      else
-        redirect_to admin_reader_path(@reader), alert: "Needs #{problems.to_sentence}."
-      end
+      AvatarImages.update!(@reader, attributes, upload: params[:avatar].presence)
+      redirect_to admin_reader_path(@reader), notice: 'Updated.'
+    rescue AvatarOptimizer::Error, AvatarImages::Error => e
+      redirect_to admin_reader_path(@reader), alert: e.message
+    rescue ActiveRecord::RecordInvalid, ActiveRecord::RecordNotSaved
+      redirect_to admin_reader_path(@reader), alert: 'The profile could not be saved. Please try again.'
     end
 
     def update_theme

data/app/controllers/bible270/profiles_controller.rb

@@ -35,6 +35,10 @@ module Bible270
 
       save_profile(names.merge(passage_source: source))
       redirect_to profile_path, notice: 'Your profile has been updated.'
+    rescue AvatarOptimizer::Error, AvatarImages::Error => e
+      current_reader.attachment_changes.clear if Reader.avatar_uploads?
+      current_reader.reload
+      render_profile_error(e.message)
     rescue ActiveRecord::RecordInvalid, ActiveRecord::RecordNotSaved => e
       message = e.record ? e.record.errors.full_messages.to_sentence : nil
       # Reload does not discard Active Storage's deferred attachment changes.
@@ -103,13 +107,7 @@ module Bible270
         attributes[:daily_reminder_time] = @daily_reminder_time
       end
 
-      Reader.transaction do
-        current_reader.assign_attributes(attributes)
-        # Unlike attach, assignment never saves early. Active Storage persists the
-        # attachment with the reader and uploads only after a successful commit.
-        current_reader.avatar = params[:avatar] if params[:avatar].present?
-        current_reader.save!
-      end
+      AvatarImages.update!(current_reader, attributes, upload: params[:avatar].presence)
     end
 
     def render_profile_error(message)

data/app/helpers/bible270/plan_helper.rb

@@ -154,19 +154,25 @@ module Bible270
     end
 
     def b270_avatar_src(reader)
-      return main_app.rails_blob_path(reader.avatar, only_path: true) if reader.avatar_uploaded?
+      return main_app.rails_blob_path(reader.display_avatar, only_path: true) if reader.avatar_uploaded?
 
       reader.avatar_url.presence
     end
 
-    def b270_avatar(reader, size: 72, loading: 'lazy')
+    def b270_avatar(reader, size: 72, loading: 'eager')
       src = b270_avatar_src(reader)
-      if src
-        image_tag src, class: 'b270-avatar', width: size, height: size, alt: reader.display_name,
-                       loading: loading, decoding: 'async'
-      else
-        content_tag :span, reader.initials, class: 'b270-avatar b270-avatar-fallback',
-                                            style: "width:#{size}px;height:#{size}px;line-height:#{size}px"
+      dimensions = "width:#{size}px;height:#{size}px;line-height:#{size}px"
+      unless src
+        return content_tag :span, reader.initials, class: 'b270-avatar b270-avatar-fallback',
+                                                   style: dimensions, role: 'img', 'aria-label': reader.display_name
+      end
+
+      content_tag :span, class: 'b270-avatar-frame', style: dimensions,
+                         role: 'img', 'aria-label': reader.display_name do
+        image = image_tag src, class: 'b270-avatar', width: size, height: size, alt: reader.display_name,
+                               loading: loading, data: { b270_avatar: true, b270_avatar_uploaded: reader.avatar_uploaded? }
+        fallback = content_tag :span, reader.initials, class: 'b270-avatar b270-avatar-fallback', 'aria-hidden': true
+        safe_join([image, fallback])
       end
     end
 

data/app/models/bible270/comment.rb

@@ -53,10 +53,10 @@ module Bible270
     # listing them again at the top level would show each twice.
     scope :for_day,  ->(d) { approved.where(day: d, parent_id: nil).order(created_at: :asc) }
     scope :with_reader_avatars, -> {
-      Reader.avatar_uploads? ? includes(reader: { avatar_attachment: :blob }) : includes(:reader)
+      Reader.avatar_uploads? ? includes(reader: Reader::AVATAR_ASSOCIATIONS) : includes(:reader)
     }
     scope :with_thread_details, -> {
-      reply_reader = Reader.avatar_uploads? ? { reader: { avatar_attachment: :blob } } : :reader
+      reply_reader = Reader.avatar_uploads? ? { reader: Reader::AVATAR_ASSOCIATIONS } : :reader
       with_reader_avatars.includes({ likes: :reader }, { replies: [reply_reader, { likes: :reader }] })
     }
     scope :threads_for_day, ->(d) { for_day(d).with_thread_details }

data/app/models/bible270/reader.rb

@@ -15,11 +15,16 @@ module Bible270
     # to keep working there — readers simply can't upload, and any avatar from
     # their sign-in provider is used instead.
     AVATAR_UPLOADS = respond_to?(:has_one_attached)
-    has_one_attached :avatar if AVATAR_UPLOADS
+    if AVATAR_UPLOADS
+      has_one_attached :avatar
+      has_one_attached :avatar_thumbnail
+    end
+
+    AVATAR_ASSOCIATIONS = { avatar_attachment: :blob, avatar_thumbnail_attachment: :blob }.freeze
 
     def self.avatar_uploads? = AVATAR_UPLOADS
 
-    scope :with_avatar, -> { avatar_uploads? ? includes(avatar_attachment: :blob) : all }
+    scope :with_avatar, -> { avatar_uploads? ? includes(AVATAR_ASSOCIATIONS) : all }
 
     # Fires for every way a reader comes into existence — email sign-in, OmniAuth,
     # or a bridged host user — rather than in each controller, so no path can
@@ -426,22 +431,29 @@ module Bible270
       self.class.avatar_uploads? && avatar.attached?
     end
 
+    def avatar_optimized?
+      avatar_uploaded? && avatar_thumbnail.attached? &&
+        avatar_thumbnail.blob.metadata['bible270_avatar_source_id'] == avatar.blob.id &&
+        avatar_thumbnail.blob.metadata['bible270_avatar_version'] == AvatarOptimizer::VERSION
+    end
+
+    def display_avatar
+      avatar_optimized? ? avatar_thumbnail : avatar
+    end
+
     # Returns false and sets an error when the upload isn't acceptable.
     def attach_avatar(upload)
       return false unless self.class.avatar_uploads?
 
-      problem = Avatars.problem_with(content_type: upload.content_type, byte_size: upload.size)
-      if problem
-        errors.add(:avatar, problem)
-        return false
-      end
-
-      avatar.attach(upload)
+      AvatarImages.update!(self, {}, upload: upload)
       true
+    rescue AvatarOptimizer::Error, AvatarImages::Error => e
+      errors.add(:avatar, e.message)
+      false
     end
 
     def remove_avatar!
-      avatar.purge if avatar_uploaded?
+      AvatarImages.remove!(self)
       true
     end
 

data/app/views/bible270/admin/show.html.erb

@@ -23,7 +23,8 @@
             <span>Picture</span>
             <%= file_field_tag :avatar, accept: Bible270::Avatars.content_types.join(',') %>
             <span class="b270-hint" style="margin:0">
-              PNG, JPEG, GIF or WebP, up to <%= Bible270::Avatars.human_size(Bible270::Avatars.max_bytes) %>.
+              PNG, JPEG, GIF or WebP, up to <%= Bible270::Avatars.human_size(Bible270::Avatars.max_bytes) %> and <%= Bible270::AvatarOptimizer::MAX_PIXELS / 1_000_000 %> megapixels.
+              Automatically center-cropped to a square. Animated pictures use the first frame.
             </span>
           </label>
           <% if @reader.avatar_uploaded? %>

data/app/views/bible270/profiles/edit.html.erb

@@ -15,7 +15,8 @@
             <span>Picture</span>
             <%= file_field_tag :avatar, accept: Bible270::Avatars.content_types.join(',') %>
             <span class="b270-hint" style="margin:0">
-              PNG, JPEG, GIF or WebP, up to <%= Bible270::Avatars.human_size(Bible270::Avatars.max_bytes) %>.
+              PNG, JPEG, GIF or WebP, up to <%= Bible270::Avatars.human_size(Bible270::Avatars.max_bytes) %> and <%= Bible270::AvatarOptimizer::MAX_PIXELS / 1_000_000 %> megapixels.
+              Automatically center-cropped to a square. Animated pictures use the first frame.
             </span>
           </label>
           <% if current_reader.avatar_uploaded? %>

data/app/views/bible270/shared/_avatar_ui.html.erb

@@ -0,0 +1,85 @@
+<script nonce="<%= content_security_policy_nonce %>">
+  (() => {
+    if (window.Bible270AvatarUI) {
+      window.Bible270AvatarUI.initialize();
+      return;
+    }
+
+    const selector = "img[data-b270-avatar]";
+    const states = new WeakMap();
+    const delays = [500, 1500];
+
+    function stateFor(image) {
+      const source = image.getAttribute("src");
+      let state = states.get(image);
+      if (!state || state.current !== source) {
+        if (state) clearTimeout(state.timer);
+        state = { original: source, current: source, attempts: 0, timer: null };
+        states.set(image, state);
+      }
+      return state;
+    }
+
+    function loaded(image) {
+      const state = stateFor(image);
+      clearTimeout(state.timer);
+      state.timer = null;
+      image.removeAttribute("data-b270-avatar-failed");
+    }
+
+    function failed(image) {
+      image.setAttribute("data-b270-avatar-failed", "");
+      const state = stateFor(image);
+      if (!state.original || state.timer !== null || state.attempts >= delays.length) return;
+
+      state.timer = setTimeout(() => {
+        state.timer = null;
+        if (!image.isConnected || image.getAttribute("src") !== state.current) return;
+        if (image.complete && image.naturalWidth > 0) {
+          loaded(image);
+          return;
+        }
+        state.attempts += 1;
+        let source = state.original;
+        // Refresh our blob redirect, which may have cached an expired storage URL.
+        // Never alter provider URLs: their query parameters may be signed.
+        const url = new URL(source, document.baseURI);
+        if (image.dataset.b270AvatarUploaded === "true" && url.origin === window.location.origin) {
+          url.searchParams.set("_b270_avatar_retry", `${Date.now()}-${state.attempts}`);
+          source = url.href;
+        }
+        state.current = source;
+        image.setAttribute("src", source);
+      }, delays[state.attempts]);
+    }
+
+    function inspect(image) {
+      if (!image.complete) return;
+      if (image.naturalWidth > 0) loaded(image);
+      else failed(image);
+    }
+
+    function initialize(root = document) {
+      if (root.matches?.(selector)) inspect(root);
+      root.querySelectorAll?.(selector).forEach(inspect);
+    }
+
+    // Image events do not bubble. Capture also handles images inserted by replies
+    // and Turbo; the scan catches cached failures before this script was installed.
+    document.addEventListener("load", (event) => {
+      if (event.target.matches?.(selector)) loaded(event.target);
+    }, true);
+    document.addEventListener("error", (event) => {
+      if (event.target.matches?.(selector)) failed(event.target);
+    }, true);
+    document.addEventListener("turbo:load", () => initialize());
+    document.addEventListener("turbo:render", () => initialize());
+    window.addEventListener("pageshow", () => initialize());
+    new MutationObserver((records) => {
+      records.forEach((record) => record.addedNodes.forEach((node) => initialize(node)));
+    }).observe(document.documentElement, { childList: true, subtree: true });
+
+    window.Bible270AvatarUI = { initialize };
+    initialize();
+  })();
+</script>

data/app/views/bible270/shared/_styles.html.erb

@@ -18,13 +18,19 @@
     margin:0; background:radial-gradient(120% 80% at 100% 0%,rgba(165,129,44,.06),transparent 55%),var(--paper);
     color:var(--ink); font-family:"Inter",system-ui,sans-serif; line-height:1.2; -webkit-font-smoothing:antialiased;
   }
-  /* Explicit light keeps native controls light even when the OS is dark.
-     Only system mode follows the media query, including live OS changes. */
+  /* Explicit light also opts out of automatic browser darkening. System still follows the OS. */
+  :root[data-b270-display-mode="light"],
+  :root[data-b270-display-mode="sage"],
+  :root[data-b270-display-mode="mist"]{color-scheme:only light}
+  :root[data-b270-display-mode="dark"],
+  :root[data-b270-display-mode="dark_green"],
+  :root[data-b270-display-mode="dark_blue"]{color-scheme:dark}
+  :root[data-b270-display-mode="system"]{color-scheme:light dark}
   .b270-reader-theme[data-display-mode="light"],
-  .b270[data-display-mode="light"]{color-scheme:light}
+  .b270[data-display-mode="light"]{color-scheme:only light}
   .b270-reader-theme[data-display-mode="sage"],
   .b270[data-display-mode="sage"]{
-    color-scheme:light;
+    color-scheme:only light;
     background-image:none;
     --paper:#e1e8df; --card:#edf0e9; --ink:#29382d; --muted:#52634f; --faint:#5b6c58;
     --line:#cbd6c7; --line-soft:#dce4d8; --teal:#356b60; --oxblood:#905466; --gold:#776023;
@@ -39,7 +45,7 @@
   }
   .b270-reader-theme[data-display-mode="mist"],
   .b270[data-display-mode="mist"]{
-    color-scheme:light;
+    color-scheme:only light;
     background-image:none;
     --paper:#e2e7ed; --card:#ecf0f5; --ink:#293746; --muted:#4f6074; --faint:#58687b;
     --line:#ced7e2; --line-soft:#dfe5ed; --teal:#316977; --oxblood:#86566f; --gold:#7b602b;
@@ -155,6 +161,38 @@
     .b270[data-display-mode="system"] > .b270-theme-scenery[data-scenery="light"]{display:none}
     .b270[data-display-mode="system"] > .b270-theme-scenery[data-scenery="dark"]{display:block}
   }
+  .b270-mobile-scenery{display:none}
+  /* Phone artwork is a quiet accent below the reading area, not a cropped desktop scene. */
+  @media (max-width:600px){
+    .b270-theme-scenery{--b270-scene-height:clamp(180px,30vh,260px)}
+    .b270[data-display-mode] > .b270-theme-scripture,
+    .b270[data-display-mode] > .b270-theme-scenery[data-scenery="hebrew_water"]{display:none}
+    .b270-mobile-scenery{display:block}
+    .b270-papyrus-grid{opacity:.2}
+    .b270-papyrus-edges{opacity:.55}
+    .b270-theme-scenery[data-scenery="sage_sky"]{opacity:.3}
+    #b270-meadow-clouds{opacity:.5}
+    #b270-meadow-clouds path:nth-child(even),
+    #b270-meadow-grass-distant,
+    #b270-meadow-grass-near path:not(:nth-child(3n + 1)){display:none}
+    #b270-meadow-grass-near{opacity:.15}
+    .b270-theme-scenery[data-scenery="sage"] [fill="url(#b270-meadow-rays)"]{opacity:.25}
+    .b270-theme-scenery[data-scenery="mist_sky"]{opacity:.2}
+    .b270-theme-scenery[data-scenery="mist"]{opacity:.45}
+    #b270-ocean-clouds,
+    #b270-ocean-distant-waves,
+    #b270-ocean-glints,
+    #b270-ocean-sand-detail,
+    #b270-ocean-surf path:not(:first-child){display:none}
+    .b270-theme-scenery[data-scenery="dark"]{height:clamp(240px,42vh,380px);opacity:.45}
+    #b270-cedar-fine-grain path:not(:first-child),
+    #b270-cedar-knots path:nth-child(n + 4){display:none}
+    #b270-spruce-distant path:nth-of-type(even),
+    #b270-spruce-near path:nth-of-type(even),
+    #b270-spruce-distant path:nth-of-type(n + 22),
+    #b270-spruce-near path:nth-of-type(n + 22),
+    #b270-lake-reflection{display:none}
+  }
   @media print{
     .b270[data-display-mode] > .b270-theme-scenery[data-scenery]{display:none}
   }
@@ -168,7 +206,7 @@
   .b270-wrap{max-width:820px;margin:0 auto;padding:clamp(14px,3.5vw,36px) clamp(14px,4vw,40px) 64px}
 
   .b270-topbar{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;padding-bottom:20px;border-bottom:1px solid var(--line-soft);margin-bottom:26px}
-  .b270-brand{display:flex;align-items:baseline;gap:4px;margin-right:auto;min-width:0}
+  .b270-brand{display:flex;align-items:baseline;gap:14px;margin-right:auto;min-width:0}
   .b270-header-theme{position:relative;display:flex;align-items:baseline;gap:4px;margin:0;flex:none}
   .b270-header-theme-select{font:inherit;font-size:12px;width:6.5em;height:28px;padding:2px;margin:0;
                            border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);cursor:pointer}
@@ -386,6 +424,11 @@
   .b270-completers{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--muted)}
   .b270-avatar{border-radius:50%;object-fit:cover;display:inline-block;text-align:center;background:var(--teal-fill);color:var(--on-accent);font-size:12px;font-weight:600}
   .b270-avatar-fallback{border-radius:50%}
+  .b270-avatar-frame{position:relative;display:inline-block;vertical-align:middle;flex-shrink:0}
+  .b270-avatar-frame>img{display:block}
+  .b270-avatar-frame>.b270-avatar-fallback{position:absolute;inset:0;visibility:hidden}
+  .b270-avatar-frame>img[data-b270-avatar-failed]{visibility:hidden}
+  .b270-avatar-frame>img[data-b270-avatar-failed]+.b270-avatar-fallback{visibility:visible}
 
   /* comments */
   .b270-section-h{font-family:"Spectral",serif;font-size:20px;font-weight:600;margin:34px 0 14px}