houseaccount 0.10.1

package/app/stylesheets/houseaccount/base.css

@@ -0,0 +1,33 @@
+/* Body text is Bootstrap's own: the system face at 16px. A host wanting another sets
+   `--bs-body-font-family` and `--bs-body-font-size` on `:root` after this stylesheet. */
+
+/* Bootstrap reserves the scrollbar's column on every page, scrolling or not, so pages line
+   up whether they grow or not; a browser with classic scrollbars then paints an empty track
+   down the right of a page that fits. The column comes and goes with the scrollbar here. */
+:root { scrollbar-gutter: auto }
+
+/* A dialog reads from the start whatever centers the text around the link that opened it:
+   `dialog` draws the two side by side, so the element inherits from the link's place. */
+.dialog { text-align: start }
+
+/* Bootstrap's .15s fade reads as vanishing. Only the hide ever transitions here
+   — the toast is born visible — and reduced-motion still wins, because its rule
+   sets `transition: none` outright rather than through this variable. */
+.toast { --bs-transition-fade: opacity 1s linear; }
+
+/* A marked match is part of the word it sits in, so it carries no padding of
+   its own: 'Nash' in 'Nashville' must not read as a word standing apart. */
+mark { padding: 0; }
+
+/* The icon font drops every glyph an eighth of an em to sit on a text
+   baseline, which inside an icon link reads as the arrow resting on the
+   line. A sixteenth up clears the baseline without floating — on the
+   ::before, so the hover transform on the .bi box itself is untouched. */
+.icon-link > .bi::before { vertical-align: .0625em; }
+
+/* The page is as tall as the window, and `svh` rather than `vh` is what that means on a
+   phone: `vh` measures the window with the browser's own bars hidden, which they are not
+   until somebody scrolls — so a foot resting at the bottom of a `100vh` page rests below
+   what can be seen, and reaching it costs a scroll. `svh` is the window with the bars
+   showing, the smaller of the two, so the foot lands above the fold and stays there. */
+.house-page { min-height: 100svh }

package/app/stylesheets/houseaccount/chat.css

