bh 6.1.4 → 6.3.0

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;
+}

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

data/app/stylesheets/bh/shell.css

@@ -0,0 +1,202 @@
+/* A crumb that is not a link keeps its resting colors under the cursor.
+   Bootstrap lights every .breadcrumb-link on hover, which on a <span>
+   promises a click that goes nowhere — and the element is the whole
+   discriminator, since a crumb that links is an <a>. Redefining the hover
+   tokens, rather than out-cascading the hover rule, leaves Bootstrap's own
+   selector in charge and the active crumb its own resting color. */
+span.breadcrumb-link {
+  --bs-breadcrumb-link-hover-color: var(--bs-breadcrumb-link-color);
+  --bs-breadcrumb-link-hover-bg: transparent;
+}
+span.breadcrumb-link.active {
+  --bs-breadcrumb-link-hover-color: var(--bs-breadcrumb-link-active-color);
+}
+
+/* Nothing here is meant to be wider than the window: the one thing that is, a
+   table, scrolls inside its own wrapper. Safari lays a stacked table's hidden
+   header row out at its full width all the same, and a page that can be
+   scrolled to it is a page Safari zooms out of and draws the navbar short on.
+   `clip` on the shell rather than `hidden`: a `hidden` axis turns the other into
+   `auto`, and the body then cut off whatever hung below it — a filter's menu, on a
+   page whose table had no rows to be taller than the menu. `clip` leaves the
+   other axis alone. */
+html { overflow-x: hidden; }
+.recourse-shell { overflow-x: clip; }
+
+/* A finger does not hover. The tint a pointer leaves on the row under it, or on
+   the link under it, would stay on whatever was last touched — or land on whatever
+   the redrawn page put under the finger — so a touch screen gets none. */
+@media (hover: none) {
+  .table-hover > tbody > tr:hover > * {
+    --bs-table-color-state: initial;
+    --bs-table-bg-state: initial;
+  }
+  .nav-link:hover:not(.active) { background-color: transparent; }
+}
+
+/* The navbar stacks over the content: a menu opened from a filter drops over the
+   first rows of the table rather than under them. */
+.recourse-shell > nav { position: relative; z-index: 1; }
+
+/* A focus ring is drawn outside the link it rings, so the link after it paints its own
+   background over the half that overlaps — which is how a ring ends up behind the tint
+   of the row below it. Lifting the focused link above its siblings keeps the ring whole. */
+.nav-link:focus-visible { position: relative; z-index: 1; }
+
+/* The shell is three things — the sidebar, the navbar, the content — written in
+   the order a phone reads them: a row of icons at the very top, the trail and the
+   search under it, the page under that, scrolling as one. From the width the
+   sidebar becomes a column at, a grid seats them the other way round. The navbar
+   runs across the top, the sidebar takes the column under it and the content the
+   rest, the shell is exactly the viewport, and `main` is the only thing in it that
+   scrolls — so the navbar and the sidebar stay where they are however far down the
+   table a reader is. `minmax(0, 1fr)` is what lets the second row be shorter than
+   what is in it; a `1fr` alone is as tall as its content, and the page would scroll
+   after all.
+   The sidebar deliberately does not scroll. A window dragged shorter than the
+   sidebar itself is the one case the viewport cannot hold, and there the sidebar
+   is allowed to spill past the shell and let the browser scroll the page — which is
+   what a reader expects of something taller than the screen. Were it to scroll on
+   its own instead, the same overflow would be hidden inside it and the page would
+   look whole while its foot was unreachable. */
+@media (width >= 768px) {
+  .recourse-shell {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-areas: 'nav nav' 'aside main';
+    height: 100dvh;
+  }
+  .recourse-shell > nav { grid-area: nav; }
+  .recourse-sidebar { grid-area: aside; }
+  .recourse-shell > main { grid-area: main; overflow-y: auto; }
+}
+
+/* The sidebar rules off the navbar below it while it is the band at the top of a
+   phone, and off the content beside it once it is a column. v6 generates no
+   responsive border utilities, so the switch is written out. */
+.recourse-sidebar {
+  border-block-end: var(--bs-border-width) solid var(--bs-border-color);
+}
+@media (width >= 768px) {
+  .recourse-sidebar {
+    border-block-end: 0;
+    border-inline-end: var(--bs-border-width) solid var(--bs-border-color);
+  }
+}
+
+/* Held Option marks the letter each sidebar link answers to. Marked rather than
+   bracketed: '[C]ontacts' would shift the whole sidebar two characters wide the
+   moment the key went down. Swap the two rules below for the bracketed form. */
+.recourse-keys .recourse-key {
+  font-weight: var(--bs-font-weight-semibold);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+/* .recourse-keys .recourse-key::before { content: '['; }
+   .recourse-keys .recourse-key::after  { content: ']'; } */
+
+/* The foot of the sidebar holds the scheme toggle and the way out side by side,
+   each centered in its own half of the row: the toggle alone is in the middle, and
+   the two together are at a quarter and at three quarters. Each control sits in
+   a wrapper — the toggle's own, the form `button_to` draws — and the wrapper is
+   the half, so a button is only as wide as its icon and so is its hover. */
+.recourse-foot { display: flex; }
+.recourse-foot > * { flex: 1 1 0; display: flex; justify-content: center; }
+.recourse-foot .nav-link { border-radius: var(--bs-radius-5); }
+/* A hand cursor alone says little on an icon: a tint under it says it is a control.
+   Only where something can hover: a finger's tap leaves `:hover` set until the next
+   tap elsewhere, and a tint that stays reads as a button stuck down. */
+@media (hover: hover) {
+  .recourse-foot .nav-link:hover { background-color: var(--bs-bg-1); color: var(--bs-fg-body); }
+}
+
+/* `.nav-item` ships `flex: auto`: in a row every entry would take an equal share
+   of the width and in a full-height column an equal share of the height, and the
+   foot's auto margin would never have anything left to push against. Every item is
+   its own size instead, in both directions. */
+.recourse-sidebar .nav-item { flex: 0 0 auto; }
+
+/* On a phone the sidebar is one row of icons across the top, centered, each entry
+   with less room around it than a column gives — a dozen have to fit — and wrapping
+   to a second line only where a host has more than a screen's width of them. */
+@media (width < 768px) {
+  .recourse-sidebar .nav { justify-content: center; --bs-nav-link-padding-x: .5rem; }
+}
+
+/* The foot sits at the bottom of the sidebar and stretches across it while the
+   sidebar is a column, and is simply the last item of the row while it is not
+   — the query matches the `md:` the sidebar's own classes use. */
+@media (width >= 768px) {
+  /* A floor rather than a height, and never wrapped. `.nav` ships `flex-wrap:
+     wrap`, and a column that may wrap, whose items are pinned to their own height
+     above, and which is told exactly how tall to be has one way to place a link
+     that does not fit: a second column. Which is what a short window used to draw.
+     The floor lets it be taller than the space it was given. */
+  .recourse-sidebar .nav { min-height: 100%; flex-wrap: nowrap; }
+  /* And it rides at the foot of the screen, which the auto margin alone is
+     enough to do: the nav's floor is the sidebar's full height, so while the
+     links leave room the margin takes all of it and the foot sits on the fold,
+     rising with it as the window is shortened. Once the links fill the nav there
+     is no room left to take, and the foot comes to rest immediately below the
+     last of them and goes under the fold with it, to be scrolled to.
+     Deliberately not sticky. Sticking it to the bottom of the viewport would lift
+     it off that resting place and hold it over the links it had passed — which is
+     what the background color was for, masking whichever one it covered. Both go
+     together: nothing is painted over, so nothing needs painting out. */
+  .recourse-sidebar .recourse-foot {
+    margin-block-start: auto;
+    align-self: stretch;
+  }
+}
+
+/* A phone reads the chrome as pictures. A sidebar entry is its icon, a crumb its
+   icon, a tab its icon and its figure — `17` rather than `17 franchises` — and the
+   foot's controls their icons, so the sidebar is one row of squares and the trail
+   leaves the search its room. The words are there all the same, read but not seen
+   the way Bootstrap's `.visually-hidden` does it, and the arrows at the foot put
+   them back: the cookie they write has the server draw the shell `.recourse-expanded`,
+   and then none of this applies. A tab or a crumb with no icon keeps its word at
+   every width, there being nothing else to stand for it.
+   The same hiding, at every width, for the foot's words once the sidebar is a
+   column: there is room for an icon and not for a word beside it. */
+.recourse-foot-word { margin-inline-start: .4em; }
+@media (width < 768px) {
+  .recourse-shell:not(.recourse-expanded) :is(.recourse-nav-word, .recourse-crumb-word,
+                                              .recourse-tab-word, .recourse-foot-word) {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+  }
+}
+@media (width >= 768px) {
+  .recourse-foot-word {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+  }
+  /* Nothing to expand: a column has its words already. */
+  .recourse-density { display: none; }
+}
+
+/* The arrows say where a tap goes, like the moon: parting, with `Expand`, while
+   the chrome is icons; meeting, with `Compact`, once the words are out. Both faces
+   are drawn and the shell's class picks, so the button needs no script to redraw. */
+.recourse-density-expanded { display: none; }
+.recourse-expanded .recourse-density-compact { display: none; }
+.recourse-expanded .recourse-density-expanded { display: inline; }
+
+/* The toggle draws both icons and shows the one that names where a click
+   would go: a moon on a light page, a sun on a dark one. Three states rather than
+   two, because a page nobody has chosen for carries no attribute at all, and the
+   media query is then the only thing that knows which mode it is in. Both are
+   declared at every step rather than one left to its default, so that no state
+   can end up hiding the pair and leaving a button with nothing in it. */
+.recourse-scheme-light { display: inline; }
+.recourse-scheme-dark { display: none; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-bs-theme='light']) .recourse-scheme-light { display: none; }
+  :root:not([data-bs-theme='light']) .recourse-scheme-dark { display: inline; }
+}
+:root[data-bs-theme='light'] .recourse-scheme-light { display: inline; }
+:root[data-bs-theme='light'] .recourse-scheme-dark { display: none; }
+:root[data-bs-theme='dark'] .recourse-scheme-light { display: none; }
+:root[data-bs-theme='dark'] .recourse-scheme-dark { display: inline; }

