/* ============================================================================
corner.css — the platform corner. ONE definition, worn by every app.
Upper-right is the platform: what is waiting, bookmarks, support, your
account. It is meant to be identical everywhere, and until now it was not —
because there were two copies of these rules. This file held one, styles.css
held the other, and NO PAGE EVER LOADED BOTH: the landing page and Stylus got
styles.css's copy, Portfolio got this one. Two copies that never meet do not
fight; they drift. Measured on the same markup, they had already drifted 12
computed properties apart, including an avatar that rendered as black
initials on a transparent disc (see the palette note below).
So this file is now the BASE that every surface loads, styles.css keeps only
what is genuinely its own, and the landing page links both.
TWO RULES FOR EDITING THIS FILE, both load-bearing:
1. SELECTORS STAY UNSCOPED. They were `.hub-bar-right .hub-icbtn` here. They
cannot be: js/ui.js builds the Stylus and console account corner as
`.tb-acct` containing BARE `.hub-icbtn` and `.hub-me`, nowhere near a
`.hub-bar-right`. Re-adding that prefix strips the topbar account button
back to a UA button — and the hub and Portfolio would still look fine, so
it would pass review.
2. THIS FILE LOADS BEFORE styles.css. Both are equal specificity and media
queries add none, so styles.css only wins by source order. It has to:
`@media (max-width:520px){.hub-icbtn{width:38px}}` beats the 34px here
only because it comes later. Reverse the two s in index.html and the
phone corner silently shrinks.
EVERY COLOUR GOES THROUGH A FALLBACK, because a host that has never heard of
Opus Bench's tokens would otherwise render an INVISIBLE corner rather than an
unstyled one — the worst failure available, since it looks like nothing is
wrong. The literals are the landing page's own light-theme values, so a
token-less host lands on the same design rather than a different one.
========================================================================= */
/* THE AVATAR PALETTE, AND WHY IT IS DECLARED HERE.
corner.js writes the disc's colour INLINE — `background:var(--au-N)` — with
no fallback of its own. On a host that does not define --au-N that inline
declaration is invalid at computed-value time, which makes the property
transparent AND, because it is inline, beats any stylesheet rule underneath
it. The old `background: var(--au-1, …)` below could never fire. Portfolio's
avatar was therefore a transparent disc with black text, while this file's
own comment claimed a token-less host "still gets a legible disc from here".
Defining the tokens themselves fixes it at the source: the inline var()
resolves, so it no longer collapses. Declared FIRST so any host that defines
its own palette — the landing page does, in both themes — simply wins on
source order. */
:root {
--au-1: #1f5fbf; --au-1-bg: #e7effc;
--au-2: #a3341f; --au-2-bg: #fdeee9;
--au-3: #1d7a52; --au-3-bg: #e6f5ee;
--au-4: #7a3fa8; --au-4-bg: #f3ebfa;
--au-5: #96631a; --au-5-bg: #fbf0dc;
--au-6: #00707f; --au-6-bg: #e2f4f6;
--au-7: #a82a6a; --au-7-bg: #fdeaf3;
--au-8: #41567a; --au-8-bg: #eceff5;
}
@media (prefers-color-scheme: dark) {
:root {
--au-1: #7fb0f5; --au-1-bg: #10203a;
--au-2: #f0917c; --au-2-bg: #3a1710;
--au-3: #63cb9c; --au-3-bg: #0d2b1f;
--au-4: #c3a2ef; --au-4-bg: #241536;
--au-5: #dfae5c; --au-5-bg: #33230b;
--au-6: #5cc3ce; --au-6-bg: #06272b;
--au-7: #ef8fbc; --au-7-bg: #360f25;
--au-8: #9fb2d4; --au-8-bg: #161d2b;
}
}
.hub-bar-right {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--sp-3, 6px);
}
/* Controls of the SAME size, of which exactly one is filled. The avatar is the
only filled thing in the bar because it is the only one that is an identity;
the rest are annotations until you touch them. */
.hub-icbtn {
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
color: var(--ob-ink, #2c5180);
cursor: pointer;
display: grid;
place-items: center;
font-family: inherit;
text-decoration: none; /* they are outside the hub */
/* Explicit, because a