@@ -0,0 +1,73 @@
+/* A conversation as a column of bubbles: what the reader said on the right in the
+   primary's tint, what was said to them on the left in the page's second surface. Every
+   HouseAccount chat is drawn by the `chat` helper and wears these. */
+.chat { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem }
+/* Sits at the foot of its box while short, so the first turn lands just above the field
+   that sends the next. An auto margin and not `align-content: end`, which once the thread
+   overflows pushes its first message clean out of the top with no way to scroll back. */
+.chat > :first-child { margin-block-start: auto }
+
+/* Who said it and when, small, over the bubble it belongs to and on its side. */
+.chat-aside { font-size: var(--bs-font-size-sm); color: var(--bs-fg-2); margin: 0 0.75rem }
+.chat-aside-out { align-self: flex-end; margin-inline-end: 1.25rem }
+.chat-aside-in { align-self: flex-start }
+.chat-aside .fg-success, .chat-aside .fg-danger, .chat-aside .fg-secondary { font-weight: var(--bs-font-weight-semibold) }
+
+.chat-bubble {
+  max-width: 85%;
+  margin: 0;
+  padding: 0.625rem 0.875rem;
+  border: 1px solid;
+  border-radius: 1rem;
+  /* The same sheen a message thread's bubbles wear. Set as an image so the two sides below
+     can name their own color without wiping it, which the `background` shorthand would. */
+  background-image: var(--bs-gradient);
+  /* An unbroken token wraps rather than widening the bubble past the phone. Whitespace is
+     collapsed as anywhere else: a host's line breaks arrive as markup, and the newlines and
+     indentation a template leaves around its words must not become room in the bubble. */
+  overflow-wrap: anywhere;
+}
+/* The reader's own turn, tinted with the primary rather than filled with it: a solid fill
+   under white text is what a button wears, and a question that reads as a button invites a
+   press. Squared at the corner nearest them, which tells the two sides apart at a glance. */
+.chat-out {
+  align-self: flex-end;
+  /* Clear of the scrollbar a long thread puts down the same edge. */
+  margin-inline-end: 0.5rem;
+  color: var(--bs-primary-fg-emphasis);
+  background-color: var(--bs-primary-bg-subtle);
+  border-color: var(--bs-primary-border);
+  border-end-end-radius: 0.25rem;
+}
+/* The other side's: the page's second surface, squared at its own corner. */
+.chat-in {
+  align-self: flex-start;
+  color: var(--bs-fg-1);
+  background-color: var(--bs-bg-2);
+  border-color: var(--bs-border-color);
+  border-end-start-radius: 0.25rem;
+}
+
+/* An answer on its way reads as one being typed. */
+.chat-typing { display: flex; gap: 0.25rem; align-items: center }
+.chat-typing span {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  background: var(--bs-fg-2);
+  animation: chat-dot 1.2s ease-in-out infinite;
+}
+.chat-typing span:nth-child(2) { animation-delay: 0.15s }
+.chat-typing span:nth-child(3) { animation-delay: 0.3s }
+@keyframes chat-dot { 0%, 60%, 100% { opacity: 0.25 } 30% { opacity: 1 } }
+@media (prefers-reduced-motion: reduce) {
+  .chat-typing span { animation: none; opacity: 0.5 }
+}
+
+/* The field's suggestion fades rather than cutting, so a swap mid-read is not a flicker;
+   the `placeholder` controller adds the class while it swaps the words. */
+.chat-ask::placeholder { opacity: 1; transition: opacity 0.3s ease-in-out }
+.chat-ask.is-fading::placeholder { opacity: 0 }
+@media (prefers-reduced-motion: reduce) {
+  .chat-ask::placeholder { transition: none }
+}

package/app/stylesheets/houseaccount/flow.css

@@ -0,0 +1,47 @@
+/* The page `flow` draws: a column taking the rest of the window so the foot rests at the
+   bottom of a tall screen and scrolls into view on a short one, everything centered. */
+.flow { flex: 1; display: flex; flex-direction: column; text-align: center }
+.flow > header { display: flex; justify-content: center; margin-bottom: 2rem }
+.flow > h1 { margin: 0 0 0.75rem; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; letter-spacing: -0.02em }
+.flow > p { margin: 0 0 1.5rem }
+/* `display: contents`, so a `button_to` form stops being a box and its button becomes a flex
+   item, which is what lets the middot space evenly between two words. A button in the foot is
+   a word among words: the foot's size, no padding and no height of its own. */
+.flow > footer { flex: none; margin-top: auto; padding-top: 2.5rem; display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; font-size: 0.875rem }
+.flow > footer form { display: contents }
+.flow > footer .btn { font-size: inherit; padding: 0; min-height: 0 }
+@media (max-width: 575px) { .flow > header { margin-bottom: 1.75rem } }
+
+/* The one element on the page allowed a fill, a border and a shadow at once, because it holds
+   the only thing the page is for. As wide as the page said, `--flow-width`, and nine tenths of
+   the page color rather than `opacity`, which would fade the border and the words with it. */
+.flow-card {
+  width: 100%;
+  max-width: var(--flow-width, 30rem);
+  background: color-mix(in srgb, var(--bs-bg-body) 90%, transparent);
+  border: 1px solid var(--bs-primary-border);
+  border-radius: 0.375rem;
+  box-shadow: -0.5rem 1rem 2.25rem -0.75rem rgb(6 22 40 / 40%);
+}
+/* Centered on the controls rather than the form, since a field does not inherit it and a
+   form helper may hard-code `text-start`. */
+.flow-card .form-label, .flow-card .form-control, .flow-card .invalid-feedback { text-align: center }
+/* The same edge the card wears, rather than Bootstrap's fainter default. */
+.flow-card .dialog { --bs-dialog-border-color: var(--bs-primary-border) }
+
+/* A card holding a chat takes the rest of the window and scrolls the thread inside itself, so
+   the line at its head, the field at its foot and the way out under the card stay in sight
+   however long the thread gets. `flex: none` before the height: the column is a flex item of
+   `main`, and `flex: 1` would size it to its content and let the page grow and scroll instead.
+   `min-height: 0` down the chain, since a flex item will not shrink below its content without
+   it. The 2rem is the layout's `py-4`, the gutter above and below `main`. */
+.flow:has(.chat-thread) { flex: none; height: calc(100svh - 2rem) }
+.flow-card:has(.chat-thread) { display: flex; flex-direction: column; flex: 1; min-height: 15rem }
+.flow-card .chat-thread { display: flex; flex-direction: column; flex: 1; min-height: 0 }
+.flow-card .chat { flex: 1; min-height: 0; overflow-y: auto }
+.flow-card .chat-ask { text-align: center }
+/* On a phone the card is the page: it breaks out of the gutter with `margin-inline` rather
+   than a width, so it stays in the flow, and loses the side border and the corners with it. */
+@media (width < 768px) {
+  .flow-card:has(.chat-thread) { width: auto; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); border-inline: 0; border-radius: 0 }
+}

