/* obsidian.css — the finish layer. * * Loaded last, after pages.css. Nothing here introduces a component; everything here is the final * pass over components the six sheets before it already built. It exists because the polish it * carries is cross-cutting — a scrollbar rule, a stacking order, a hover contract — and the * alternative was the same three declarations repeated across six files that disagree about them. * * Four jobs, in order: * * 1. ONE STACKING ORDER. Six sheets each picked a z-index in isolation and the numbers stopped * describing an order. They are tokens now, declared once, and every layer reads from them. * 2. ONE SCROLLBAR. The native bar is a light-grey slab on a near-black page and it was the * loudest thing on several screens. * 3. ONE HOVER CONTRACT. Cards lifted 2px, 3px or 4px depending on which sheet built them. * 4. ONE MEASURE FOR MONEY. Currency is tabular, non-wrapping and given a box it cannot escape, * because a balance that reflows the header when it crosses a magnitude is a layout bug that * only shows up on the players who have the most money. */ /* ══════════════════════════════════════════════════════════════════════════════════════════════ 1. THE STACKING ORDER ══════════════════════════════════════════════════════════════════════════════════════════════ The defect this fixes is specific and it only appeared under 1080px. `.top` carried `z-index: 80` and `backdrop-filter`, either of which alone makes it a stacking context. Everything inside it — the account menu at 90, the header tooltips at 60 — is therefore capped at 80 relative to the root, no matter what number it declares for itself. The mobile chat drawer is a sibling at the root with `z-index: 90`. So the drawer won, and on a phone the account menu and every header tooltip opened UNDERNEATH the chat rail while appearing to be on top of everything else in the header. Raising the numbers inside `.top` could never have fixed it; the cap is the context, not the child. The header itself has to outrank the drawer, and then its children inherit that win. The scale below is deliberately sparse. Gaps are room to insert a layer without renumbering. */ :root { --z-bg: -1; /* the fixed page backdrop */ --z-base: 1; /* .shell and ordinary flow */ --z-chat: 70; /* the chat drawer, when it is a drawer */ --z-tabbar: 75; /* the mobile tab bar */ --z-top: 100; /* the header — ABOVE the drawer, so its menus are too */ --z-portal: 120; /* menus re-parented to : the Cases disclosure */ --z-overlay: 160; /* reel, cutscene, reveal — the full-screen films */ --z-toast: 200; /* level-up and every other announcement */ --z-dev: 210; /* the developer bench, over its own overlays */ --z-skip: 300; /* the skip link, which must beat literally everything */ /* The finish tokens the rest of this sheet spends. */ --ob-line: rgba(255, 215, 0, .15); /* the 1px gold hairline, at rest */ --ob-line-hi: rgba(255, 215, 0, .34); /* the same hairline, lit */ --ob-glow: 0 0 15px rgba(255, 170, 0, .25); --ob-lift: translateY(-2px); --ob-ease: cubic-bezier(.22, 1, .36, 1); --ob-quick: 150ms ease-in-out; --ob-gap: 12px; /* inside a component */ --ob-gap-lg: 16px; /* between components */ --ob-track: #121216; --ob-thumb: #2a2a32; --ob-thumb-hi: #3a3a45; /* ── the radius scale ── * * Eight distinct corner radii were live at once — 3, 5, 7, 8, 14, 20, 50% and both 999px and * 9999px, which are the same pill spelled two ways. 3 against 5 against 7 is not a distinction * anybody can see; it is just three components disagreeing. * * app.css argues for a crisp small corner and it is right — "square corners are what the game * does", and 3px keeps that crispness without reading as a forgotten property. That decision is * preserved; what changes is that the crisp tier is now ONE value instead of three. 4px is the * same corner to the eye and it sits on the scale, so the tier stops drifting. * * Three steps, and the two shapes: crisp control, softer inner surface, glass panel. */ --r-crisp: 4px; --r-soft: 8px; --r-panel: 14px; } /* Repointed rather than edited at the definition, so the reasoning app.css and surface.css each wrote for their own value stays readable next to the value it explains. */ :root { --r: var(--r-crisp); --r-s: var(--r-crisp); --r-lg: var(--r-soft); } .bg { z-index: var(--z-bg); } .shell { z-index: var(--z-base); } .top { z-index: var(--z-top); } .tabdrop__menu { z-index: var(--z-portal); } .rvl, .reel, .cut { z-index: var(--z-overlay); } .toasts { z-index: var(--z-toast); } #devRoot { z-index: var(--z-dev); } .skip { z-index: var(--z-skip); } @media (max-width: 1080px) { .chat { z-index: var(--z-chat); } .tabs { z-index: var(--z-tabbar); } } /* Inside the header the numbers are now free to mean what they say, because the context they sit in outranks everything they used to lose to. */ .acct .menu { z-index: 20; } .ihint::after { z-index: 30; } /* The film overlays live at the document root, not inside `.shell`, but nothing enforced that and a stray `transform` on an ancestor would turn one of them into a containing block and clip a full-screen overlay to a column. `position: fixed` plus an explicit inset states the intent; the isolation keeps each film's internal layers out of everybody else's order. */ .rvl, .reel, .cut { isolation: isolate; } /* `