bh 6.1.4 → 6.2.0

data/app/javascript/bh/shortcuts_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Option is the modifier. Control and Command are spoken for — Control+C and
+// Command+C are both copy — while Option is what a browser's own accesskey reaches
+// for on most platforms, and it collides with almost nothing a page would want.
+export default class extends Controller {
+  connect() {
+    this.reveal = (event) => this.element.classList.toggle('recourse-keys', event.altKey)
+    this.hide = () => this.element.classList.remove('recourse-keys')
+    this.press = (event) => this.#press(event)
+
+    document.addEventListener('keydown', this.reveal)
+    document.addEventListener('keyup', this.reveal)
+    document.addEventListener('keydown', this.press)
+    // Holding Option and switching windows would otherwise leave the hints up.
+    window.addEventListener('blur', this.hide)
+  }
+
+  disconnect() {
+    document.removeEventListener('keydown', this.reveal)
+    document.removeEventListener('keyup', this.reveal)
+    document.removeEventListener('keydown', this.press)
+    window.removeEventListener('blur', this.hide)
+  }
+
+  #press(event) {
+    if (!event.altKey || event.ctrlKey || event.metaKey) { return }
+
+    // On a Mac, Option+c is 'ç', so the key pressed is read from the keyboard's own
+    // layout-independent code rather than from the character it produced.
+    const pressed = event.code.match(/^Key([A-Z])$/)
+    if (!pressed) { return }
+
+    const link = this.element.querySelector(`[data-key="${pressed[1].toLowerCase()}"]`)
+    if (!link) { return }
+
+    event.preventDefault()
+    this.hide()
+    // Clicked rather than assigned to, so Turbo takes the visit like any other link.
+    link.click()
+  }
+}

data/app/javascript/bh/sortable_controller.js

@@ -0,0 +1,84 @@
+import { Controller } from '@hotwired/stimulus'
+import Sortable from 'sortablejs'
+import { flash } from './flash.js'
+
+// Drags a row of an arranged table to another place in it. Only the row that moved is
+// reported, as the place it landed in: the server shifts whatever it displaced,
+// because it is the only one that knows how many rows there are behind this page.
+//
+// The rows are a page rather than the table, so the index a drop reports is short by
+// whatever the pages before it hold — `offset` is what makes up the difference, and a
+// drag therefore moves a row within the page it is on.
+export default class extends Controller {
+  static values = { offset: Number, message: String }
+
+  connect() {
+    this.sortable = Sortable.create(this.element, {
+      handle: '.recourse-handle',
+      animation: 150,
+      onStart: this.hold,
+      onEnd: this.drop,
+    })
+    // A refresh broadcast morphs the page, and one arriving mid-drag would rewrite the
+    // rows under the cursor. The search form sits a morph out the same way.
+    document.addEventListener('turbo:before-morph-element', this.freeze)
+  }
+
+  disconnect() {
+    this.sortable.destroy()
+    document.removeEventListener('turbo:before-morph-element', this.freeze)
+  }
+
+  // Arrows, so `this` survives being handed to a listener and the same function object
+  // is the one removed again.
+  hold = () => {
+    this.dragging = true
+  }
+
+  drop = ({ item, newIndex, oldIndex }) => {
+    this.dragging = false
+    if (newIndex === oldIndex) return
+
+    this.send(item.dataset.sortableUpdateUrl, this.offsetValue + newIndex + 1)
+  }
+
+  freeze = (event) => {
+    if (this.dragging && this.element.contains(event.target)) event.preventDefault()
+  }
+
+  // Nothing is rendered from the answer: the row is already where it was dropped, and
+  // redrawing the table under the cursor that dropped it is what this avoids. It is
+  // still read, so a move the server refused does not sit there looking saved.
+  async send(url, position) {
+    const body = new FormData()
+    body.append('position', position)
+
+    try {
+      const response = await fetch(url, {
+        method: 'PATCH',
+        body,
+        headers: { Accept: 'application/json', 'X-CSRF-Token': this.token },
+      })
+      if (!response.ok) return this.revert()
+
+      // Said only once the row is actually written. The drop moved it on the screen and
+      // would have moved it under a request that never landed, so this is the half of
+      // the report only the server can give.
+      flash(this.messageValue, 'theme-success')
+    } catch {
+      this.revert()
+    }
+  }
+
+  // Put the table back the way the database has it, since the row is sitting somewhere
+  // the server never agreed to.
+  revert() {
+    this.element.closest('turbo-frame')?.reload()
+  }
+
+  // The token in the head rather than one in a form: there is no form here, and the
+  // head's is global to the session and fresh per request.
+  get token() {
+    return document.querySelector('meta[name="csrf-token"]')?.content
+  }
+}

