/* ══ The app shell — header, footer, instruments. THE APP OWNS THIS. ═══════
*
* nominate.css and skin.css reskin Loom's WIDGETS; they deliberately do not
* touch its CONTAINERS, and an app that leaves the containers to loom.css
* looks assembled rather than designed (cbprospect's first review, verbatim:
* "spacing not correct; page body not reaching the edges; no hero headings").
* So the shell is authored here, once, and the three rules it encodes are:
*
* - ONE LEFT EDGE: --shell-gutter is the gutter, and the header, the main
* column and the footer all use it.
* - EVERY VIEW OPENS WITH A HERO (the .hero classes below; hero() in the
* page script builds one in four lines).
* - THE FOOTER IS FIXED and carries the instruments: the live-log pill and
* the Feedback button.
*/
:root {
--shell-gutter: clamp(1rem, 4vw, 2.5rem);
/* ⚠️ ONE WIDTH DIAL FOR ALL THE CHROME BOXES (cbapex#112). Above ~1232px
the header/controls (full-bleed, gutter-padded) and the main/footer
columns (max-width, centered) used to disagree about the left edge by
100-150px — every app's h1 sat right of its wordmark, the family-wide
"heading-background offset". Main and footer cap to --shell-max; the
full-bleed bars (header, controls, crumb, subnav) pad to the SAME column
edge via --shell-align, whose % resolves per box against #app's width —
the same base .shell-main centers in. Below the cap the max() collapses
to the bare gutter, so phones are untouched. An app that wants a wider
page (cbprospect: 1680px) overrides ONE token and every box follows. */
--shell-max: 72rem;
--shell-align: calc(max(0px, (100% - var(--shell-max)) / 2) + var(--shell-gutter));
--shell-foot-h: 2.6rem;
--shell-head-h: 3.4rem;
}
/* ── Header — slim sticky bar: mark, name, nav, identity ─────────────────── */
.shell-head {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
gap: 1.25rem;
height: var(--shell-head-h);
/* --shell-align, not the bare gutter: the header's content shares the main
column's left edge at every width (cbapex#112). */
padding: 0 var(--shell-align);
border-bottom: var(--ax-line);
background: var(--surface);
}
.shell-mark {
display: inline-flex;
align-items: center;
gap: 0.55rem;
/* The family wordmark, the aligned recipe (2026-08-18): mono 800 at
0.82rem, tracked 0.28em, uppercase, in the app's own metal — PROSPECT ·
ELECTION NIGHT · PUBLIC, one voice. This used to be a heavy tight-set
name that each app re-voiced locally; the recipe lives here now. */
font-family: var(--ax-mono, ui-monospace, monospace);
font-weight: 800;
font-size: var(--ax-fs-sm);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold, var(--accent));
text-decoration: none;
}
/* ⚠️ THE WORDMARK MUST BE ABLE TO SHRINK, AND IT COULD NOT ═══════════════════
`.shell-mark` is a flex item of `.shell-head`, so its `min-width: auto`
floors it at its own min-content — which for tracked uppercase mono is the
LONGEST WORD, not the longest line. "Conservative" alone measures 138px at
0.82rem/0.28em. The mark then refuses to shrink, the header's last control
is pushed past the viewport, and the page scrolls sideways.
Measured at 390px, all ten apps, both shared screens (2026-08-26, cbapex#56):
cbconnector overflowed 26px with the MENU BUTTON off the right edge — the
disclosure that holds the nav and sign-out at phone width — and cbnight,
cbvmod and cbconnector were all silently WRAPPING the wordmark onto two
lines inside a 3.4rem header.
⚠️ The overflow is therefore a function of `--app-name`, which is per-app —
so "the file is shared, so every app is broken" is exactly wrong here, and so
is "one app is broken". Nine were one long client name away from it. The
floor belongs in the kit; the name that trips it does not exist yet.
`min-width: 0` on both boxes lets it shrink; the ellipsis is what it degrades
TO, rather than clipping mid-glyph. Nothing changes for a name that already
fits — verified: only the two overflowing pages and the three wrapping
wordmarks moved. */
/* ⚠️ THE FLOOR IS THE IMAGE, NOT ZERO (cbapex#132). This said `min-width: 0`,
which let the ANCHOR collapse to nothing while the kept its intrinsic
width — so the logo overflowed its own box and the next nav control rendered
on top of it. Measured on cbconnector, whose lockup is the family's widest:
anchor 0px, image 84px, spill 84px, overlapping a control by 64px at 1100px
and above.
⚠️ The reported cause was a missing `flex-shrink: 0` on the image, and the
measurement says otherwise: the image was already at its full 84px and not
shrinking at all. Removing the anchor's floor is what allows the collapse,
so restoring it is the fix. The span keeps its own `min-width: 0` below, so
the anchor's automatic minimum is now `image + 0` — the wordmark still
ellipsises away to nothing under pressure (which is all cbapex#56 needed),
and the image can no longer be squeezed out from under itself. */
/* ⚠️ AND THAT LAST SENTENCE WAS A GUESS, AND IT WAS WRONG (2026-09-07, the
family's first Assay sweep). A flex item's automatic minimum is its
min-content size, and a child's `min-width: 0` does not lower the child's
min-content CONTRIBUTION — it only lets the child be shrunk once the parent
is being laid out. So `min-width: auto` here floored the anchor at
image + gap + THE WHOLE NAME: measured on the kit's own Feedback screen at
390px, cbvmod's anchor 238px (69 image + 160 "VICTORY MODELING") pushed the
Menu button to x=402, cbsitrep's 188px pushed it to 396 — exactly the
cbapex#56 symptom, back, on the three shared screens, in the two apps
whose name + lockup is widest. The floor is stated in pixels now: the
image's own floor (2rem, square), so the anchor can shrink to a square
logo and no further — the #132 collapse stays fixed — and the span below
carries a large `flex-shrink`, so the NAME yields first and the logo only
once the name is gone. ⚠️ Scoped to the NARROW header (the `64rem` block
below, where the nav is hidden and the row is mark + three buttons): at
desktop the nav is what yields, as it always has — measured unchanged at
1100 and 1440 under four brands, and a first cut that floored the anchor
at every width shrank cbconnector's lockup from 84px to 54px at 1100 with
nothing overflowing. Fix the width you measured. */
.shell-mark img {
/* ⚠️ It may SHRINK, down to a floor — `0 0 auto` fixed the overlap and made
the sideways scroll worse, because the anchor then claimed the full 84px it
had previously given up (cbconnector 119px → 203px of document overflow at
1100). Both symptoms are the same row being over-full; the question is only
what yields. A logo that scales down is a better answer than a logo with
text on top of it OR a page that scrolls sideways, so it yields — to 2rem,
which is its own height, i.e. it never goes below square. */
height: 2rem;
width: auto;
flex: 0 1 auto;
min-width: 2rem;
object-fit: contain;
}
.shell-mark > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ⚠️ IF THE MARK FAILS TO LOAD, THE NAME TAKES ITS PLACE — and for two apps
that is the difference between a degraded header and an EMPTY one.
`onerror` on every shared screen's hides the image, which is right (a
broken-image glyph in the chrome is worse than no glyph). It is only
sufficient where the span beside it is visible text. cbconnector and cbvmod
ship a LOCKUP — the wordmark is IN the artwork — so their `brand.css`
visually hides that span deliberately, and hiding the image too leaves
`` with nothing in it at all: the way home,
blank.
⚠️ Both apps already solved this ON THEIR OWN PAGES (connector.html and
vmod.html each un-hide the span in their own `onerror`) and neither fix could
reach HERE, because these five screens are the kit's. That is the shape this
family keeps paying for: fixed in the app, still broken in the shared file.
Specificity (0,2,1) beats `brand.css`'s (0,1,1) whatever the load order, so
this wins without `!important` and without brand.css needing to know. */
.shell-mark.is-markless > span {
position: static;
width: auto;
height: auto;
clip: auto;
clip-path: none;
overflow: visible;
margin: 0;
}
/* ══ THE APEX SWITCHER — moved out (cbapex#23) ══════════════════════════════
Its styling now lives in `apex-switcher.css`, because the switcher travels to
pages that do not wear this frame at all — cbnight's Loom-descended pages,
whose chrome is cbloom's `#hdr`. What stays HERE is the one thing that is
genuinely this header's business: where Apps sits among its neighbours, in
the narrow `order` block near the bottom of this file.
⚠️ Do not restate an `.apex-*` rule in this file. A shadow copy that loads
later WINS, and a fix in the original is then silently overridden in exactly
one place — the failure written up at length in cbnight's night.css. */
.shell-nav {
display: flex;
gap: 0.9rem;
margin-left: auto;
/* ⚠️ IT MUST BE ABLE TO YIELD, AND IT COULD NOT (cbapex#132). With neither
`flex-wrap` nor `min-width`, this nav can only push: measured on
cbconnector at 1100px its five children came to 954px of a 1203px header,
and the overspill went to the DOCUMENT as sideways scroll rather than to
the nav as a second line. Wrapping trades a horizontal scrollbar for a
taller header, which is the better failure — and it is what the reporter
was already seeing on his machine ("COPY TOKEN wrapped to two lines"),
where a wider mono face pushed the row over sooner. */
flex-wrap: wrap;
min-width: 0;
row-gap: 0.35rem;
}
/* ⚠️ GROUPED, NOT COPIED. `.shell-nav-token` is a