/* THE TOPBAR AND THE PAGE COLUMN for an app WITHOUT a sidebar — the Hub and Device Manager (backlog S207; moved here from apps/hub/public/css/hub.css on 2026-10-28, at the maintainer's "do 8"). The Asset Manager has a sidebar shell of its own and its own .topbar, so it does NOT load this file: it is linked by an app's header through `appStyles`, before the app's own sheet, which is exactly where these rules sat inside hub.css — same selectors, same place in the cascade, so no theme's override and no app rule ranks differently. Until 2026-10-28 these rules lived in the Hub's own stylesheet, and Device Manager carried a copy that had drifted: it lacked the 36px controls and the Appearance trigger's fixed width under 400px. A fourth app would have copied one of the two. Structure only, like chrome.css: every colour is a token, so the themes re-pitch the bar. The comments carry the measurements behind each number (S119, S121, S162) — "The Hub" in them is the app's word in the bar; an app with a longer name yields its word earlier in its own sheet (Device Manager's does, at 480px). */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: calc(0.5rem + var(--safe-top)) calc(1.25rem + var(--safe-right)) 0.5rem calc(1.25rem + var(--safe-left)); background: var(--pico-card-background-color); border-bottom: 1px solid var(--pico-muted-border-color); position: sticky; top: 0; z-index: 20; } .topbar-brand { font-family: var(--heading-font-family); font-weight: 700; font-size: 1.2rem; color: var(--pico-color); text-decoration: none; letter-spacing: 0.01em; } .topbar-brand:hover { color: var(--pico-primary); text-decoration: none; } /* THE APP'S OWN MARK, SIZED TO THE ROW (2026-09-22). `chrome.css` dropped the hairline between the SCP logo and this, so the three parts are one lockup — and a 1.25rem glyph beside a 1.6rem logo and a 1.2rem wordmark read as a bullet rather than as the Hub's mark. 1.75rem makes it the tallest thing in the row, which is what "even more prominent" asked for, and its hover animation (the spokes rotating, chrome.css's APP GLYPHS block) now fires from anywhere in the lockup because the whole thing is one . */ .topbar .topbar-brand .app-glyph { --glyph-size: 1.75rem; margin-right: 0.5rem; } .topbar-brand-word { white-space: nowrap; } /* The SCP logo (chrome/brand) is the topbar's first child since 2026-09-20, which made it three children under `space-between` and floated "The Hub" to the centre of the bar (measured). An auto margin outranks space-between, so this keeps the logo and the Hub's own mark together at the left and the controls at the right, as before. */ .topbar .topbar-brand { margin-right: auto; } /* THE SEARCH SITS WITH THE CONTROLS (S162, 2026-10-02). It follows the brand in the markup, and under 400px the brand yields — so with no margin of its own `space-between` floated the magnifier into the middle of the bar (seen at 320 and 390). An auto margin here and the brand's add up into one gap between them, which holds the search against the menus at every width. */ .topbar .topbar-search-slot { margin-left: auto; } @media (max-width: 768px) { .topbar .topbar-search-slot + .topbar-hub { margin-left: 0; } } /* and on a tablet the BOX gives, not the brand: from 770 to 796px the brand was the item that shrank, so the mark sat above "The Hub" and the bar grew to 76px (measured). The box's input already shrinks (chrome.css); the slot around it has to be allowed to. */ @media (min-width: 769px) { .topbar:has(.topbar-search-slot) .topbar-brand { flex-shrink: 0; } .topbar .topbar-search-slot { min-width: 0; } } /* The Appearance control was designed for the foot of the Asset Manager's sidebar (default variant) and for a pre-auth strip (page variant). In the Hub's topbar it sits in the flex row with the menus, so it must not float out of flow, and its panel opens under the topbar at the right. */ .topbar .appearance-page { position: static; } .topbar .appearance-panel { position: fixed; top: calc(3.75rem + var(--safe-top)); right: calc(1rem + var(--safe-right)); left: auto; bottom: auto; } .main { max-width: 1100px; margin: 0 auto; padding: 1.5rem calc(1.25rem + var(--safe-right)) calc(4rem + var(--safe-bottom)) calc(1.25rem + var(--safe-left)); } /* A PHONE-WIDTH TOPBAR (2026-09-21, from the device matrix). At 320–430px the bar holds the SCP logo, the Hub's mark, the Appearance trigger, the waffle and the avatar; with the desktop gap and padding it ran 9–56px past the edge (measured on five phone widths, worst at 320). Tighter gap and padding first; under 400px the word "The Hub" yields too — the hexagon glyph is the mark, and the logo beside it already says whose — kept in the tree for a screen reader, moved off-screen, the same way the Appearance label goes. */ @media (max-width: 560px) { .topbar { gap: 0.5rem; padding-left: calc(0.75rem + var(--safe-left)); padding-right: calc(0.75rem + var(--safe-right)); } .topbar-brand { font-size: 1.05rem; } .topbar-hub { margin-left: 0.25rem; } /* THE GLYPH IS 1.75rem FOR THE DESK LOCKUP AND THAT IS TOO MUCH ROW HERE (2026-09-22, S121). S119 grew it so it would be the tallest thing in a 1366px topbar; on a phone the same 28px is 8px the wordmark needs, and it was part of what pushed "The Hub" onto a second line between 401 and 420px. 1.3rem keeps it clearly the app's mark beside a 1.05rem wordmark without taking the room the words need. */ .topbar .topbar-brand .app-glyph { --glyph-size: 1.3rem; margin-right: 0.4rem; } } /* THE BAND NOBODY HAD MEASURED: 401–430px (2026-09-22, S121, reported by the maintainer from a live phone — "It looks crammed in the top"). Below 400 the wordmark yields entirely (the block after this one). Above ~430 there is room for it. In between, it was SHOWN and did not fit, so `.topbar-brand` wrapped and the whole bar went from 57px to 71px with the glyph above the words — measured at 402px and 412px. AND THE ROOT CAUSE IS A SIBLING THAT WAS ALREADY FIXED. chrome.css's Appearance-label rule carries this exact lesson, dated 2026-09-21: "560px, not 400: the device matrix measured the Hub's bar 34px past the edge on a Pixel 7 (412px) and 16px on an iPhone 15 Pro Max (430px) — both above 400." That rule was raised to 560 and THIS one, two declarations away and about the same row on the same devices, was left at 400. One breakpoint was corrected and its sibling was not, which is the repo's own "absence is not a decision" in its cheapest possible form: the comparison was one screenful away. 400 was not a wrong number when it was chosen for 320 and 390. It is wrong now because the phones people hold are 402, 412, 414, 428 and 430, and every one of them sat in the gap. The fix is to make the words fit rather than to take them away: at 0.95rem "The Hub" is about 59px, and the narrowest phone in the band has 98px of brand to spend against 21 + 6 + 59. Measured after: 57px at every width. */ @media (max-width: 430px) { .topbar-brand { font-size: 0.95rem; } .topbar .topbar-brand .app-glyph { --glyph-size: 1.2rem; margin-right: 0.35rem; } } @media (max-width: 400px) { /* BELOW 400px THE HUB'S MARK YIELDS WHOLE, not just its word (2026-10-01, the hostile UX test B-26, S163 item 13 — Claude's call, at the maintainer's "You decide"). With only the word hidden, an unexplained 25px glyph sat beside the SCP logo, and both went to "/". The logo is the one home link at this width; "The Hub" is in the page title, and from 401px up the mark and its word are back (the 430px block above makes them fit). */ .topbar .topbar-brand { display: none; } /* Four round controls since the help button (2026-09-21): at 320px the cluster ran 13px past the edge. No gap between them and 36px targets keep the row inside a 320px phone — measured; 36px is still above the 24px WCAG minimum, and the icons are unchanged. */ .topbar { gap: 0.5rem; } .topbar-hub { gap: 0; margin-left: 0; } .topbar .hub-help-button, .topbar .hubmenu-icon-button, .topbar .hubmenu-avatar-button { width: 36px; } /* and the Appearance trigger keeps its width instead of being squeezed until its chevron wraps under the icon (measured at 320px: a 46px trigger on two lines). THE CHEVRON-HIDING MOVED (2026-09-22, S121) into chrome.css beside the rule that hides the LABEL, at that rule's own 560px — the two belong together and being in two files at two numbers is how a 402px phone came to show an icon with a stray `>` after it. */ .topbar .appearance-page { flex: 0 0 auto; } } /* AND THE SEARCH TAKES ROOM, so two things yield where it is shown (S162, 2026-10-02, measured with the magnifier and the box in the bar). The bar above was sized for logo + mark + Appearance + three round controls; the search adds 40px on a phone and ~290px on a tablet. - 401–430px: "The Hub" wrapped onto two lines again at 412 — S121's band, the 40px it had to spare now spent on the magnifier. The mark yields here as it does under 400 (the block above): the SCP logo is the home link. - up to 1099px: the bar ran past the edge from 561px (the magnifier) and on a tablet (the box, 37px over at 820), wrapping "The Hub" and the Appearance chevron. The Appearance WORD yields, as it does on a phone (chrome.css, 560px): the icon is the control, the word is kept for a screen reader. Only where a search is shown — a person with no search (self-service, no app) keeps the bar exactly as it was. */ @media (max-width: 430px) { .topbar:has(.topbar-search-slot) .topbar-brand { display: none; } } @media (max-width: 1099.98px) { .topbar:has(.topbar-search-slot) .topbar-hub .appearance-trigger-inner { white-space: nowrap; } .topbar:has(.topbar-search-slot) .topbar-hub .appearance-trigger-inner > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .topbar:has(.topbar-search-slot) .topbar-hub .appearance-trigger::after { display: none; } }