data/app/javascript/bh/thread_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from '@hotwired/stimulus'
+
+// A thread opens at its newest message with the field ready, and stays at the newest as
+// answers arrive. Every render undoes both -- `autofocus` included, which is why sending a
+// question landed back here with nothing focused -- so it is said again on each one rather
+// than only when Stimulus connects, which a morphed-in answer never triggers.
+//
+// The field itself Turbo is told to leave alone, since an answer landing morphs the page and
+// the server's empty box would be written over a question half typed. Nothing else then
+// empties it, so this does, once the question it held has actually gone.
+export default class extends Controller {
+  static targets = ['messages', 'field']
+
+  connect() {
+    this.following = true
+    this.follow = () => { this.following = this.#atBottom() }
+    this.settle = () => requestAnimationFrame(() => this.#settle())
+    this.empty = () => { if (this.hasFieldTarget) { this.fieldTarget.value = '' } }
+
+    if (this.hasMessagesTarget) { this.messagesTarget.addEventListener('scroll', this.follow) }
+    document.addEventListener('turbo:render', this.settle)
+    this.element.addEventListener('turbo:submit-end', this.empty)
+    this.settle()
+  }
+
+  disconnect() {
+    if (this.hasMessagesTarget) { this.messagesTarget.removeEventListener('scroll', this.follow) }
+    document.removeEventListener('turbo:render', this.settle)
+    this.element.removeEventListener('turbo:submit-end', this.empty)
+  }
+
+  // Left where the reader put it once they have scrolled up to read back: an answer landing is
+  // no reason to pull the thread out from under them. The field takes focus without the page
+  // scrolling to it: a chat below the fold, the showcase's say, must not drag the page down
+  // on load, and a chat page is sized to the window, so there the field is in view already.
+  #settle() {
+    if (this.hasFieldTarget) { this.fieldTarget.focus({ preventScroll: true }) }
+    if (this.hasMessagesTarget && this.following) {
+      this.messagesTarget.scrollTop = this.messagesTarget.scrollHeight
+    }
+  }
+
+  #atBottom() {
+    const { scrollTop, scrollHeight, clientHeight } = this.messagesTarget
+    return scrollHeight - scrollTop - clientHeight < 24
+  }
+}

data/app/javascript/bh/timezone_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus'
+
+// The reader's own zone, told to the server so it can draw their pages against their
+// clock. A cookie rather than local storage, for the reason the page size uses one:
+// the server does the converting, and a cookie is the only storage the server is sent.
+export default class extends Controller {
+  static values = { storage: String }
+
+  // The page in front of the reader was drawn before this cookie existed, so the first
+  // visit from a browser — and the first after they travel — is drawn against the
+  // host's zone and then asked for again. Only when the cookie disagrees, so every
+  // other visit costs nothing: this writes what is already there and stops.
+  connect() {
+    const zone = Intl.DateTimeFormat().resolvedOptions().timeZone
+    if (!zone || zone === this.#stored()) { return }
+
+    document.cookie =
+      `${this.storageValue}=${encodeURIComponent(zone)}; path=/; max-age=31536000; samesite=lax`
+    window.Turbo.visit(window.location.href, { action: 'replace' })
+  }
+
+  #stored() {
+    const row = document.cookie.split(/;\s*/).find((one) => one.startsWith(`${this.storageValue}=`))
+
+    return row ? decodeURIComponent(row.split('=')[1]) : null
+  }
+}

