` 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); }
/* Back to parent (spec SH-7, approved I-3): one quiet link above the page
header at every width. Muted and small so it never competes with the page's
heading or its actions; a real link, so it keeps the link hover. On a touch
tier it is 44px tall (TI-1, 900 block) and pulled up into the content's top
padding so it costs little height. */
.back-link {
display: inline-flex;
align-items: center;
gap: var(--cj-space-1);
min-height: 32px;
margin-bottom: var(--cj-space-2);
color: var(--cj-muted);
font-size: .86rem;
font-weight: 600;
}
.back-link:hover { color: var(--cj-text); }
.back-link .icon { width: 16px; height: 16px; }
/* 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);
}
/* Why a disabled action is disabled, said where it can be read rather than in a
hover-only tooltip (spec P-2, mobile plan MX-17): the same words as its
`title`, on a line of their own under the actions. */
.page-action-note {
flex-basis: 100%;
color: var(--cj-muted);
font-size: var(--cj-text-sm);
text-align: right;
}
/* -------------------------------------------------------------- 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
* (`