` on a gold rule. The
heading moved into the application header band (`.topbar h1`), because the
page name was being rendered in both places and an owner opening Components
read COMPONENTS in the band and COMPONENTS again right beneath it. What is
left is one line of prose and the page's controls, so the rule goes with the
heading — the band above already draws one, and two rules twenty pixels apart
is a box around nothing. `.page-header h1` is gone with it: the component
emits no heading, so a rule for one could only be reached by reintroducing
the defect. */
.page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--cj-space-5);
margin-bottom: var(--cj-space-5);
}
.page-subtitle { margin: 0; color: var(--cj-muted); }
/* Section titles inside panels share the display face, one step down. Applied
by element rather than by class so a card written before the HUD landed still
gets the treatment. */
.card > h2,
.detail-section-header h2,
.form-section > h2,
.modal-header h2 {
font-family: var(--cj-font-display);
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
}
/* `x-page-header` emits exactly `
`, so the spacing
between actions has to come from here. It previously existed only inside the
mobile media query, which left desktop with no `gap` at all: the templates
are minified, so there was not even inter-tag whitespace between two buttons
and they rendered touching. */
.page-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cj-space-2);
}
/* -------------------------------------------------------------- panels ---- */
/* One panel shape, for every panel in Cajella.
*
* A Cajella panel is square-sided with a small 45° cut at each corner, a 1px
* edge that follows the cut, a flat dark face, and no shadow. That shape is the
* thing a person recognises before they read a word on the screen, so it is
* declared once, here, over the list of classes that are panels — not per page,
* and not per module.
*
* Why two pseudo-elements rather than `border` + `clip-path`:
*
* A `border` cannot follow a clipped corner. Clip a bordered box and the
* straight runs of border survive while the diagonal comes out unlined — the
* edge appears to stop short of the corner, which reads as a rendering fault
* rather than as a cut. So the edge is drawn as a *shape*: `::before` is the
* panel's silhouette filled with the edge colour, and `::after` is the same
* silhouette inset by 1px filled with the face colour. What is left showing
* between them is a 1px line along every side including the two diagonals.
*
* Why `isolation: isolate` and negative z-index rather than a wrapper element:
*
* Both pseudo-elements have to paint *behind the panel's content*. Inside a
* stacking context, negative-z-index descendants paint after the element's own
* background and before its in-flow content, which is exactly the layer a
* panel background belongs in — and it needs no extra element. That matters
* more than it sounds: this treatment lands on markup that already exists and
* several of those panels are pinned byte for byte by tests
* (`