data/app/javascript/bh/toast_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus'
+import { Toast } from 'bootstrap'
+import { DELAY } from './written.js'
+
+// The toast arrives from the server already shown, so Bootstrap's show() must never
+// run: it re-adds `showing` and blinks the toast through transparent. But show() is
+// also the only place Bootstrap arms its autohide, so the timer lives here instead,
+// and only the hiding is Bootstrap's — the timed hide and the dismiss X then share
+// one code path and one fade.
+export default class extends Controller {
+  static values = { delay: { type: Number, default: DELAY } }
+
+  connect() {
+    // `autohide: false` keeps Bootstrap from arming a rival timer if anything ever
+    // does call show() on this element.
+    this.toast = Toast.getOrCreateInstance(this.element, { autohide: false })
+    this.startTimer()
+  }
+
+  disconnect() {
+    this.stopTimer()
+    this.toast.dispose()
+  }
+
+  // Reading the message, or aiming for the X, holds the toast open — Bootstrap's
+  // own pause-on-hover only guards the timer *it* armed, so it is redone here.
+  stopTimer() {
+    clearTimeout(this.timeout)
+  }
+
+  // A fresh full delay on leave, which is also what Bootstrap re-arms.
+  startTimer() {
+    this.timeout = setTimeout(() => this.toast.hide(), this.delayValue)
+  }
+}

data/app/javascript/bh/tooltip_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from '@hotwired/stimulus'
+import { Tooltip } from 'bootstrap'
+
+// The tooltip naming an icon-only heading. Bootstrap never wires one on its own,
+// and a Stimulus lifecycle is what survives Turbo redrawing the table: connect
+// makes it, disconnect takes it down before the element goes, so a sorted or
+// searched table never strands one over an element that left.
+//
+// None where nothing can hover: on a touch screen the tap that would open a link
+// is also what shows a tooltip, and a word popping up over a tap reads as a hitch.
+// Asked two ways, since an iPhone answered the first with a tooltip all the same: a
+// screen that cannot hover, or a pointer too coarse to rest on one word of a row.
+export default class extends Controller {
+  connect() {
+    if (matchMedia('(hover: none), (pointer: coarse)').matches) return
+
+    this.tooltip = Tooltip.getOrCreateInstance(this.element)
+  }
+
+  disconnect() {
+    this.tooltip?.dispose()
+  }
+}

data/app/javascript/bh/written.js

@@ -0,0 +1,20 @@
+// The mark a create or an update leaves on the row it landed on, and how long the toast
+// saying so stands — the one clock, which the toast controller reads too.
+export const DELAY = 2000
+
+// Marked, and handed back the way to let it go. Letting go swaps one class for the
+// other rather than adding to it: the fade is an animation, and while the first class
+// is still on the row it would paint the tint straight back the moment that animation
+// ended. Off the row entirely, what paints it afterwards is whatever else the cascade
+// says — the tint of a kept row, or nothing.
+export function mark(row) {
+  if (!row) { return () => {} }
+
+  row.classList.remove('recourse-written-out')
+  row.classList.add('recourse-written')
+
+  return () => {
+    row.classList.remove('recourse-written')
+    row.classList.add('recourse-written-out')
+  }
+}

data/app/javascript/bh/written_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+import { mark } from './written.js'
+
+// The row a create or an update just landed on, marked for exactly as long as the
+// toast that says so. One clock rather than two: the mark goes when the message goes,
+// however long somebody held the toast open by reading it.
+//
+// `hide`, never `hidden`. Bootstrap fires the first as the toast begins to fade and the
+// second only once it has finished, a whole second later — which is a mark still lit
+// over a message that has already gone.
+export default class extends Controller {
+  static values = { row: String }
+
+  // Only where the row is on this page — a record can be written onto a page it does
+  // not appear on, sorted or filtered or paged away — and only where a toast is here
+  // to end it, since nothing else would.
+  connect() {
+    const row = document.getElementById(this.rowValue)
+    if (!row || !this.element.querySelector('.toast')) { return }
+
+    this.fade = mark(row)
+    this.element.addEventListener('hide.bs.toast', this.fade)
+  }
+
+  disconnect() {
+    if (this.fade) { this.element.removeEventListener('hide.bs.toast', this.fade) }
+  }
+}

