/* Detail-page information header. Imported by AppDetailHeader.tsx — see the `detail-page-header` skill. Deliberately NOT a bordered grid and not a box of its own: short values (8 · 0 · —) in a 4-column bordered table read as a spreadsheet of random gaps, and the page already frames the screen. What is left is the NAME reading as the page title, the counter strip collapsed onto one right-anchored line beside it, the tag row under it, and the machine detail as one muted closing line. CSS MODULE: class names are hashed per-build, so they can never collide with an identically-named class from another federated MFE sharing this document . */ .header { display: flex; flex-direction: column; gap: 8px; width: 100%; } .top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 32px; width: 100%; } .titleBlock { display: flex; flex: 1 1 320px; flex-direction: column; gap: 2px; min-width: 0; } /* 20px/28px — the name leads the block so the counter line beside it reads as supporting detail. #000080 is the org title colour; change it only in a module whose page titles are not navy. */ .name { font-size: 20px; font-weight: 600; line-height: 28px; color: #000080; overflow-wrap: anywhere; } .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; } /* Long paths / keys wrap instead of stretching the header (or scrolling the page sideways). */ .mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; color: #5a6472; overflow-wrap: anywhere; } .muted { font-size: 12px; color: #8c95a4; } /* ── counters: one line of `Label: value` pairs, right-anchored ── Grey #6b7280 label at body size, value in the normal text colour, 16px between pairs. Deliberately NOT an uppercase small-caps label + oversized bold value — beside a 20px name that reads as a second, competing heading. */ .statLine { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 16px; color: #6b7280; font-size: 13px; } .statInline { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; } .statLabel { color: #6b7280; white-space: nowrap; } .statValue { color: rgb(0 0 0 / 88%); white-space: nowrap; } /* Kept for modules with long values; prefer printing every counter at one size where possible. */ .statValueSmall { font-size: 12px; } /* Value tones — the org palette (#1fba00 success, #0069ba link, amber warning). */ .ok { color: #1fba00; } .info { color: #0069ba; } .warn { color: #d46b08; } /* `muted` doubles as a tone: an em dash standing in for "nothing yet" must not read as a real value. */ /* Below ~992px (13"/15" laptops, and the ~1100px content area when embedded in appshell) the counter strip drops onto its own full-width line instead of being squeezed against the name. */ @media (max-width: 991px) { .statLine { width: 100%; justify-content: flex-start; } }