inside , and that wrapper also carries the pip and pop
slots — so the ported .topbar rule put display:flex and space-between on the
wrapper and pushed the announcement slots out to the right while the real
bar collapsed to its content. The bar styling belongs on .top; the wrapper
goes back to being a plain box. */
html[data-ui="next"] .topbar{display:block;height:auto;padding:0;background:none;border:0;position:sticky;top:0;z-index:40}
html[data-ui="next"] .top{
height:64px;padding:0 28px;display:flex;align-items:center;
justify-content:space-between;background:#090d10ee;
border-bottom:1px solid var(--line-soft);position:relative;z-index:10;
}
html[data-ui="next"] .top-actions{display:flex;align-items:center;gap:19px}
/*
* ...and the same move in light mode, which the rule above forgot.
*
* The generated block lights `.topbar`, because when it was written .topbar
* WAS the bar. Moving the bar styling down to .top left that override behind:
* it still lights the wrapper perfectly, and the wrapper is then covered by a
* .top that is #090d10ee in every theme. The result was a near-black bar on a
* light page with #142a36 lettering on it -- measured at 1.07:1, which is
* text you cannot read.
*
* Worth noting how it hid: `getComputedStyle(document.querySelector('.topbar'))`
* reports the light colour quite correctly, so checking the element the rule
* names says everything is fine. It took elementFromPoint to find that the
* thing actually painting those pixels was a different element.
*/
html[data-ui="next"][data-theme="light"] .top{background:#f4f8fa}
/*
* The shield comes with it. #b9d4e7 is a deliberately dimmed version of the
* wordmark for a dark bar; on a light one it measures 1.44:1 and effectively
* is not there. --muted is the same idea the other way round -- dimmer than
* the wordmark, still legible -- and it tracks the token rather than pinning
* another literal, so it follows if the light palette moves. 5.32:1, the same
* as the "STEAM ACHIEVEMENT TRACKER" line it sits beside.
*/
html[data-ui="next"][data-theme="light"] .brand-mark{color:var(--muted)}
@media (max-width:760px){
html[data-ui="next"] .top{padding:0 16px;height:60px}
html[data-ui="next"] .top-actions{gap:10px}
}
/* The sidebar's three actions. The reference's sidebar has no buttons of its
own — it ends at the view switch — so these are given the look of its
.outline button rather than invented. Measure and refresh are quiet; "what
next?" takes the gold it has always had, being the one that does something
rather than fetching something. */
html[data-ui="next"] .side-buttons{display:grid;gap:8px;margin-top:22px}
html[data-ui="next"] .side-buttons button{
display:flex;align-items:center;justify-content:center;gap:8px;
width:100%;padding:10px 12px;font-size:12px;
border:1px solid var(--line);border-radius:7px;
background:#0d171d;color:#b9c9d9;
}
html[data-ui="next"] .side-buttons button:hover{border-color:#2f4552;color:var(--text)}
html[data-ui="next"] .side-buttons .crate-open{color:var(--gold);border-color:#6b5420;background:#16130c}
html[data-ui="next"] .side-buttons .crate-open:hover{border-color:#937225}
/* ---- the moving parts --------------------------------------------------- */
/* The reference leaves the view switch and the sidebar buttons static. They
are the only controls in that column you press repeatedly, and with no
feedback the press lands on something that looks inert — so they get the
same .15s the reference already uses elsewhere, on the properties that
actually change. Not all: the active state alters border colour and
background together, and transitioning everything makes the selected button
drift into place a beat after the click. */
html[data-ui="next"] .view-switch button,
html[data-ui="next"] .side-buttons button{
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
html[data-ui="next"] .view-switch button:hover{background:#112329;border-color:#2f4552;color:var(--text)}
html[data-ui="next"] .view-switch button svg{transition:transform .25s ease}
/* The grid mark fans out a little on hover; the list mark holds still, because
a list is a list. One moving thing is a hint, two is a fidget. */
html[data-ui="next"] .view-switch button:last-child:hover svg{transform:scale(1.14)}
html[data-ui="next"] .side-buttons .crate-open svg{transition:transform .25s ease}
/* The dice rolls. It is the one control here whose whole point is that it
lands somewhere unpredictable. */
html[data-ui="next"] .side-buttons .crate-open:hover svg{transform:rotate(-18deg) scale(1.08)}
@media (prefers-reduced-motion:reduce){
html[data-ui="next"] .view-switch button,
html[data-ui="next"] .side-buttons button,
html[data-ui="next"] .view-switch button svg,
html[data-ui="next"] .side-buttons .crate-open svg{transition:none}
html[data-ui="next"] .view-switch button:last-child:hover svg,
html[data-ui="next"] .side-buttons .crate-open:hover svg{transform:none}
}
/* ---- the other four pages ----------------------------------------------- */
/* The reference's avatar box is always initials over a flat tint. A row here
may carry a real Steam avatar instead — for somebody who opted into being
listed with one — so the box gets a second state where the picture fills it
and the tint underneath never shows. */
html[data-ui="next"] .player-avatar.has-art{background:#0c151c;border-color:#ffffff22}
html[data-ui="next"] .player-avatar .face-art{display:block;width:100%;height:100%;border-radius:4px;object-fit:cover}
/* The board switch sits beside the player search in the section heading, and
must not be squeezed when the search takes its minimum width. */
html[data-ui="next"] .board-switch{flex-shrink:0}
/* The reference's contributions table holds exactly one row, so it needs no
separator between rows. A real account has as many as it has written. */
html[data-ui="next"] .contribution-row + .contribution-row{border-top:1px solid var(--line-soft)}
html[data-ui="next"] .contribution-title h3 a{color:inherit}
html[data-ui="next"] .contribution-title h3 a:hover{color:var(--cyan)}
/* The game cell crops a wide header image into a portrait tile. A game with no
art at all has to take the same shape, rather than the 145x42 strip the
placeholder uses in a library row. */
html[data-ui="next"] .contribution-game .cover-placeholder{
width:70px;height:82px;padding:4px;
font-size:12px;line-height:1.2;text-align:center;
}
/* The row's last column is the page's own controls — edit, withdraw, take it
back, write it again. They arrive wrapped in .comm-actions and styled as
.btn-ghost by the old stylesheet, so the wrapper is dissolved to make the
buttons children of the actions column, and they are given the look of the
reference's .outline rather than left looking like the page they came from. */
html[data-ui="next"] .contribution-actions > .comm-actions{display:contents}
html[data-ui="next"] .contribution-actions .btn-ghost,
html[data-ui="next"] .contribution-actions .outline{
display:flex;align-items:center;justify-content:center;gap:8px;
padding:8px;font-size:11px;white-space:nowrap;
border:1px solid var(--line);border-radius:7px;
background:#0d171d;color:#b9c9d9;
}
html[data-ui="next"] .contribution-actions .btn-ghost:hover,
html[data-ui="next"] .contribution-actions .outline:hover{border-color:#2f4552;color:var(--text)}
html[data-ui="next"] .contribution-actions .quiet-line{font-size:10px;color:var(--dim);text-align:center}
/* Pressing Edit opens the step editor next to the buttons, in a column about
150px wide — a textarea in that is not an editor. While one is open the
actions cell claims the whole row instead: an explicit grid-column with no
grid-row makes auto-placement drop it onto a line of its own underneath,
which is what the narrow layout already does with it. */
html[data-ui="next"] .contribution-actions:has(.comm-form){grid-column:1/-1}
html[data-ui="next"] .contribution-actions .comm-form{width:100%;text-align:left}
/* .empty-result is a bare centred block in the reference; these pages put a
heading in it. */
html[data-ui="next"] .empty-result h3{color:var(--text);font-size:18px}
html[data-ui="next"] .empty-result p{margin-top:8px}
/* The queue's cards have no reference equivalent — nothing in the reference
lets you read a proposed guide and vote on it. They keep their own layout
and take the panel frame the reference puts round everything else, so they
sit in the new two-column page as panels rather than as bare text. The
accent edge stays: it is what marks a card as waiting on you. */
html[data-ui="next"] .rv-list{margin-top:0}
html[data-ui="next"] .rv-card{border-radius:8px;background:linear-gradient(125deg,#132027aa,#121d2355)}
html[data-ui="next"][data-theme="light"] .rv-card{background:#f0f5f7}
html[data-ui="next"] .rv-more{margin-top:14px;color:var(--dim);font-size:12px}
html[data-ui="next"] .edits-main .empty-result{border:1px solid var(--line);border-radius:8px}
/* The old stat card's corner bloom, which had got loose.
*
* .stat::before is a 150px blurred circle sitting at right:-54px, and the old
* card contains it: .stat is position:relative with its corners clipped. Under
* the flag :where(.stat){all:revert} takes that position away — correctly, the
* reference's figures are flat — but a reset on an element says nothing about
* a rule aimed at its ::before. So the glow stayed, now positioned against the
* page instead of the card, and hung 54px off the right edge of every page
* with a sidebar: a smear in the top corner with a horizontal scrollbar under
* it. The reference's figures have no bloom, so it goes. */
html[data-ui="next"] .stat::before{content:none}
/* The reference's "you" row paints every cell cyan, and its sample player is
never in the top three, so cyan and the medal colour never met. Here they
can, on a small board where you may well be first. The medal belongs to the
rank, whoever is holding it. */
html[data-ui="next"] .you-row td.rank.gold{color:var(--gold)}
/* The sort strip is a joined pill, and .tabs centres its buttons. "Perfect
games" is the one label that wraps to two lines on a narrow screen, which
left the middle segment taller than the two beside it and the pill looking
broken. Stretching costs nothing where nothing wraps. */
html[data-ui="next"] .leader-tabs{align-items:stretch}
/* The board switch is ours — the reference's heading holds only a search and a
select — so the row has one more thing in it than the reference's media
rules were written for, and on a phone the search was crushed to about four
characters. Letting the group wrap puts the switch on its own line instead. */
html[data-ui="next"] .leader-heading .search-controls{flex-wrap:wrap}
html[data-ui="next"] .leader-heading .search{flex:1 1 200px;min-width:0}
/* The game page's heading carries four controls where the reference's carries
one — a search, the sort menu, the spoiler switch and Refresh — so on a
narrow screen the search was squeezed down to its magnifier. Same remedy as
the leaderboard heading: let the group wrap and let the field keep a usable
width. */
html[data-ui="next"] .section-heading .search-controls{flex-wrap:wrap}
html[data-ui="next"] .section-heading .search{flex:1 1 200px;min-width:0}
/* The sort menu in the game page's heading.
*
* It is the site's own dropdown rather than a