data/app/javascript/bh.js

@@ -0,0 +1,60 @@
+// Everything a page built on Bootstrap 6 runs, in one module: Turbo with the cable element
+// turbo-rails signs its streams for, Bootstrap itself, and a Stimulus application with every
+// controller this gem's markup names. Built by esbuild into /js/bh.js.
+import '@hotwired/turbo-rails'
+import 'bootstrap'
+import { Application } from '@hotwired/stimulus'
+import confirm from './bh/confirm.js'
+import BookmarkController from './bh/bookmark_controller.js'
+import ClearController from './bh/clear_controller.js'
+import ComboboxController from './bh/combobox_controller.js'
+import DensityController from './bh/density_controller.js'
+import DeselectController from './bh/deselect_controller.js'
+import LimitController from './bh/limit_controller.js'
+import MapController from './bh/map_controller.js'
+import OtpController from './bh/otp_controller.js'
+import PhoneController from './bh/phone_controller.js'
+import PlaceholderController from './bh/placeholder_controller.js'
+import RelativeTimeController from './bh/relative_time_controller.js'
+import RequireController from './bh/require_controller.js'
+import RevealController from './bh/reveal_controller.js'
+import SchemeController from './bh/scheme_controller.js'
+import SearchController from './bh/search_controller.js'
+import ShortcutsController from './bh/shortcuts_controller.js'
+import SortableController from './bh/sortable_controller.js'
+import ThreadController from './bh/thread_controller.js'
+import TimezoneController from './bh/timezone_controller.js'
+import ToastController from './bh/toast_controller.js'
+import TooltipController from './bh/tooltip_controller.js'
+import WrittenController from './bh/written_controller.js'
+
+// Guarded: a module runs once, but a host that also loads this file from its own
+// layout on a Turbo visit would otherwise connect every controller a second time.
+if (!window.Stimulus) {
+  window.Stimulus = Application.start()
+  window.Stimulus.register('bookmark', BookmarkController)
+  window.Stimulus.register('clear', ClearController)
+  window.Stimulus.register('combobox', ComboboxController)
+  window.Stimulus.register('density', DensityController)
+  window.Stimulus.register('deselect', DeselectController)
+  window.Stimulus.register('limit', LimitController)
+  window.Stimulus.register('map', MapController)
+  window.Stimulus.register('otp', OtpController)
+  window.Stimulus.register('phone', PhoneController)
+  window.Stimulus.register('placeholder', PlaceholderController)
+  window.Stimulus.register('relative-time', RelativeTimeController)
+  window.Stimulus.register('require', RequireController)
+  window.Stimulus.register('reveal', RevealController)
+  window.Stimulus.register('scheme', SchemeController)
+  window.Stimulus.register('search', SearchController)
+  window.Stimulus.register('shortcuts', ShortcutsController)
+  window.Stimulus.register('sortable', SortableController)
+  window.Stimulus.register('thread', ThreadController)
+  window.Stimulus.register('timezone', TimezoneController)
+  window.Stimulus.register('toast', ToastController)
+  window.Stimulus.register('tooltip', TooltipController)
+  window.Stimulus.register('written', WrittenController)
+
+  // The browser's confirm() becomes a Bootstrap dialog the module draws on the first ask.
+  window.Turbo.config.forms.confirm = confirm
+}

data/app/stylesheets/bh/base.css

@@ -0,0 +1,27 @@
+/* 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; }
+

data/app/stylesheets/bh/chat.css

@@ -0,0 +1,77 @@
+/* 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. A
+   chat is drawn by the `chat_with` 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;
+  /* A conversation is prose, so it reads at its own size whatever scale the host
+     set for itself: an admin page compacts its body type for tables dense with figures,
+     and a sentence somebody typed is not one of those. */
+  font-size: 1rem;
+  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 }
+}

data/app/stylesheets/bh/flow.css