package/app/stylesheets/houseaccount/icons.css

@@ -0,0 +1,186 @@
+/* Bootstrap Icons, cut down to the glyphs art/icons.txt names. Written by
+   build-icons-font.mjs — edit the list, not this file. */
+@font-face{font-display:block;font-family:bootstrap-icons;
+  src:url("../../fonts/bootstrap-icons.woff2") format("woff2")}
+.bi::before,[class*=" bi-"]::before,[class^=bi-]::before{display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
+.bi-airplane::before{content:"\f7cd"}
+.bi-alarm::before{content:"\f102"}
+.bi-archive::before{content:"\f10d"}
+.bi-arrow-clockwise::before{content:"\f116"}
+.bi-arrow-counterclockwise::before{content:"\f117"}
+.bi-arrow-down::before{content:"\f128"}
+.bi-arrow-left::before{content:"\f12f"}
+.bi-arrow-right::before{content:"\f138"}
+.bi-arrow-up::before{content:"\f148"}
+.bi-arrows-angle-contract::before{content:"\f149"}
+.bi-arrows-angle-expand::before{content:"\f14a"}
+.bi-award::before{content:"\f154"}
+.bi-bag::before{content:"\f179"}
+.bi-bank::before{content:"\f62e"}
+.bi-bar-chart::before{content:"\f17e"}
+.bi-battery::before{content:"\f188"}
+.bi-bell::before{content:"\f18a"}
+.bi-bicycle::before{content:"\f18d"}
+.bi-book::before{content:"\f194"}
+.bi-bookmark::before{content:"\f1a2"}
+.bi-bookmark-fill::before{content:"\f199"}
+.bi-box::before{content:"\f1c8"}
+.bi-box-arrow-in-right::before{content:"\f1be"}
+.bi-box-arrow-right::before{content:"\f1c3"}
+.bi-briefcase::before{content:"\f1cc"}
+.bi-brush::before{content:"\f1d8"}
+.bi-building::before{content:"\f1dd"}
+.bi-bus-front::before{content:"\f87f"}
+.bi-c-circle::before{content:"\f7db"}
+.bi-calendar::before{content:"\f1f6"}
+.bi-calendar-check::before{content:"\f1e2"}
+.bi-camera::before{content:"\f220"}
+.bi-camera-video::before{content:"\f21f"}
+.bi-car-front::before{content:"\f7e1"}
+.bi-card-checklist::before{content:"\f224"}
+.bi-cart::before{content:"\f242"}
+.bi-cash::before{content:"\f247"}
+.bi-chat::before{content:"\f268"}
+.bi-check::before{content:"\f26e"}
+.bi-check-circle::before{content:"\f26b"}
+.bi-check-circle-fill::before{content:"\f26a"}
+.bi-check2-square::before{content:"\f271"}
+.bi-chevron-down::before{content:"\f282"}
+.bi-chevron-left::before{content:"\f284"}
+.bi-chevron-right::before{content:"\f285"}
+.bi-chevron-up::before{content:"\f286"}
+.bi-circle::before{content:"\f28a"}
+.bi-clipboard::before{content:"\f290"}
+.bi-clock::before{content:"\f293"}
+.bi-cloud::before{content:"\f2c1"}
+.bi-cloud-rain::before{content:"\f2b6"}
+.bi-collection-play::before{content:"\f2cb"}
+.bi-compass::before{content:"\f2d1"}
+.bi-copy::before{content:"\f759"}
+.bi-credit-card::before{content:"\f2dc"}
+.bi-dash::before{content:"\f2ea"}
+.bi-display::before{content:"\f302"}
+.bi-download::before{content:"\f30a"}
+.bi-droplet::before{content:"\f30d"}
+.bi-emoji-smile::before{content:"\f327"}
+.bi-envelope::before{content:"\f32f"}
+.bi-exclamation-triangle::before{content:"\f33b"}
+.bi-eye::before{content:"\f341"}
+.bi-eye-slash::before{content:"\f340"}
+.bi-file-earmark::before{content:"\f392"}
+.bi-file-earmark-text::before{content:"\f38b"}
+.bi-fingerprint::before{content:"\f671"}
+.bi-fire::before{content:"\f7f6"}
+.bi-flag::before{content:"\f3cc"}
+.bi-folder::before{content:"\f3d7"}
+.bi-funnel::before{content:"\f3e1"}
+.bi-gear::before{content:"\f3e5"}
+.bi-geo::before{content:"\f3ea"}
+.bi-geo-alt::before{content:"\f3e8"}
+.bi-gift::before{content:"\f3ec"}
+.bi-globe::before{content:"\f3ee"}
+.bi-graph-up::before{content:"\f3f2"}
+.bi-grid::before{content:"\f3fc"}
+.bi-grip-vertical::before{content:"\f3fe"}
+.bi-hammer::before{content:"\f3ff"}
+.bi-hand-thumbs-down::before{content:"\f405"}
+.bi-hand-thumbs-up::before{content:"\f407"}
+.bi-hdd-rack::before{content:"\f40f"}
+.bi-headphones::before{content:"\f413"}
+.bi-heart::before{content:"\f417"}
+.bi-hospital::before{content:"\f774"}
+.bi-hourglass::before{content:"\f421"}
+.bi-house::before{content:"\f425"}
+.bi-image::before{content:"\f42a"}
+.bi-inbox::before{content:"\f42d"}
+.bi-infinity::before{content:"\f69e"}
+.bi-info-circle::before{content:"\f431"}
+.bi-key::before{content:"\f44f"}
+.bi-keyboard::before{content:"\f451"}
+.bi-laptop::before{content:"\f456"}
+.bi-layout-sidebar::before{content:"\f45f"}
+.bi-lightbulb::before{content:"\f46b"}
+.bi-lightning::before{content:"\f46f"}
+.bi-link::before{content:"\f471"}
+.bi-list::before{content:"\f479"}
+.bi-list-ul::before{content:"\f478"}
+.bi-lock::before{content:"\f47b"}
+.bi-magic::before{content:"\f675"}
+.bi-map::before{content:"\f47f"}
+.bi-megaphone::before{content:"\f484"}
+.bi-mic::before{content:"\f490"}
+.bi-moon::before{content:"\f497"}
+.bi-moon-fill::before{content:"\f494"}
+.bi-music-note::before{content:"\f4a0"}
+.bi-palette::before{content:"\f4b1"}
+.bi-paperclip::before{content:"\f4b3"}
+.bi-pause::before{content:"\f4c4"}
+.bi-pen::before{content:"\f4c8"}
+.bi-pencil::before{content:"\f4cb"}
+.bi-people::before{content:"\f4d0"}
+.bi-percent::before{content:"\f4d1"}
+.bi-person::before{content:"\f4e1"}
+.bi-person-circle::before{content:"\f4d7"}
+.bi-person-dash::before{content:"\f4d9"}
+.bi-person-plus::before{content:"\f4dd"}
+.bi-person-rolodex::before{content:"\f676"}
+.bi-person-vcard::before{content:"\f8c9"}
+.bi-phone::before{content:"\f4e7"}
+.bi-pie-chart::before{content:"\f4e9"}
+.bi-play::before{content:"\f4f5"}
+.bi-plus::before{content:"\f4fe"}
+.bi-power::before{content:"\f4ff"}
+.bi-printer::before{content:"\f501"}
+.bi-puzzle::before{content:"\f503"}
+.bi-qr-code::before{content:"\f6ae"}
+.bi-question-circle::before{content:"\f505"}
+.bi-receipt::before{content:"\f50f"}
+.bi-repeat::before{content:"\f813"}
+.bi-reply::before{content:"\f520"}
+.bi-rulers::before{content:"\f523"}
+.bi-scissors::before{content:"\f528"}
+.bi-search::before{content:"\f52a"}
+.bi-send::before{content:"\f6c0"}
+.bi-share::before{content:"\f52e"}
+.bi-shield::before{content:"\f53f"}
+.bi-shop::before{content:"\f543"}
+.bi-shuffle::before{content:"\f544"}
+.bi-signpost-split::before{content:"\f549"}
+.bi-skip-forward::before{content:"\f55e"}
+.bi-sliders::before{content:"\f56b"}
+.bi-snow::before{content:"\f56d"}
+.bi-sort-down::before{content:"\f575"}
+.bi-soundwave::before{content:"\f57c"}
+.bi-speedometer::before{content:"\f57f"}
+.bi-square::before{content:"\f584"}
+.bi-star::before{content:"\f588"}
+.bi-sticky::before{content:"\f58d"}
+.bi-stop::before{content:"\f593"}
+.bi-stopwatch::before{content:"\f597"}
+.bi-sun::before{content:"\f5a2"}
+.bi-sun-fill::before{content:"\f5a1"}
+.bi-table::before{content:"\f5aa"}
+.bi-tag::before{content:"\f5b0"}
+.bi-telephone::before{content:"\f5c1"}
+.bi-terminal::before{content:"\f5c3"}
+.bi-three-dots::before{content:"\f5d4"}
+.bi-ticket::before{content:"\f6cb"}
+.bi-tools::before{content:"\f5db"}
+.bi-train-front::before{content:"\f81d"}
+.bi-trash::before{content:"\f5de"}
+.bi-tree::before{content:"\f5e2"}
+.bi-trophy::before{content:"\f5e7"}
+.bi-truck::before{content:"\f5ea"}
+.bi-unlock::before{content:"\f600"}
+.bi-upc::before{content:"\f602"}
+.bi-upload::before{content:"\f603"}
+.bi-volume-up::before{content:"\f611"}
+.bi-wallet::before{content:"\f614"}
+.bi-wifi::before{content:"\f61c"}
+.bi-window::before{content:"\f620"}
+.bi-wrench::before{content:"\f621"}
+.bi-x::before{content:"\f62a"}
+.bi-x-circle::before{content:"\f623"}
+.bi-x-lg::before{content:"\f659"}
+.bi-zoom-in::before{content:"\f62c"}
+.bi-zoom-out::before{content:"\f62d"}

package/app/stylesheets/houseaccount/lockup.css

@@ -0,0 +1,58 @@
+/* The logo `houseaccount_logo` draws — a mark beside its name — and the typeface it is set in, drawn the way the pages under
+   `public/page` draw it, so a page served by Rails and a page served while Rails is
+   down carry the same mark. */
+
+/* Quicksand 500, served from here rather than from Google: one origin fewer to reach, and
+   the same immutable cache every other font here sits in. Google's own three ranges, so a
+   browser fetches the Latin file alone for an English page. OFL, see vendor/fonts. */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../../../vendor/fonts/quicksand-500-vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../../../vendor/fonts/quicksand-500-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../../../vendor/fonts/quicksand-500-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* The brand typeface, for the lockup and for a heading that stands beside it. */
+.quicksand { font-family: 'Quicksand', 'Trebuchet MS', sans-serif; font-weight: 500; letter-spacing: 0.01em }
+
+.lockup {
+  white-space: nowrap;
+  line-height: 1;
+  /* Its own two blues rather than the theme's: the mark reads the same in every app. The
+     mark is drawn in the light one and the name set in the dark; `house` alone takes the
+     mark's. */
+  color: light-dark(#1B5288, #9cc0ec);
+  text-decoration: none;
+}
+.lockup .house { color: #3b8ae8 }
+/* Under the cursor the whole logo is one blue, the name, `house` and the mark's strokes
+   alike — which says the whole word is the link, not the name alone. A presentation
+   attribute loses to a rule, which is what lets the stroke written into every drawing
+   give way here. */
+.lockup:hover { color: light-dark(#3b8ae8, #bcd6f4) }
+.lockup:hover .house { color: inherit }
+.lockup:hover svg [stroke] { stroke: currentColor }
+
+/* The mark sits on the text baseline, so its box is nudged rather than aligned: the size and
+   the nudge are the mark's own, written by the helper from `HouseAccount::MARKS`, and the gap
+   to the word is the same for every mark. */
+.lockup { font-size: 20px }
+.lockup svg { position: relative; vertical-align: baseline; margin-right: 0.29em }

package/app/stylesheets/houseaccount/map.css

@@ -0,0 +1,3 @@
+/* A map takes the height a table of a page would: tall enough to read the places
+   on, and short enough to leave the footer under it in view. */
+.recourse-map { height: 60vh; }

package/app/stylesheets/houseaccount/pin.css

@@ -0,0 +1,34 @@
+/* The field a 6-digit code is typed into: one real field, drawn by Bootstrap as six slots.
+   `pin_field` draws the markup and the `otp` controller draws the slots. */
+
+/* Bootstrap's OTP container is a flex row, so it has to be told to center where its card is
+   centered and to let the message drop onto a line of its own under the slots. `min-width: 0`,
+   or the grid item will not shrink below the width its slots come to, which is the whole
+   row hanging off the side of the card before the slots are asked to fit. */
+.otp { justify-content: center; flex-wrap: wrap; min-width: 0 }
+/* Six slots at a fixed width plus the five gaps between them come to 328 pixels, and a
+   phone's card holds 327 — so the last slot sat outside it. Sized off the row instead, they
+   share whatever there is and never exceed the width they were drawn at. */
+.otp-slots { display: flex; justify-content: center; width: 100% }
+.otp-slot { flex: 1 1 0; min-width: 0; max-width: var(--bs-otp-size) }
+.otp .invalid-feedback { order: 1; flex-basis: 100%; margin-top: 0.5rem }
+
+/* .form-control.is-invalid would outrank .otp-input on specificity and draw one red box
+   across all six slots; the field takes no such class, and Bootstrap reddens the slots
+   themselves from the container. */
+.otp .otp-input.is-invalid { border: 0; box-shadow: none }
+
+/* Bootstrap builds the six slots in JavaScript, so one box is what the server can send and
+   what the reader sees until they land. Held back for that moment — but on a class the
+   controller itself sets, so a controller that never runs leaves a field somebody can still
+   type a code into rather than an invisible one. */
+.otp-drawing:not(.otp-rendered) .otp-input { visibility: hidden }
+
+/* Bootstrap lays the real field transparently over the slots, so an autofilled one painted
+   yellow paints over them. The text stays invisible, and the fill is deferred by longer than
+   anybody's session rather than overridden, which is the only thing that holds it off. */
+.otp-input:-webkit-autofill,
+.otp-input:-webkit-autofill:focus {
+  -webkit-text-fill-color: transparent;
+  transition: background-color 0s 600000s;
+}

package/app/stylesheets/houseaccount/search.css

@@ -0,0 +1,60 @@
+/* The search and its filters take the width the breadcrumb and the buttons
+   leave, and give it back as the viewport narrows: the box shrinks to a floor
+   that still shows a word, and below 768px the row is allowed to wrap. */
+.recourse-search { flex: 1 1 auto; max-width: 48rem; }
+/* The box grows and the filters do not, so the field someone types into is the
+   widest thing in the row on a large viewport. A toggle is `width: 100%`, which
+   as a flex item would otherwise mean the whole form. */
+.recourse-search-box { flex: 2 1 16rem; min-width: 8rem; }
+
+.recourse-search .combobox-toggle { flex: 0 1 10rem; }
+/* The per-page switch is a word in the sentence beside it rather than a control
+   next to one, so it takes the line's height and not `.btn`'s own minimum —
+   which would leave the row under every table taller than the words in it. */
+.recourse-limit { min-height: 0; }
+/* The bookmark square is an icon in a row of text, not a control in a form, so it
+   takes the line's height too: `.btn`'s minimum made every row with one taller
+   than the rows without. */
+.recourse-bookmark { min-height: 0; }
+/* Stacked, each control is a row of its own rather than a fragment of one:
+   there is no second control beside it to share the line with. */
+@media (width < 768px) {
+  /* The room the breadcrumb leaves, and never more: a form sized by its content
+     widened with the words a picked option put on a toggle, and wrapped under
+     the crumbs. A basis of nothing and leave to shrink hold it in its row. */
+  .recourse-search { flex: 1 1 0; min-width: 0; max-width: none; }
+  .recourse-search-box,
+  .recourse-search .combobox-toggle { flex: 1 1 100%; min-width: 0; }
+  /* Safari zooms in on a field whose text is under 16px, an absolute figure: the
+     small controls are 14px, and so is the body on a phone, so the controls say
+     16px themselves and focusing one moves nothing. */
+  .recourse-search .form-control { font-size: 16px; }
+  /* A page under a record has a trail two or three crumbs long, and what sat beside
+     the trail — the search, its filters, a button — was squeezed into what those
+     left: `Filter by na`. Under such a trail each takes a row of its own, the form
+     the whole width and every control in it a row in turn, and the margin that set
+     a button apart from the trail goes, there being no trail beside it. An index at
+     the top keeps its form beside its one crumb, where it fits. */
+  .recourse-trailed > :not(nav) { flex: 0 0 100%; margin-inline-start: 0; }
+}
+
+/* The button that empties a combobox search sits inside the field it clears. */
+.combobox-search { position: relative; }
+.combobox-search-input { padding-inline-end: 2rem; }
+/* `:not(.d-none)`, because v6's display utilities carry no `!important` and
+   this rule is later in the cascade: a plain `display` here would beat the
+   `.d-none` the button is hidden with, and show an X over an empty field. */
+.combobox-search-clear:not(.d-none) { display: flex; }
+.combobox-search-clear {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: calc(var(--bs-menu-padding-x) + .35rem);
+  transform: translateY(-50%);
+  padding: .15rem;
+  border: 0;
+  border-radius: var(--bs-radius-5);
+  background: transparent;
+  color: var(--bs-fg-2);
+  line-height: 1;
+}
+.combobox-search-clear:hover { background-color: var(--bs-bg-1); color: var(--bs-fg-body); }