/* Shared exchange UI styles — pairs with js/exchange-ui.js and css/fonts.css (the 'metropolis' faces). Palette declared here so every page (landing included) renders these elements identically. */ :root { --xg-black: #010101; --xg-slate: #424242; --xg-silver: #b2b2b2; --xg-white: #ffffff; --xg-gold: #c5b358; --xg-green: #54d738; --xg-red: #ff453a; --xg-mono: 'SF Mono', 'Menlo', 'Consolas', monospace; /* The App Store badge, inlined: a CSS background on an off-screen element is fetched lazily and the menu's badge could pop in late (a preload helped but not reliably) — a data URI can never arrive late. Source asset: images/icons/app_store.svg. */ --xg-badge: url("data:image/svg+xml;base64,PHN2ZyBpZD0ibGl2ZXR5cGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjExOS42NjQwNyIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDExOS42NjQwNyA0MCI+CiAgPHRpdGxlPkRvd25sb2FkX29uX3RoZV9BcHBfU3RvcmVfQmFkZ2VfVVMtVUtfUkdCX2Jsa180U1ZHXzA5MjkxNzwvdGl0bGU+CiAgPGc+CiAgICA8Zz4KICAgICAgPGc+CiAgICAgICAgPHBhdGggZD0iTTExMC4xMzQ3NywwSDkuNTM0NjhjLS4zNjY3LDAtLjcyOSwwLTEuMDk0NzMuMDAyLS4zMDYxNS4wMDItLjYwOTg2LjAwNzgxLS45MTg5NS4wMTI3QTEzLjIxNDc2LDEzLjIxNDc2LDAsMCwwLDUuNTE3MS4xOTE0MWE2LjY2NTA5LDYuNjY1MDksMCwwLDAtMS45MDA4OC42MjdBNi40Mzc3OSw2LjQzNzc5LDAsMCwwLDEuOTk3NTcsMS45OTcwNyw2LjI1ODQ0LDYuMjU4NDQsMCwwLDAsLjgxOTM1LDMuNjE4MTZhNi42MDExOSw2LjYwMTE5LDAsMCwwLS42MjUsMS45MDMzMiwxMi45OTMsMTIuOTkzLDAsMCwwLS4xNzkyLDIuMDAyQy4wMDU4Nyw3LjgzMDA4LjAwNDg5LDguMTM3NywwLDguNDQ0MzRWMzEuNTU4NmMuMDA0ODkuMzEwNS4wMDU4Ny42MTEzLjAxNTE1LjkyMTlhMTIuOTkyMzIsMTIuOTkyMzIsMCwwLDAsLjE3OTIsMi4wMDE5LDYuNTg3NTYsNi41ODc1NiwwLDAsMCwuNjI1LDEuOTA0M0E2LjIwNzc4LDYuMjA3NzgsMCwwLDAsMS45OTc1NywzOC4wMDFhNi4yNzQ0NSw2LjI3NDQ1LDAsMCwwLDEuNjE4NjUsMS4xNzg3LDYuNzAwODIsNi43MDA4MiwwLDAsMCwxLjkwMDg4LjYzMDgsMTMuNDU1MTQsMTMuNDU1MTQsMCwwLDAsMi4wMDM5LjE3NjhjLjMwOTA5LjAwNjguNjEyOC4wMTA3LjkxODk1LjAxMDdDOC44MDU2Nyw0MCw5LjE2OCw0MCw5LjUzNDY4LDQwSDExMC4xMzQ3N2MuMzU5NCwwLC43MjQ2LDAsMS4wODQtLjAwMi4zMDQ3LDAsLjYxNzItLjAwMzkuOTIxOS0uMDEwN2ExMy4yNzksMTMuMjc5LDAsMCwwLDItLjE3NjgsNi44MDQzMiw2LjgwNDMyLDAsMCwwLDEuOTA4Mi0uNjMwOCw2LjI3NzQyLDYuMjc3NDIsMCwwLDAsMS42MTcyLTEuMTc4Nyw2LjM5NDgyLDYuMzk0ODIsMCwwLDAsMS4xODE2LTEuNjE0Myw2LjYwNDEzLDYuNjA0MTMsMCwwLDAsLjYxOTEtMS45MDQzLDEzLjUwNjQzLDEzLjUwNjQzLDAsMCwwLC4xODU2LTIuMDAxOWMuMDAzOS0uMzEwNi4wMDM5LS42MTE0LjAwMzktLjkyMTkuMDA3OC0uMzYzMy4wMDc4LS43MjQ2LjAwNzgtMS4wOTM4VjkuNTM2MTNjMC0uMzY2MjEsMC0uNzI5NDktLjAwNzgtMS4wOTE3OSwwLS4zMDY2NCwwLS42MTQyNi0uMDAzOS0uOTIwOWExMy41MDcxLDEzLjUwNzEsMCwwLDAtLjE4NTYtMi4wMDIsNi42MTc3LDYuNjE3NywwLDAsMC0uNjE5MS0xLjkwMzMyLDYuNDY2MTksNi40NjYxOSwwLDAsMC0yLjc5ODgtMi43OTk4LDYuNzY3NTQsNi43Njc1NCwwLDAsMC0xLjkwODItLjYyNywxMy4wNDM5NCwxMy4wNDM5NCwwLDAsMC0yLS4xNzY3NmMtLjMwNDctLjAwNDg4LS42MTcyLS4wMTA3NC0uOTIxOS0uMDEyNjktLjM1OTQtLjAwMi0uNzI0Ni0uMDAyLTEuMDg0LS4wMDJaIiBzdHlsZT0iZmlsbDogI2E2YTZhNiIvPgogICAgICAgIDxwYXRoIGQ9Ik04LjQ0NDgzLDM5LjEyNWMtLjMwNDY4LDAtLjYwMi0uMDAzOS0uOTA0MjktLjAxMDdhMTIuNjg3MTQsMTIuNjg3MTQsMCwwLDEtMS44NjkxNC0uMTYzMSw1Ljg4MzgxLDUuODgzODEsMCwwLDEtMS42NTY3NC0uNTQ3OSw1LjQwNTczLDUuNDA1NzMsMCwwLDEtMS4zOTctMS4wMTY2LDUuMzIwODIsNS4zMjA4MiwwLDAsMS0xLjAyMDUxLTEuMzk2NSw1LjcyMTg2LDUuNzIxODYsMCwwLDEtLjU0My0xLjY1NzIsMTIuNDEzNTEsMTIuNDEzNTEsMCwwLDEtLjE2NjUtMS44NzVjLS4wMDYzNC0uMjEwOS0uMDE0NjQtLjkxMzEtLjAxNDY0LS45MTMxVjguNDQ0MzRTLjg4MTg1LDcuNzUyOTMuODg3Nyw3LjU0OThhMTIuMzcwMzksMTIuMzcwMzksMCwwLDEsLjE2NTUzLTEuODcyMDcsNS43NTU1LDUuNzU1NSwwLDAsMSwuNTQzNDYtMS42NjIxQTUuMzczNDksNS4zNzM0OSwwLDAsMSwyLjYxMTgzLDIuNjE3NjgsNS41NjU0Myw1LjU2NTQzLDAsMCwxLDQuMDE0MTcsMS41OTUyMWE1LjgyMzA5LDUuODIzMDksMCwwLDEsMS42NTMzMi0uNTQzOTRBMTIuNTg1ODksMTIuNTg1ODksMCwwLDEsNy41NDMuODg3MjFMOC40NDUzMi44NzVIMTExLjIxMzg3bC45MTMxLjAxMjdhMTIuMzg0OTMsMTIuMzg0OTMsMCwwLDEsMS44NTg0LjE2MjU5LDUuOTM4MzMsNS45MzgzMywwLDAsMSwxLjY3MDkuNTQ3ODUsNS41OTM3NCw1LjU5Mzc0LDAsMCwxLDIuNDE1LDIuNDE5OTMsNS43NjI2Nyw1Ljc2MjY3LDAsMCwxLC41MzUyLDEuNjQ4OTIsMTIuOTk1LDEyLjk5NSwwLDAsMSwuMTczOCwxLjg4NzIxYy4wMDI5LjI4MzIuMDAyOS41ODc0LjAwMjkuODkwMTQuMDA3OS4zNzUuMDA3OS43MzE5My4wMDc5LDEuMDkxNzlWMzAuNDY0OGMwLC4zNjMzLDAsLjcxNzgtLjAwNzksMS4wNzUyLDAsLjMyNTIsMCwuNjIzMS0uMDAzOS45Mjk3YTEyLjczMTI2LDEyLjczMTI2LDAsMCwxLS4xNzA5LDEuODUzNSw1LjczOSw1LjczOSwwLDAsMS0uNTQsMS42Nyw1LjQ4MDI5LDUuNDgwMjksMCwwLDEtMS4wMTU2LDEuMzg1Nyw1LjQxMjksNS40MTI5LDAsMCwxLTEuMzk5NCwxLjAyMjUsNS44NjE2OCw1Ljg2MTY4LDAsMCwxLTEuNjY4LjU0OTgsMTIuNTQyMTgsMTIuNTQyMTgsMCwwLDEtMS44NjkyLjE2MzFjLS4yOTI5LjAwNjgtLjU5OTYuMDEwNy0uODk3NC4wMTA3bC0xLjA4NC4wMDJaIi8+CiAgICAgIDwvZz4KICAgICAgPGcgaWQ9Il9Hcm91cF8iIGRhdGEtbmFtZT0iJmx0O0dyb3VwJmd0OyI+CiAgICAgICAgPGcgaWQ9Il9Hcm91cF8yIiBkYXRhLW5hbWU9IiZsdDtHcm91cCZndDsiPgogICAgICAgICAgPGcgaWQ9Il9Hcm91cF8zIiBkYXRhLW5hbWU9IiZsdDtHcm91cCZndDsiPgogICAgICAgICAgICA8cGF0aCBpZD0iX1BhdGhfIiBkYXRhLW5hbWU9IiZsdDtQYXRoJmd0OyIgZD0iTTI0Ljc2ODg4LDIwLjMwMDY4YTQuOTQ4ODEsNC45NDg4MSwwLDAsMSwyLjM1NjU2LTQuMTUyMDYsNS4wNjU2Niw1LjA2NTY2LDAsMCwwLTMuOTkxMTYtMi4xNTc2OGMtMS42NzkyNC0uMTc2MjYtMy4zMDcxOSwxLjAwNDgzLTQuMTYyOSwxLjAwNDgzLS44NzIyNywwLTIuMTg5NzctLjk4NzMzLTMuNjA4NS0uOTU4MTRhNS4zMTUyOSw1LjMxNTI5LDAsMCwwLTQuNDcyOTIsMi43Mjc4N2MtMS45MzQsMy4zNDg0Mi0uNDkxNDEsOC4yNjk0NywxLjM2MTIsMTAuOTc2MDguOTI2OSwxLjMyNTM1LDIuMDEwMTgsMi44MDU4LDMuNDI3NjMsMi43NTMzLDEuMzg3MDYtLjA1NzUzLDEuOTA1MS0uODg0NDgsMy41Nzk0LS44ODQ0OCwxLjY1ODc2LDAsMi4xNDQ3OS44ODQ0OCwzLjU5MS44NTExLDEuNDg4MzgtLjAyNDE2LDIuNDI2MTMtMS4zMzEyNCwzLjMyMDUxLTIuNjY5MTRhMTAuOTYyLDEwLjk2MiwwLDAsMCwxLjUxODQyLTMuMDkyNTFBNC43ODIwNSw0Ljc4MjA1LDAsMCwxLDI0Ljc2ODg4LDIwLjMwMDY4WiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgICAgICAgPHBhdGggaWQ9Il9QYXRoXzIiIGRhdGEtbmFtZT0iJmx0O1BhdGgmZ3Q7IiBkPSJNMjIuMDM3MjUsMTIuMjEwODlhNC44NzI0OCw0Ljg3MjQ4LDAsMCwwLDEuMTE0NTItMy40OTA2Miw0Ljk1NzQ2LDQuOTU3NDYsMCwwLDAtMy4yMDc1OCwxLjY1OTYxLDQuNjM2MzQsNC42MzYzNCwwLDAsMC0xLjE0MzcxLDMuMzYxMzlBNC4wOTkwNSw0LjA5OTA1LDAsMCwwLDIyLjAzNzI1LDEyLjIxMDg5WiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICA8cGF0aCBkPSJNNDIuMzAyMjcsMjcuMTM5NjVoLTQuNzMzNGwtMS4xMzY3MiwzLjM1NjQ1SDM0LjQyNzI3bDQuNDgzNC0xMi40MThoMi4wODNsNC40ODM0LDEyLjQxOEg0My40MzhaTTM4LjA1OTEsMjUuNTkwODJoMy43NTJsLTEuODQ5NjEtNS40NDcyN2gtLjA1MTc2WiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik01NS4xNTk2OSwyNS45Njk3M2MwLDIuODEzNDgtMS41MDU4Niw0LjYyMTA5LTMuNzc4MzIsNC42MjEwOWEzLjA2OTMsMy4wNjkzLDAsMCwxLTIuODQ4NjMtMS41ODRoLS4wNDN2NC40ODQzOGgtMS44NTg0VjIxLjQ0MjM4SDQ4LjQzMDJ2MS41MDU4NmguMDM0MThhMy4yMTE2MiwzLjIxMTYyLDAsMCwxLDIuODgyODEtMS42MDA1OUM1My42NDUsMjEuMzQ3NjYsNTUuMTU5NjksMjMuMTY0MDYsNTUuMTU5NjksMjUuOTY5NzNabS0xLjkxMDE2LDBjMC0xLjgzMy0uOTQ3MjctMy4wMzgwOS0yLjM5MjU4LTMuMDM4MDktMS40MTk5MiwwLTIuMzc1LDEuMjMwNDctMi4zNzUsMy4wMzgwOSwwLDEuODI0MjIuOTU1MDgsMy4wNDU5LDIuMzc1LDMuMDQ1OUM1Mi4zMDIyNywyOS4wMTU2Myw1My4yNDk1MywyNy44MTkzNCw1My4yNDk1MywyNS45Njk3M1oiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgICA8cGF0aCBkPSJNNjUuMTI0NTMsMjUuOTY5NzNjMCwyLjgxMzQ4LTEuNTA1ODYsNC42MjEwOS0zLjc3ODMyLDQuNjIxMDlhMy4wNjkzLDMuMDY5MywwLDAsMS0yLjg0ODYzLTEuNTg0aC0uMDQzdjQuNDg0MzhoLTEuODU4NFYyMS40NDIzOEg1OC4zOTV2MS41MDU4NmguMDM0MThBMy4yMTE2MiwzLjIxMTYyLDAsMCwxLDYxLjMxMiwyMS4zNDc2NkM2My42MDk4OCwyMS4zNDc2Niw2NS4xMjQ1MywyMy4xNjQwNiw2NS4xMjQ1MywyNS45Njk3M1ptLTEuOTEwMTYsMGMwLTEuODMzLS45NDcyNy0zLjAzODA5LTIuMzkyNTgtMy4wMzgwOS0xLjQxOTkyLDAtMi4zNzUsMS4yMzA0Ny0yLjM3NSwzLjAzODA5LDAsMS44MjQyMi45NTUwOCwzLjA0NTksMi4zNzUsMy4wNDU5QzYyLjI2NzExLDI5LjAxNTYzLDYzLjIxNDM4LDI3LjgxOTM0LDYzLjIxNDM4LDI1Ljk2OTczWiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik03MS43MTA0NywyNy4wMzYxM2MuMTM3NywxLjIzMTQ1LDEuMzM0LDIuMDQsMi45Njg3NSwyLjA0LDEuNTY2NDEsMCwyLjY5MzM2LS44MDg1OSwyLjY5MzM2LTEuOTE4OTUsMC0uOTYzODctLjY3OTY5LTEuNTQxLTIuMjg5MDYtMS45MzY1MmwtMS42MDkzNy0uMzg3N2MtMi4yODAyNy0uNTUwNzgtMy4zMzg4Ny0xLjYxNzE5LTMuMzM4ODctMy4zNDc2NiwwLTIuMTQyNTgsMS44NjcxOS0zLjYxNDI2LDQuNTE4NTUtMy42MTQyNiwyLjYyNCwwLDQuNDIyODUsMS40NzE2OCw0LjQ4MzQsMy42MTQyNmgtMS44NzZjLS4xMTIzLTEuMjM5MjYtMS4xMzY3Mi0xLjk4NzMtMi42MzM3OS0xLjk4NzNzLTIuNTIxNDguNzU2ODQtMi41MjE0OCwxLjg1ODRjMCwuODc3OTMuNjU0MywxLjM5NDUzLDIuMjU0ODgsMS43OWwxLjM2ODE2LjMzNTk0YzIuNTQ3ODUuNjAyNTQsMy42MDY0NSwxLjYyNiwzLjYwNjQ1LDMuNDQyMzgsMCwyLjMyMzI0LTEuODUwNTksMy43NzgzMi00Ljc5Mzk1LDMuNzc4MzItMi43NTM5MSwwLTQuNjEzMjgtMS40MjA5LTQuNzMzNC0zLjY2N1oiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgICA8cGF0aCBkPSJNODMuMzQ2MjEsMTkuMjk5OHYyLjE0MjU4aDEuNzIxNjh2MS40NzE2OEg4My4zNDYyMXY0Ljk5MTIxYzAsLjc3NTM5LjM0NDczLDEuMTM2NzIsMS4xMDE1NiwxLjEzNjcyYTUuODA3NTIsNS44MDc1MiwwLDAsMCwuNjExMzMtLjA0M3YxLjQ2Mjg5YTUuMTAzNTEsNS4xMDM1MSwwLDAsMS0xLjAzMjIzLjA4NTk0Yy0xLjgzMywwLTIuNTQ3ODUtLjY4ODQ4LTIuNTQ3ODUtMi40NDQzNFYyMi45MTQwNkg4MC4xNjI2MlYyMS40NDIzOEg4MS40NzlWMTkuMjk5OFoiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgICA8cGF0aCBkPSJNODYuMDY1LDI1Ljk2OTczYzAtMi44NDg2MywxLjY3NzczLTQuNjM4NjcsNC4yOTM5NS00LjYzODY3LDIuNjI1LDAsNC4yOTQ5MiwxLjc5LDQuMjk0OTIsNC42Mzg2NywwLDIuODU2NDUtMS42NjExMyw0LjYzODY3LTQuMjk0OTIsNC42Mzg2N0M4Ny43MjYwOSwzMC42MDg0LDg2LjA2NSwyOC44MjYxNyw4Ni4wNjUsMjUuOTY5NzNabTYuNjk1MzEsMGMwLTEuOTU0MS0uODk1NTEtMy4xMDc0Mi0yLjQwMTM3LTMuMTA3NDJzLTIuNDAwMzksMS4xNjIxMS0yLjQwMDM5LDMuMTA3NDJjMCwxLjk2MTkxLjg5NDUzLDMuMTA2NDUsMi40MDAzOSwzLjEwNjQ1UzkyLjc2MDI3LDI3LjkzMTY0LDkyLjc2MDI3LDI1Ljk2OTczWiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik05Ni4xODYwNiwyMS40NDIzOGgxLjc3MjQ2djEuNTQxaC4wNDNhMi4xNTk0LDIuMTU5NCwwLDAsMSwyLjE3NzczLTEuNjM1NzQsMi44NjYxNiwyLjg2NjE2LDAsMCwxLC42MzY3Mi4wNjkzNHYxLjczODI4YTIuNTk3OTQsMi41OTc5NCwwLDAsMC0uODM1LS4xMTIzLDEuODcyNjQsMS44NzI2NCwwLDAsMC0xLjkzNjUyLDIuMDgzdjUuMzcwMTJoLTEuODU4NFoiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgICA8cGF0aCBkPSJNMTA5LjM4NDMsMjcuODM2OTFjLS4yNSwxLjY0MzU1LTEuODUwNTksMi43NzE0OC0zLjg5ODQ0LDIuNzcxNDgtMi42MzM3OSwwLTQuMjY4NTUtMS43NjQ2NS00LjI2ODU1LTQuNTk1NywwLTIuODM5ODQsMS42NDM1NS00LjY4MTY0LDQuMTkwNDMtNC42ODE2NCwyLjUwNDg4LDAsNC4wODAwOCwxLjcyMDcsNC4wODAwOCw0LjQ2NTgydi42MzY3MmgtNi4zOTQ1M3YuMTEyM2EyLjM1OCwyLjM1OCwwLDAsMCwyLjQzNTU1LDIuNTY0NDUsMi4wNDgzNCwyLjA0ODM0LDAsMCwwLDIuMDkwODItMS4yNzM0NFptLTYuMjgyMjMtMi43MDIxNWg0LjUyNjM3YTIuMTc3MywyLjE3NzMsMCwwLDAtMi4yMjA3LTIuMjk3ODVBMi4yOTIsMi4yOTIsMCwwLDAsMTAzLjEwMjA3LDI1LjEzNDc3WiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgICA8L2c+CiAgICAgIDwvZz4KICAgIDwvZz4KICAgIDxnIGlkPSJfR3JvdXBfNCIgZGF0YS1uYW1lPSImbHQ7R3JvdXAmZ3Q7Ij4KICAgICAgPGc+CiAgICAgICAgPHBhdGggZD0iTTM3LjgyNjE5LDguNzMxYTIuNjM5NjQsMi42Mzk2NCwwLDAsMSwyLjgwNzYyLDIuOTY0ODRjMCwxLjkwNjI1LTEuMDMwMjcsMy4wMDItMi44MDc2MiwzLjAwMkgzNS42NzA5MlY4LjczMVptLTEuMjI4NTIsNS4xMjNoMS4xMjVhMS44NzU4OCwxLjg3NTg4LDAsMCwwLDEuOTY3NzctMi4xNDYsMS44ODEsMS44ODEsMCwwLDAtMS45Njc3Ny0yLjEzMzc5aC0xLjEyNVoiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgPHBhdGggZD0iTTQxLjY4MDY4LDEyLjQ0NDM0YTIuMTMzMjMsMi4xMzMyMywwLDEsMSw0LjI0NzA3LDAsMi4xMzM1OCwyLjEzMzU4LDAsMSwxLTQuMjQ3MDcsMFptMy4zMzMsMGMwLS45NzYwNy0uNDM4NDgtMS41NDY4Ny0xLjIwOC0xLjU0Njg3LS43NzI0NiwwLTEuMjA3LjU3MDgtMS4yMDcsMS41NDY4OCwwLC45ODM4OS40MzQ1NywxLjU1MDI5LDEuMjA3LDEuNTUwMjlDNDQuNTc1MjIsMTMuOTk0NjMsNDUuMDEzNjksMTMuNDI0MzIsNDUuMDEzNjksMTIuNDQ0MzRaIiBzdHlsZT0iZmlsbDogI2ZmZiIvPgogICAgICAgIDxwYXRoIGQ9Ik01MS41NzMyNiwxNC42OTc3NWgtLjkyMTg3bC0uOTMwNjYtMy4zMTY0MWgtLjA3MDMxbC0uOTI2NzYsMy4zMTY0MWgtLjkxMzA5bC0xLjI0MTIxLTQuNTAyOTNoLjkwMTM3bC44MDY2NCwzLjQzNmguMDY2NDFsLjkyNTc4LTMuNDM2aC44NTI1NGwuOTI1NzgsMy40MzZoLjA3MDMxbC44MDI3My0zLjQzNmguODg4NjdaIiBzdHlsZT0iZmlsbDogI2ZmZiIvPgogICAgICAgIDxwYXRoIGQ9Ik01My44NTM1NCwxMC4xOTQ4Mkg1NC43MDl2LjcxNTMzaC4wNjY0MWExLjM0OCwxLjM0OCwwLDAsMSwxLjM0Mzc1LS44MDIyNSwxLjQ2NDU2LDEuNDY0NTYsMCwwLDEsMS41NTg1OSwxLjY3NDh2Mi45MTVoLS44ODg2N1YxMi4wMDU4NmMwLS43MjM2My0uMzE0NDUtMS4wODM1LS45NzE2OC0xLjA4MzVhMS4wMzI5NCwxLjAzMjk0LDAsMCwwLTEuMDc1MiwxLjE0MTExdjIuNjM0MjhoLS44ODg2N1oiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgPHBhdGggZD0iTTU5LjA5Mzc3LDguNDM3aC44ODg2N3Y2LjI2MDc0aC0uODg4NjdaIiBzdHlsZT0iZmlsbDogI2ZmZiIvPgogICAgICAgIDxwYXRoIGQ9Ik02MS4yMTc3OSwxMi40NDQzNGEyLjEzMzQ2LDIuMTMzNDYsMCwxLDEsNC4yNDc1NiwwLDIuMTMzOCwyLjEzMzgsMCwxLDEtNC4yNDc1NiwwWm0zLjMzMywwYzAtLjk3NjA3LS40Mzg0OC0xLjU0Njg3LTEuMjA4LTEuNTQ2ODctLjc3MjQ2LDAtMS4yMDcuNTcwOC0xLjIwNywxLjU0Njg4LDAsLjk4Mzg5LjQzNDU3LDEuNTUwMjksMS4yMDcsMS41NTAyOUM2NC4xMTIzMiwxMy45OTQ2Myw2NC41NTA4LDEzLjQyNDMyLDY0LjU1MDgsMTIuNDQ0MzRaIiBzdHlsZT0iZmlsbDogI2ZmZiIvPgogICAgICAgIDxwYXRoIGQ9Ik02Ni40MDA5LDEzLjQyNDMyYzAtLjgxMDU1LjYwMzUyLTEuMjc3ODMsMS42NzQ4LTEuMzQ0MjRsMS4yMTk3My0uMDcwMzF2LS4zODg2N2MwLS40NzU1OS0uMzE0NDUtLjc0NDE0LS45MjE4Ny0uNzQ0MTQtLjQ5NjA5LDAtLjgzOTg0LjE4MjEzLS45Mzg0OC41MDA0OWgtLjg2MDM1Yy4wOTA4Mi0uNzczNDQuODE4MzYtMS4yNjk1MywxLjgzOTg0LTEuMjY5NTMsMS4xMjg5MSwwLDEuNzY1NjMuNTYyLDEuNzY1NjMsMS41MTMxOHYzLjA3NjY2aC0uODU1NDd2LS42MzI4MWgtLjA3MDMxYTEuNTE1LDEuNTE1LDAsMCwxLTEuMzUyNTQuNzA3QTEuMzYwMjYsMS4zNjAyNiwwLDAsMSw2Ni40MDA5LDEzLjQyNDMyWm0yLjg5NDUzLS4zODQ3N3YtLjM3NjQ2bC0xLjA5OTYxLjA3MDMxYy0uNjIwMTIuMDQxNS0uOTAxMzcuMjUyNDQtLjkwMTM3LjY0OTQxLDAsLjQwNTI3LjM1MTU2LjY0MTExLjgzNS42NDExMUExLjA2MTUsMS4wNjE1LDAsMCwwLDY5LjI5NTQzLDEzLjAzOTU1WiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgICA8cGF0aCBkPSJNNzEuMzQ4MTYsMTIuNDQ0MzRjMC0xLjQyMjg1LjczMTQ1LTIuMzI0MjIsMS44NjkxNC0yLjMyNDIyYTEuNDg0LDEuNDg0LDAsMCwxLDEuMzgwODYuNzloLjA2NjQxVjguNDM3aC44ODg2N3Y2LjI2MDc0aC0uODUxNTZ2LS43MTE0M2gtLjA3MDMxYTEuNTYyODQsMS41NjI4NCwwLDAsMS0xLjQxNDA2Ljc4NTY0QzcyLjA3MTgsMTQuNzcyLDcxLjM0ODE2LDEzLjg3MDYxLDcxLjM0ODE2LDEyLjQ0NDM0Wm0uOTE4LDBjMCwuOTU1MDguNDUwMiwxLjUyOTc5LDEuMjAzMTMsMS41Mjk3OS43NDksMCwxLjIxMTkxLS41ODMsMS4yMTE5MS0xLjUyNTg4LDAtLjkzODQ4LS40Njc3Ny0xLjUyOTc5LTEuMjExOTEtMS41Mjk3OUM3Mi43MjEyMSwxMC45MTg0Niw3Mi4yNjYxMywxMS40OTcwNyw3Mi4yNjYxMywxMi40NDQzNFoiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgPHBhdGggZD0iTTc5LjIzLDEyLjQ0NDM0YTIuMTMzMjMsMi4xMzMyMywwLDEsMSw0LjI0NzA3LDAsMi4xMzM1OCwyLjEzMzU4LDAsMSwxLTQuMjQ3MDcsMFptMy4zMzMsMGMwLS45NzYwNy0uNDM4NDgtMS41NDY4Ny0xLjIwOC0xLjU0Njg3LS43NzI0NiwwLTEuMjA3LjU3MDgtMS4yMDcsMS41NDY4OCwwLC45ODM4OS40MzQ1NywxLjU1MDI5LDEuMjA3LDEuNTUwMjlDODIuMTI0NTMsMTMuOTk0NjMsODIuNTYzLDEzLjQyNDMyLDgyLjU2MywxMi40NDQzNFoiIHN0eWxlPSJmaWxsOiAjZmZmIi8+CiAgICAgICAgPHBhdGggZD0iTTg0LjY2OTQ1LDEwLjE5NDgyaC44NTU0N3YuNzE1MzNoLjA2NjQxYTEuMzQ4LDEuMzQ4LDAsMCwxLDEuMzQzNzUtLjgwMjI1LDEuNDY0NTYsMS40NjQ1NiwwLDAsMSwxLjU1ODU5LDEuNjc0OHYyLjkxNUg4Ny42MDVWMTIuMDA1ODZjMC0uNzIzNjMtLjMxNDQ1LTEuMDgzNS0uOTcxNjgtMS4wODM1YTEuMDMyOTQsMS4wMzI5NCwwLDAsMC0xLjA3NTIsMS4xNDExMXYyLjYzNDI4aC0uODg4NjdaIiBzdHlsZT0iZmlsbDogI2ZmZiIvPgogICAgICAgIDxwYXRoIGQ9Ik05My41MTUxNiw5LjA3MzczdjEuMTQxNmguOTc1NTl2Ljc0ODU0aC0uOTc1NTlWMTMuMjc5M2MwLC40NzE2OC4xOTQzNC42NzgyMi42MzY3Mi42NzgyMmEyLjk2NjU3LDIuOTY2NTcsMCwwLDAsLjMzODg3LS4wMjA1MXYuNzQwMjNhMi45MTU1LDIuOTE1NSwwLDAsMS0uNDgzNC4wNDU0MWMtLjk4ODI4LDAtMS4zODE4NC0uMzQ3NjYtMS4zODE4NC0xLjIxNTgydi0yLjU0M2gtLjcxNDg0di0uNzQ4NTRoLjcxNDg0VjkuMDczNzNaIiBzdHlsZT0iZmlsbDogI2ZmZiIvPgogICAgICAgIDxwYXRoIGQ9Ik05NS43MDQ2MSw4LjQzN2guODgwODZ2Mi40ODE0NWguMDcwMzFhMS4zODU2LDEuMzg1NiwwLDAsMSwxLjM3My0uODA2NjQsMS40ODMzOSwxLjQ4MzM5LDAsMCwxLDEuNTUwNzgsMS42Nzg3MXYyLjkwNzIzSDk4LjY5di0yLjY4OGMwLS43MTkyNC0uMzM1LTEuMDgzNS0uOTYyODktMS4wODM1YTEuMDUxOTQsMS4wNTE5NCwwLDAsMC0xLjEzMzc5LDEuMTQxNnYyLjYyOTg4aC0uODg4NjdaIiBzdHlsZT0iZmlsbDogI2ZmZiIvPgogICAgICAgIDxwYXRoIGQ9Ik0xMDQuNzYxMjUsMTMuNDgxOTNhMS44MjgsMS44MjgsMCwwLDEtMS45NTExNywxLjMwMjczQTIuMDQ1MzEsMi4wNDUzMSwwLDAsMSwxMDAuNzMsMTIuNDYwNDVhMi4wNzY4NSwyLjA3Njg1LDAsMCwxLDIuMDc2MTctMi4zNTI1NGMxLjI1MjkzLDAsMi4wMDg3OS44NTYsMi4wMDg3OSwyLjI3VjEyLjY4OGgtMy4xNzk2OXYuMDQ5OGExLjE5MDIsMS4xOTAyLDAsMCwwLDEuMTk5MjIsMS4yOSwxLjA3OTM0LDEuMDc5MzQsMCwwLDAsMS4wNzEyOS0uNTQ1OVptLTMuMTI2LTEuNDUxMTdoMi4yNzQ0MWExLjA4NjQ3LDEuMDg2NDcsMCwwLDAtMS4xMDg0LTEuMTY2NUExLjE1MTYyLDEuMTUxNjIsMCwwLDAsMTAxLjYzNTI3LDEyLjAzMDc2WiIgc3R5bGU9ImZpbGw6ICNmZmYiLz4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg=="); } /* The modal close control: markup is just ; exchange-ui.js fills the glyph + label at boot. One definition, every modal. */ .x-close { background: none; border: 0; color: var(--xg-slate); font-size: 18px; cursor: pointer; padding: 4px 6px; } .x-close:hover { color: var(--xg-white); } /* The shared site footer (ExchangeUI fills #site-footer at boot) — the landing page's contact section, spec-for-spec: light-weight display email, semibold gold subheads, its type scale and rhythm, content in a centered column. Hidden on the board's kiosk variant (endless loop). */ /* Pages with a boot state (body.xf-gated) hide the footer until their first slate renders (body.xf-loaded); the landing shows it immediately. The board's kiosk mode still force-hides via inline style. */ /* No top hairline and no margin above: the footer flows straight out of the page content (the listing's own closing rule is separator enough). */ #site-footer { padding: 44px 40px 44px; background: var(--xg-black); font-family: 'metropolis', -apple-system, 'Helvetica Neue', sans-serif; } body.xf-gated #site-footer { display: none; } body.xf-gated.xf-loaded #site-footer { display: block; } .xf-inner { max-width: 1140px; margin: 0 auto; } /* Line 1: email left, badge on the right edge, one shared centerline. */ .xf-top { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 28px; } /* = the links->copyright space */ /* Display text only — deliberately NOT a mailto link, and not selectable. */ .xf-mail { font-family: 'metropolis', sans-serif; font-weight: 300; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.2; color: var(--xg-white); user-select: none; -webkit-user-select: none; cursor: default; } .xf-mail .g { color: var(--xg-gold); } /* Official App Store badge (same asset as the landing hero). The stock href is what the invite rewriter targets wherever it runs. */ .xf-download { display: block; flex: none; width: 169px; height: 46px; background: var(--xg-badge) no-repeat; background-size: contain; } /* Line 2: the hamburger menu's items, inline — same font + icon treatment. */ .xf-links { display: flex; flex-wrap: wrap; gap: 12px 46px; margin-bottom: 28px; font-size: 16px; } .xf-links a { color: var(--xg-silver); text-decoration: none; white-space: nowrap; } .xf-links a:hover { color: var(--xg-gold); } .xf-links i { display: inline-block; width: 17px; margin-right: 6px; text-align: center; font-size: 0.85em; } /* Line 3 */ .xf-copy { color: var(--xg-slate); font-size: 13px; } @media (max-width: 900px) { #site-footer { padding: 32px 20px 32px; } .xf-top { flex-wrap: wrap; gap: 22px; margin-bottom: 28px; } .xf-mail { font-size: 24px; } .xf-links { gap: 12px 30px; margin-bottom: 22px; } } /* ---- the loading skeleton (ExchangeUI.skeleton fills the boot state) ---- Ghost league bands + placeholder game rows where the real listing will land: bars stand in for the size and weight of the text they become, and a soft highlight sweeps each row (staggered per row via --skd) while the page connects. Geometry mirrors the listing grammar — band hairlines, row hairlines, matchup / status / three market columns. */ .xsk { user-select: none; pointer-events: none; } .xsk-band { padding: 16px 14px 8px; border-bottom: 1px solid rgba(39,39,39,.55); } .xsk-row { display: grid; grid-template-columns: 26fr 10fr 22fr 22fr 22fr; align-items: center; border-bottom: 1px solid rgba(39,39,39,.28); } .xsk-c { padding: 12px 14px; display: flex; align-items: center; gap: 24px; min-width: 0; } .sk { display: inline-block; height: 13px; border-radius: 4px; flex: none; max-width: 100%; background: rgba(255,255,255,.055); position: relative; overflow: hidden; } .sk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%); transform: translateX(-100%); animation: xsk-shimmer 1.8s ease-in-out infinite; animation-delay: var(--skd, 0s); } @keyframes xsk-shimmer { to { transform: translateX(100%); } } .sk.skb { height: 12px; background: rgba(197,179,88,.13); } /* league band, gold ghost */ .xsk-stack { display: inline-flex; flex-direction: column; gap: 5px; min-width: 0; } .xsk-stack .sk { height: 9px; background: rgba(255,255,255,.04); } @media (max-width: 900px) { /* the listings stack on phones; the skeleton follows suit — matchup line, then two market blocks side by side */ .xsk-row { grid-template-columns: 1fr 1fr; } .xsk-c.c1 { grid-column: 1 / -1; padding-bottom: 2px; } .xsk-c.c2, .xsk-c.c5 { display: none; } } @media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } } /* A tappable modal price (ExchangeUI.oddsTag): American odds <-> implied probability, one lamp at a time. */ .xodd { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* The matchup's last word + score + live dot travel together (see ExchangeUI.matchupCell) — a wrapping title never orphans the dot. */ .mu-tail { white-space: nowrap; } /* ---- the LED ticker (classic exchange zipper), ONE implementation ---- Reference: Wikimedia "Digital-financial-led-stock-ticker-tape-photonplay" — dot-matrix caps on pure black; SYMBOL in white, price + arrow + change lit as one green/red unit, wide dark gaps between entries. Hosts: the board's topbar strip and the .site-tape wrapper (landing + Spread Edge, css/tape.css). Wrappers override the chrome (background, vignette) with their own prefixed rules — never the lamp grammar below. */ .tape { background: #000; border-bottom: 2px solid #0a0a0b; box-shadow: inset 0 6px 14px rgba(0,0,0,.9), inset 0 -6px 14px rgba(0,0,0,.9); overflow: hidden; white-space: nowrap; padding: 12px 0; } .tape-inner { display: inline-block; animation: xg-crawl var(--tape-secs, 90s) linear infinite; } @keyframes xg-crawl { from { transform: translateX(0); } to { transform: translateX(-50%); } } .tk { display: inline-flex; align-items: baseline; gap: 11px; padding: 0 34px; font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .tk .sym { color: #ffffff; text-shadow: 0 0 7px rgba(255,255,255,.45); } .tk .tlogo { height: 22px; width: 22px; object-fit: contain; vertical-align: middle; margin: -3px 7px 0 0; } /* the line label and the day-change ride the vertical center of the big glyphs beside them, not their baseline */ .tk .mkt { color: #8f9aa6; font-size: 14px; align-self: center; text-shadow: 0 0 6px rgba(143,154,166,.4); } .tk .chg { align-self: center; display: inline-block; min-width: 40px; } /* ▲ sits lower in the face than ▼ — lift it to share the ▼'s optical center */ .tk .chg .arr { display: inline-block; width: 13px; margin-right: 1px; } .tk.up .chg .arr { transform: translateY(-1.5px); } .tk .px, .tk .chg { font-variant-numeric: tabular-nums; } .tk.up .px, .tk.up .chg { color: #54d738; text-shadow: 0 0 8px rgba(84,215,56,.55); } .tk.down .px, .tk.down .chg { color: #ff453a; text-shadow: 0 0 8px rgba(255,69,58,.55); } .tk.flat .px { color: #ffffff; text-shadow: 0 0 7px rgba(255,255,255,.4); } .tk.flat .chg { color: #565b60; } /* a lamp that just changed fades its new value in fast, over-bright, then settles — the classic financial-ticker refresh (an instant swap reads as a glitch) */ .tk.tick .px, .tk.tick .chg { animation: xg-lamp-flash .7s ease-out; } @keyframes xg-lamp-flash { 0% { opacity: .1; filter: brightness(2.2); } 40% { opacity: 1; filter: brightness(1.8); } 100% { opacity: 1; filter: brightness(1); } } @media (max-width: 900px) { .tape { padding: 9px 0; } .tk { font-size: 14px; padding: 0 22px; } .tk .mkt { font-size: 12px; } .tk .tlogo { height: 18px; width: 18px; margin-right: 5px; } } /* Ticker ghost entries (ExchangeUI.tapeSkeleton): each .xsk-tk is a .tk, so the host page's tape metrics (font, gap, padding) set the strip's height — a zero-width space in the markup gives the line box real text height, and the bars ride its vertical center like lamps would. */ .xsk-tk .sk { height: 12px; align-self: center; } .xsk-tk .sk.skm { height: 9px; background: rgba(255,255,255,.04); } /* ---- the shared sidebar menu (pages without the landing's off-canvas) ---- Landing look: dark right panel, iconed list in the menu voice, the badge below. Opened by the right-edge hover zone (and closed on pointer-leave); Escape closes too. */ #xm-panel { position: fixed; top: 0; right: 0; height: 100%; width: 302px; background: #0c0c0c; z-index: 720; padding: 64px 34px 40px; transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; box-shadow: -6px 0 24px rgba(0,0,0,.5); font-family: 'metropolis', -apple-system, sans-serif; } #xm-panel.open { transform: none; } .xm-close { position: absolute; top: 18px; right: 22px; color: var(--xg-slate); font-size: 17px; text-decoration: none; } .xm-close:hover { color: var(--xg-white); } .xm-list { list-style: none; margin: 0 0 26px; padding: 0; font-size: 16px; } .xm-list li { border-top: 1px solid rgba(255,255,255,.04); line-height: 44px; } .xm-list li:first-child { border-top: 0; } .xm-list a { color: var(--xg-white); text-decoration: none; display: block; } .xm-list a:hover { color: var(--xg-gold); } .xm-list i { display: inline-block; width: 2.2rem; margin-right: 0.8rem; text-align: center; font-size: 0.85em; } .xm-download { display: block; width: 169px; height: 46px; background: var(--xg-badge) no-repeat; background-size: contain; } /* Page-specific settings at the menu's foot (passed in via window.XM_EXTRA; today only the board uses this: Kiosk Mode + Market Side Flip). Toggle rows speak the menu's own voice — the list's type and line height, its hairline separators, gold for the switched-on state. */ .xm-set { margin-top: 30px; border-top: 1px solid rgba(255,255,255,.04); } .xm-set-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; line-height: 44px; font-size: 16px; color: var(--xg-white); cursor: pointer; user-select: none; -webkit-user-select: none; } .xm-set-row:hover { color: var(--xg-gold); } .xm-set-row input { display: none; } .xm-set .switch { position: relative; flex: none; width: 40px; height: 22px; border-radius: 11px; background: #272727; transition: background .2s; } .xm-set .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 9px; background: var(--xg-silver); transition: transform .2s, background .2s; } .xm-set-row input:checked + .switch { background: var(--xg-gold); } .xm-set-row input:checked + .switch::after { transform: translateX(18px); background: var(--xg-black); } .xm-set-sub { margin: -4px 0 12px; font-size: 12px; line-height: 1.5; color: var(--xg-slate); } /* ---- the sheet: shared modal grammar for the board + Spread Edge ---- One card voice (the board's depth + alts modals, SE's game + info sheets) and the section / pair / box ladder the alt sheets render through ExchangeUI.sheetSection/sheetBox. Scoped under .xsheet — SE's listing owns the bare .pair name. Pages keep only what is genuinely theirs (the board's drill affordance: pointer + gold hover on its boxes). */ .xsheet { width: 560px; max-height: 78vh; border-radius: 18px; padding: 20px 22px; background: linear-gradient(165deg, rgba(40,41,45,.92), rgba(14,14,15,.97)); border: 1px solid rgba(255,255,255,.09); display: flex; flex-direction: column; } .xsheet-head { display: flex; align-items: flex-start; } .xsheet-title { flex: 1; } .xsheet-title .g { font-weight: 700; font-size: 19px; color: var(--xg-white); } /* embedded scores in the sheet title (ExchangeUI.matchupTitle) — the listing row's matchup voice at title scale */ .xsheet-title .g .at { color: var(--xg-slate); font-weight: 400; padding: 0 7px; } .xsheet-title .g .sc { font-family: var(--xg-mono); font-weight: 600; padding-left: 8px; } .xsheet-title .l { font-family: var(--xg-mono); font-size: 13px; color: var(--xg-silver); margin-top: 2px; } /* overscroll-behavior stops a ladder's scroll CHAINING to the document when it reaches its end — without it the listing scrolls away underneath an open sheet and you close it somewhere else entirely. Verified 2026-08-07 on the Spread Edge sheet: 500px of page scroll before, 0 after. Two things this deliberately does NOT do, both worth knowing before "finishing" it: - It cannot help the board's DEPTH sheet, which has no scroll container at all (its .ladder is overflow:hidden), and overscroll-behavior only acts on scroll containers. Wheeling over that sheet still scrolls the board. - The usual cure for that, overflow:hidden on html/body while a modal is open, is NOT available here: any root overflow rule breaks position:sticky on iOS (the league bands) and clip on html clobbers y-scroll outright. A JS wheel guard was tried and reverted — browser automation drives the compositor directly, so it delivers one cancelable wheel event per gesture and CANNOT validate such a handler. That fix needs a real mouse and a real device, not a headless check. */ .xsheet-body { overflow-y: auto; overscroll-behavior: contain; margin-top: 4px; } .xsheet .alt-sec { font-size: 11px; letter-spacing: 3px; color: var(--xg-slate); text-transform: uppercase; margin: 14px 0 6px; } .xsheet .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; } .xsheet .pairbox { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); font-family: var(--xg-mono); } /* the mainline row: a shade lighter than its siblings — enough to read as "this is the headline number", not enough to need a text-color change */ .xsheet .pair.main .pairbox { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); } .xsheet .pairbox .pl { color: var(--xg-silver); font-size: 12.5px; white-space: nowrap; } .xsheet .pairbox .po { display: inline-flex; gap: 10px; align-items: baseline; color: var(--xg-white); font-weight: 700; font-size: 14px; } /* price voices inside a box: bare = the page's main price (board mid, white); .bk = a book quote (white); .fo = a fair price in the edge colors (gold at fair, green pays over fair, red under) */ .xsheet .po .bk { color: var(--xg-white); } .xsheet .po .fo { color: var(--xg-gold); } .xsheet .po .fo.up { color: var(--xg-green); } .xsheet .po .fo.dn { color: var(--xg-red); } @media (max-width: 900px) { .xsheet { width: min(560px, 92vw); padding: 16px; } /* two prices + a label share a phone-width box: tighten, don't wrap */ .xsheet .pairbox { padding: 8px 9px; } .xsheet .pairbox .po { gap: 7px; font-size: 13px; } }