@@ -0,0 +1,94 @@
+/* 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, 75rem);
+  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`. */
+/* The card is read down the middle, and so is what a form says about itself: the legend over a
+   group, a submit, a single box a page is nothing but. A row is the exception -- its words and
+   the box under them are read from where they start, since a label centered over the box it
+   names leaves the eye hunting for where each one begins. */
+.flow-card .form-label, .flow-card .form-control, .flow-card .invalid-feedback { text-align: center }
+.flow-card form:has(.flow-field ~ .flow-field, .form-check ~ .form-check) :is(.flow-field, .form-check),
+.flow-card form:has(.flow-field ~ .flow-field, .form-check ~ .form-check) .flow-field .form-label,
+.flow-card form:has(.flow-field ~ .flow-field, .form-check ~ .form-check) .flow-field .form-control { text-align: start }
+
+/* A ticked box and the words beside it are a row of two, with room between them: Bootstrap
+   hangs the box in the padding by a negative margin, which puts it under centered words. */
+.flow-card .form-check { display: flex; align-items: start; gap: 1rem; padding-left: 0 }
+.flow-card .form-check .form-check-input { flex: none; margin: 0.25em 0 0 }
+
+/* A group of controls carries its own spacing, and twice as much under it as over: the words
+   over a group belong to it, and even space either side would let them drift between two. */
+.flow-fieldset { margin-block: 1rem 2rem; gap: 1rem }
+
+/* The words and the control they name, as one cell, which is what lets a form be laid out in
+   columns however much markup a control draws for itself. Named for the flow rather than the
+   form: Bootstrap has a `form-field` of its own, whose rules sized our words to themselves and
+   held them at the left of a row they were meant to be centered in. */
+.flow-card .flow-field { display: grid; align-content: start }
+
+/* A card wide enough for two columns takes them, and everything else in the fieldset -- the
+   legend, a submit -- keeps the whole row. The card is what is measured rather than the
+   window, so the narrow card of a sign-in page stays one column on the widest screen. */
+.flow-card { container-type: inline-size }
+@container (min-width: 40rem) {
+  .flow-card fieldset.d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem }
+  .flow-card fieldset.d-grid > :not(.flow-field) { grid-column: 1 / -1 }
+}
+/* A rule between two ways of doing the same thing, with room either side of it: a card is
+   short enough that a thin line needs the space to read as a divide rather than as a scratch. */
+.flow-card hr { margin-block: 2rem }
+
+/* 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 something longer than the page takes the rest of the window and scrolls that
+   part inside itself, so the line at its head, whatever sits at its foot and the way out under
+   the card stay in sight however long it gets. A thread is one such thing and says so by its
+   own markup; anything else -- a contract, a table -- says `flow-scroll` on the part that
+   scrolls. `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`. A card given a height cannot always
+   honour it -- a short window leaves less room than what does not scroll needs -- so it
+   scrolls whole rather than letting what it holds out past its own edges. */
+.flow:has(.chat-thread, .flow-scroll, .flow-middle) { flex: none; height: calc(100svh - 2rem) }
+.flow-card:has(.chat-thread, .flow-scroll, .flow-middle) { display: flex; flex-direction: column; flex: 1; min-height: 15rem; overflow: auto }
+.flow-card .chat-thread,
+.flow-card > :has(.flow-scroll) { display: flex; flex-direction: column; flex: 1; min-height: 0 }
+.flow-card .chat, .flow-card .flow-scroll { flex: 1; min-height: 0; overflow-y: auto }
+.flow-card .chat-ask { text-align: center }
+/* A bubble reads from its start, though: a flow centers a card's words, and an answer long
+   enough to wrap is a paragraph, which is read down an edge rather than about a middle. */
+.flow-card .chat-bubble { text-align: start }
+
+/* A card standing as tall as those but with little in it: what it holds sits in the middle of
+   it, down as well as across, rather than at the top of a sheet of white. */
+.flow-card .flow-middle { flex: 1; display: flex; flex-direction: column; justify-content: 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 }
+}

data/app/stylesheets/bh/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; }

data/app/stylesheets/bh/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;
+}