/* LIVE -> PROFILE =============== The sub-tab strip on live.html, and the profile panel it opens. ★★★★★ WHY THE VIEW SWAP IS AN ATTRIBUTE ON AND NOT `hidden` ------------------------------------------------------------------ `_live.mjs` polls `/api/live` on a timer and its `showGate()` writes `body.hidden = out` on the LIVE body EVERY TIME. So a tab script that hid that element by setting `hidden` would have it un-hidden again within seconds, and the profile would appear stacked under a live view that came back on its own. That is not a race that can be won by ordering the two scripts - the poll runs for as long as the page is open. The answer is to swap in a layer `_live.mjs` does not write: `` carries `data-livetab`, this sheet hides whichever body the attribute does not name, and the rule outranks `[hidden]{display:none!important}` from `_seq.css` because `body[data-livetab="profile"] [data-livebody]` is the more specific selector at equal `!important`. On the LIVE tab this sheet says NOTHING about the live body, so its own `hidden` attribute governs exactly as it did before - the signed-out gate still works, untouched. `_live.mjs` IS NOT EDITED BY THIS FEATURE. Not one character. THE RULES THIS SHEET KEEPS -------------------------- 1. The strip is `_rankings.css`'s own two-rail grammar, copied not reinvented: the loud rail is text that lights, with one 2px underline that MOVES between tabs. 2. Every card takes `_term.css`'s `.panel` seat. A page that draws its own kind of box looks bolted on. 3. UNKNOWN IS NOT ZERO. `.pf-dash` is the em dash on a dotted rule, and it is the ONLY thing a card may show for a store that could not be read. 4. AMBER IS A SINGLETON: on this panel it is spent on ACCESS - a live ban or an active strike - and on nothing else. Green stays state. 5. REDUCED MOTION REMOVES THE MOTION, NOT THE INFORMATION. */ /* =========================================================== the tab strip */ .lv-rails { position: relative; z-index: 5; padding: 10px var(--pad) 0; background: rgba(1, 4, 10, .62); backdrop-filter: blur(10px) saturate(1.15); border-bottom: 1px solid rgba(30, 111, 224, .3); } .lv-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid rgba(30, 111, 224, .45); } .lv-tab { position: relative; z-index: 1; appearance: none; background: transparent; border: 0; cursor: pointer; padding: 11px 15px 10px; font: 400 13px/1 var(--mono); letter-spacing: .18em; color: var(--blue-dim); white-space: nowrap; text-shadow: var(--sh-micro); transition: color .16s linear; } .lv-tab:hover { color: #79D9FF; } .lv-tab[aria-selected="true"] { color: #79D9FF; text-shadow: var(--sh-body); } .lv-tab .lv-tn { display: inline-block; margin-right: 9px; color: var(--rule); font: 400 10.5px/1 var(--pixel); letter-spacing: .08em; transition: color .16s linear; } .lv-tab:hover .lv-tn, .lv-tab[aria-selected="true"] .lv-tn { color: var(--blue-hot); } .lv-tab:focus-visible { outline: 1px solid var(--blue-hot); outline-offset: -3px; } .lv-ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--rule), #79D9FF, var(--rule)); box-shadow: 0 0 10px rgba(75, 180, 252, .55); transition: transform .34s cubic-bezier(.16,.84,.28,1), width .34s cubic-bezier(.16,.84,.28,1); pointer-events: none; } /* ============================================================== the swap */ /* See the header. These four lines are the whole mechanism. */ body[data-livetab="profile"] [data-livebody] { display: none !important; } body[data-livetab="profile"] [data-gate] { display: none !important; } body[data-livetab="profile"] .headsec { display: none !important; } body[data-livetab="live"] [data-profilebody] { display: none !important; } /* ============================================================ the profile */ .pf-wrap { position: relative; z-index: 4; } .pf-head { padding-bottom: 0; } .pf-idrow { display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); } .pf-avatar { width: 62px; height: 62px; flex: none; position: relative; border: 1px solid rgba(75, 180, 252, .6); background: #01050B; box-shadow: 0 0 0 1px rgba(1, 5, 11, .9), 0 0 26px -10px rgba(75, 180, 252, .9); } .pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .pf-avatar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(1,4,12,.26) 0 1px, transparent 1px 4px); } .pf-who { min-width: 0; } .pf-who .h2 { margin: 0 0 4px; } .pf-sub { margin: 0; max-width: 62ch; font: 400 12.5px/1.6 var(--read); letter-spacing: .01em; color: var(--blue); text-shadow: var(--sh-body); } .pf-grid { display: grid; gap: var(--pad); padding: var(--pad); grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); align-items: start; } @media (max-width: 420px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } } /* Three cards carry lists that are longer than the rest and read badly at one third width. They ask for two tracks where there is room for them. */ .pf-card.wide { grid-column: span 2; } @media (max-width: 760px) { .pf-card.wide { grid-column: auto; } } .pf-card { position: relative; min-width: 0; border: 1px solid var(--rule); background: rgba(1, 4, 10, .72); backdrop-filter: blur(10px) saturate(1.15); box-shadow: inset 3px 0 0 rgba(75, 180, 252, .55); transition: border-color .2s, box-shadow .2s; } .pf-card:hover { border-color: var(--rule-hot); box-shadow: inset 3px 0 0 rgba(75,180,252,.55), 0 0 40px -18px rgba(61,155,255,.9); } .pf-card::before, .pf-card::after { content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none; border: 1px solid var(--rule-hot); opacity: .9; } .pf-card::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; } .pf-card::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; } .pf-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px 9px; background: rgba(0, 19, 71, .42); border-bottom: 1px solid rgba(30, 111, 224, .28); } .pf-ch h2 { margin: 0; font: 560 13.5px/1 var(--wide); letter-spacing: .08em; color: #79D9FF; text-shadow: var(--sh-body); white-space: nowrap; } .pf-ch .meta { font: 400 10px/1 var(--mono); letter-spacing: .16em; color: var(--blue-dim); text-shadow: var(--sh-micro); white-space: nowrap; } .pf-cb { padding: 4px 0 6px; } /* --------------------------------------------------------- a fact grid --- */ /* Label over value, in a row that wraps. The label is a `.k` in the theme's own micro face; the value is the hot blue at reading size. */ .pf-facts { display: grid; gap: 12px 16px; padding: 12px 13px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } .pf-fact { min-width: 0; } .pf-fact .k { display: block; font: 400 9.5px/1 var(--mono); letter-spacing: .22em; color: var(--rule); text-shadow: var(--sh-micro); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-fact .v { display: block; font: 400 16px/1.15 var(--mono); letter-spacing: .03em; color: #79D9FF; text-shadow: var(--sh-body); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; } .pf-fact .v small { display: block; margin-top: 3px; font: 400 10px/1.4 var(--mono); letter-spacing: .12em; color: var(--blue-dim); text-shadow: var(--sh-micro); } .pf-fact.big .v { font-size: clamp(19px, 2.2vw, 25px); text-shadow: var(--sh-lead); } /* --------------------------------------------------------- the CAREER card -- ★ ITS LABELS ARE THE LONGEST ON THE PAGE AND THE DEFAULT TRACK CLIPPED THEM. `.pf-fact .k` is `nowrap` + `text-overflow: ellipsis` and the shared grid floors at 96px, which is right for KILLS / DEATHS / SESSIONS and turned four of his twelve rows into "SKULLS EXTR…", "HIGHEST GRA…", "OVERCAP KIL…" - caught in a rendered screenshot, not in the markup, because the markup was correct. The fix is a WIDER TRACK on this card only: the label stays on one line, so every value keeps the same baseline as its neighbours (letting the label wrap instead would stagger the row by a line). Nothing else about the card differs from the eleven beside it - same tokens, same rules, no new design language. 150px is measured off the longest label, SKULLS EXTRACTED, at this face and letter-spacing. */ .pf-career .pf-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* THE ONLY WAY A CARD MAY SAY "we could not read this". A dash, on a dotted rule, at the same size - so nothing reflows and nothing reads as a zero. */ .pf-dash { color: var(--rule) !important; border-bottom: 1px dotted var(--rule); padding-bottom: 1px; } .pf-good { color: var(--green) !important; } .pf-warn { color: var(--amber) !important; } .pf-bad { color: var(--red) !important; } /* ------------------------------------------------------------- a list ---- */ .pf-list { list-style: none; margin: 0; padding: 2px 0 0; } .pf-list li { display: flex; align-items: baseline; gap: 10px; padding: 7px 13px; border-bottom: 1px solid rgba(30, 111, 224, .22); font: 430 12.5px/1.4 var(--mono); letter-spacing: .02em; color: var(--blue); text-shadow: var(--sh-body); } .pf-list li:last-child { border-bottom: 0; } .pf-list .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-list .l small { display: block; font: 400 10px/1.5 var(--mono); letter-spacing: .13em; color: var(--blue-dim); text-shadow: var(--sh-micro); } .pf-list .r { margin-left: auto; white-space: nowrap; color: var(--blue-hot); font-variant-numeric: tabular-nums; } .pf-list .r.dim { color: var(--blue-dim); font-size: 11px; letter-spacing: .1em; } .pf-list .r.plus { color: var(--green); } .pf-list .r.minus { color: var(--amber); } .pf-list.scroll { max-height: 320px; overflow-y: auto; scrollbar-width: thin; } /* -------------------------------------------------------- a bar row ------ */ /* The theme's instrument: a 4px track that IS a scale - a repeating graticule plus a 1px baseline - with a bare pinned inside it, so an empty gauge reads as an instrument rather than as a missing thing. */ .pf-bars { padding: 8px 13px 12px; display: grid; gap: 9px; } .pf-bar .t { display: flex; align-items: baseline; gap: 8px; font: 400 11.5px/1.3 var(--mono); letter-spacing: .04em; color: var(--blue); text-shadow: var(--sh-body); } .pf-bar .t b { margin-left: auto; font-weight: 400; color: var(--blue-hot); font-variant-numeric: tabular-nums; } .pf-track { position: relative; display: block; height: 4px; margin-top: 5px; background: repeating-linear-gradient(90deg, rgba(30, 111, 224, .35) 0 1px, transparent 1px 7px); border-bottom: 1px solid var(--rule); } .pf-track i { position: absolute; left: 0; top: 1px; bottom: 0; display: block; background: var(--blue-hot); box-shadow: 0 0 9px rgba(75, 180, 252, .75); } /* A track with no reading behind it is DOTTED and empty - never a bar at 0%, which reads as a real reading of nothing. */ .pf-track.unknown { border-bottom-style: dotted; } /* ------------------------------------------------------- a tier stack ---- */ .pf-tiers { padding: 8px 13px 12px; display: grid; gap: 7px; } .pf-tier { display: flex; align-items: baseline; gap: 10px; padding-left: 10px; border-left: 2px solid var(--rule); font: 400 12px/1.5 var(--mono); letter-spacing: .06em; color: var(--blue); text-shadow: var(--sh-body); } .pf-tier b { margin-left: auto; font-weight: 400; color: var(--blue-hot); font-variant-numeric: tabular-nums; } .pf-tier[data-tier="5"] { border-left-color: #4BB4FC; } .pf-tier[data-tier="6"] { border-left-color: #79D9FF; } .pf-tier.overcap { border-left-color: var(--amber); color: var(--amber); } .pf-tier.overcap b { color: var(--amber); } /* ------------------------------------------------------- empty + refusal - */ .pf-empty { padding: 20px 14px 22px; text-align: center; } .pf-empty .mark { display: block; margin: 0 auto 11px; width: 34px; height: 34px; border: 1px dotted var(--rule); } .pf-empty h3 { margin: 0 0 6px; font: 400 11px/1 var(--mono); letter-spacing: .2em; color: var(--blue-dim); text-shadow: var(--sh-micro); } .pf-empty p { margin: 0 auto; max-width: 40ch; font: 400 11.5px/1.7 var(--read); color: var(--blue-dim); text-shadow: var(--sh-micro); } .pf-gate { padding: var(--pad); } .pf-foot { display: block; padding: 0 var(--pad) var(--pad); color: var(--rule); font-size: 10.5px; letter-spacing: .1em; line-height: 1.9; } @media (prefers-reduced-motion: reduce) { .lv-ink { transition: none; } .lv-tab, .pf-card { transition: none; } }