data/app/stylesheets/bh/table.css

@@ -0,0 +1,130 @@
+/* An action column is as wide as a row is tall — an icon in a square — and a
+   counter column starts at the same square, widening only when a figure like
+   38,405 needs the room: a table laying out to 100% reads the width as a
+   preference, never crushes content into it, and hands what these cells do
+   not use to the columns carrying text. Not while the table is stacked, where
+   every cell is a block and a square one is a squashed one — the query
+   matches `.sm:table-stacked`'s. */
+@container (width >= 576px) {
+  .recourse-actions, .recourse-counter {
+    width: calc(1em * var(--bs-body-line-height) + 2 * var(--bs-table-cell-padding-y));
+    white-space: nowrap;
+    text-align: center;
+  }
+}
+
+/* Stacked, a cell reads as one line — `Estimate hi: 600`, the heading semibold
+   and the value after it — where Bootstrap puts the heading on a line of its own
+   and leaves the row's first cell with no heading at all, bold in its place: a
+   status opening a row would be a bare badge. Every cell is headed here. And a
+   value with no space in it — an address, a token — breaks rather than widening
+   the row past the phone. */
+@container (width < 576px) {
+  .sm\:table-stacked > tbody > tr > td[data-cell]::before {
+    content: attr(data-cell) ': ';
+    display: inline;
+    font-weight: var(--bs-font-weight-semibold);
+  }
+  .sm\:table-stacked > tbody > tr > td:first-child { font-weight: inherit; }
+  /* A counter's heading goes inside its link, so the whole `Franchises: 21` is
+     one thing to tap; the cell's own heading steps aside for it. */
+  .sm\:table-stacked > tbody > tr > td.recourse-counter::before { content: none; }
+  .sm\:table-stacked > tbody > tr > td.recourse-counter > [data-cell]::before {
+    content: attr(data-cell) ': ';
+    font-weight: var(--bs-font-weight-semibold);
+  }
+  .sm\:table-stacked > tbody > tr > td:not(:first-child) + td::before { margin-block-start: 0; }
+  .sm\:table-stacked > tbody > tr > td { overflow-wrap: anywhere; }
+}
+
+/* A counter says what it counts in one of two ways, and the table's own width is
+   what picks: the icon and a bare figure where the column is a square, the
+   counted model's words where there is room to read them. Bootstrap's `xl`, so
+   words arrive on a wide monitor and nowhere narrower — the width above is a
+   preference a table never crushes content into, so the column simply widens to
+   take them. Against `.table-responsive` like every query here, which is the
+   table's width rather than the window's: a sidebar takes a few hundred pixels
+   the window knows nothing about. */
+.recourse-counter-word { display: none; }
+@container (width >= 1280px) {
+  .recourse-counter-icon, .recourse-counter-figure { display: none; }
+  .recourse-counter-word { display: inline; }
+}
+
+/* A row the viewer has kept, and the only report a click ever gets, so it has to
+   be seen. A twelfth of the primary mixed into the page rather than
+   `--bs-primary-bg-subtle`: that token is a fixed step of the ramp, far enough
+   from the page on a low-contrast palette to cost the text a point of contrast
+   it has not got — mixing into the page keeps the tint the same distance from it
+   whatever the palette. A background rather than `.table-active`, which sets the
+   very variable `.table-hover` sets and would read as the row under the cursor,
+   and lose its tint the moment it became one; a background lets the hover shadow
+   lay over it. */
+.table > tbody > .recourse-kept > * {
+  background-color: color-mix(in srgb, var(--bs-primary-fg) 12%, var(--bs-bg-body));
+}
+
+/* The row a write just landed on, tinted for as long as the message saying so
+   stands. On the cells rather than on the row, like the kept tint beside it: the
+   table collapses its borders, so the cells are what paint, and one tint across
+   all of them is what reads as a single row — where anything drawn per cell reads
+   as a box around each of them instead.
+   A background rather than a border. A border on a collapsing table is a width
+   the table then measures around, and taking it away again leaves the line it
+   drew sitting between two rows that no longer want one.
+   Mixed into the page exactly as the kept tint below is, and never
+   `--bs-success-bg-subtle`: that token is `light-dark(--bs-green-100,
+   --bs-green-900)`, and a palette builds those steps by mixing toward white or
+   black rather than toward the page — so how far it lands from the page is the
+   palette's business and not ours. Mixing here keeps it the same distance on all
+   nine. The success family rather than the primary one is what tells it apart
+   from the kept tint it may land on top of: a different hue reads as a different
+   thing, where a second shade of the primary would read as more of the same. */
+.table > tbody > .recourse-written > *,
+.table > tbody > .recourse-written-out > * {
+  --recourse-written: color-mix(in srgb, var(--bs-success-fg) 12%, var(--bs-bg-body));
+}
+.table > tbody > .recourse-written > * {
+  background-color: var(--recourse-written);
+}
+/* Let go of over the second the toast beside it takes to fade, and started by the
+   same event. The class above comes off as this one goes on, so the animation is
+   the only thing painting the row while it runs and nothing paints it afterwards
+   — which hands a kept row back its own tint rather than leaving it wearing this
+   one. */
+.table > tbody > .recourse-written-out > * {
+  animation: recourse-written-out 1s linear;
+}
+@keyframes recourse-written-out {
+  from { background-color: var(--recourse-written); }
+  to { background-color: var(--bs-bg-body); }
+}
+/* The tint itself is not motion; only its going is. */
+@media (prefers-reduced-motion: reduce) {
+  .table > tbody > .recourse-written-out > * { animation: none; }
+}
+
+/* The grip a row of an arranged table is taken hold of by. The cursor is the whole of
+   the affordance — the icon says what it is and the pointer says it can be picked up —
+   and `grabbing` while it is held, which is what tells a drag from a click that has not
+   moved yet. `touch-action: none` on this square alone: a phone scrolls the page by
+   dragging anywhere on a table, and only the grip is taken away from that. */
+.recourse-handle {
+  cursor: grab;
+  touch-action: none;
+}
+.recourse-handle:active { cursor: grabbing; }
+
+/* The space the row will land in, which Sortable leaves standing where it would go.
+   The same tint a kept row wears, mixed into the page the same way and for the same
+   reason: a fixed step of the ramp lands a different distance from the page on every
+   palette. On the cells rather than the row, since the table collapses its borders and
+   the cells are what paint. */
+.table > tbody > tr.sortable-ghost > * {
+  background-color: color-mix(in srgb, var(--bs-primary-fg) 12%, var(--bs-bg-body));
+}
+
+/* And the row itself while it is off the ground. Sortable fades it to 0.8; a row under
+   the cursor reads as lifted from the tint standing where it left, so nothing here has
+   to make it translucent as well. */
+.table > tbody > tr.sortable-drag { opacity: 1; }

data/app/stylesheets/bh/values.css

@@ -0,0 +1,41 @@
+/* One rule per row of the show page, so a value and its heading read as one thing
+   and the next pair as another. On the cells rather than between them: a column's
+   gutter is padding inside it, so two side by side draw one unbroken line.
+   Every row reserves the width a rule takes, in `transparent`, and the show page
+   only colors it in — which is what leaves a field at exactly the height of the
+   value it edits, row after row down two pages. */
+.recourse-row {
+  border-block-end: var(--bs-border-width) solid transparent;
+}
+.recourse-values > .recourse-row {
+  border-block-end-color: var(--bs-border-color);
+}
+/* And a value stands as tall as the control that edits it, so a row on one page
+   is a row of the same height on the other. Bootstrap gives
+   `.form-control-plaintext` a control's padding and line height but no minimum,
+   and an icon or a badge is shorter than a box. */
+.recourse-values .form-control-plaintext {
+  min-height: var(--bs-control-min-height);
+}
+/* The reveal is a word beside a value rather than a control beside it, so it takes
+   the line's height and not `.btn-sm`'s minimum — which would leave a masked row
+   taller than the field that edits the same attribute. */
+.form-control-plaintext .btn {
+  min-height: 0;
+}
+
+/* A payload in a block of its own, bounded so it scrolls rather than grows. `pre`
+   for the indentation that makes JSON readable, but wrapping rather than running
+   off to the side: a flex item's automatic minimum size is the min-content width
+   of whatever is inside it, and `overflow` on this box does not lower it — so one
+   unbroken 4,000-character token became the width of the value's column, then of
+   `main`, which then wrapped below the sidebar it belongs beside. `pre-wrap` keeps
+   the indentation and takes the wrapping, and `anywhere` is what lowers
+   min-content, which `break-word` in its place would not. */
+.recourse-payload {
+  max-height: 12rem;
+  margin-block-end: 0;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}

data/app/stylesheets/bh.css

@@ -0,0 +1,13 @@
+/* Everything a page built on Bootstrap 6 is styled by, in one file: Bootstrap as upstream
+   ships it, and then this gem's own rules, each in a file named for what it draws.
+   Built by esbuild into /css/bh.css; the imports are the reading order. */
+@import '../../vendor/bootstrap.min.css';
+@import 'bh/base.css';
+@import 'bh/shell.css';
+@import 'bh/table.css';
+@import 'bh/map.css';
+@import 'bh/search.css';
+@import 'bh/values.css';
+@import 'bh/chat.css';
+@import 'bh/pin.css';
+@import 'bh/flow.css';

data/app/stylesheets/theme/bootstrap.css

@@ -0,0 +1,10 @@
+/* Bootstrap's own palette, and the only file here that declares nothing.
+
+   The eight beside it work by overriding upstream's `:root`, so having upstream's
+   palette back is a matter of dropping their block rather than of writing one — and
+   swapping this link in is how a toggle drops it. Linking no palette at all and linking
+   this one are the same look by two routes.
+
+   It is named so the toggle can reach it. A reader who rotates through nine palettes
+   and never finds the one the pages started in has been shown a door with no handle
+   on the inside. */