would be six chances to get it wrong. Only the popup is ours: a panel that belongs to the theme, that scrolls inside itself rather than off the screen, and that can be typed into when the list is long enough to be worth searching. Positioned fixed and parented to so no dialog, card or overflow:hidden can clip it. */ .gxdd{position:fixed;z-index:80;background:var(--card);border:1px solid var(--line);border-radius:var(--r2); box-shadow:var(--sh-2);display:flex;flex-direction:column;overflow:hidden;min-width:180px} .gxdd[hidden]{display:none} .gxdd .gxdd-find{padding:8px;border-bottom:1px solid var(--line);flex-shrink:0} .gxdd .gxdd-find input{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r3); background:var(--card);color:var(--ink);font-size:13px} .gxdd .gxdd-find input:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-w)} .gxdd .gxdd-list{overflow-y:auto;overscroll-behavior:contain;padding:5px;flex:1} /* A group heading reads as a heading and never as something you can pick. */ .gxdd .gxdd-grp{padding:8px 9px 4px;font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--slate-2);font-weight:700} .gxdd .gxdd-opt{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:var(--r3); font-size:13.5px;color:var(--ink);cursor:pointer;user-select:none;line-height:1.35} .gxdd .gxdd-opt .tick{width:13px;flex-shrink:0;color:var(--orange);font-weight:700} /* One highlight, driven by the keyboard and by the mouse alike, so arrowing down and then moving the mouse does not leave two rows looking chosen. */ .gxdd .gxdd-opt.on{background:var(--orange-w);color:var(--orange-d)} .gxdd .gxdd-opt[aria-selected="true"]{font-weight:600} .gxdd .gxdd-opt[aria-disabled="true"]{color:var(--slate-2);cursor:default;background:none} .gxdd .gxdd-none{padding:14px 10px;text-align:center;color:var(--slate);font-size:12.5px} /* On the dark chrome the panel would otherwise be a white card hanging off a carbon control. It follows what it was opened from, not where it is parented. */ .gxdd.on-dark{background:var(--carbon);border-color:var(--carbon-3)} .gxdd.on-dark .gxdd-find{border-bottom-color:var(--carbon-3)} .gxdd.on-dark .gxdd-find input{background:var(--carbon-2);border-color:var(--carbon-3);color:var(--rail-strong)} .gxdd.on-dark .gxdd-opt{color:var(--rail-tx)} .gxdd.on-dark .gxdd-opt.on{background:var(--carbon-2);color:var(--rail-strong)} .gxdd.on-dark .gxdd-grp,.gxdd.on-dark .gxdd-none{color:var(--slate-2)} /* ---------------------------------------------------------------- the product's mark on dark Our own artwork is drawn for paper: near-black on a transparent ground (the opaque pixels average 37/255). On the carbon bars it therefore disappears, so it is given a white plate rather than being inverted into a version of the brand that does not exist. Defined once here because it appears on four surfaces that share no other stylesheet — the platform bar, the platform sign-in, the garage sign-in and the landing footer — and it had drifted into three different radii, three paddings and two shadows. A plate that is 7px round in one place and 10px in the next reads as an accident; one definition reads as a decision. Only the height is set per surface. Everything that makes it a plate lives here. */ .brandplate{display:block;width:auto;object-fit:contain;background:#fff; border-radius:10px;padding:7px 10px;box-shadow:0 4px 18px rgba(0,0,0,.28)} /* On a bar, where the plate sits beside text rather than above it and has to stay out of the way. */ .brandplate.sm{border-radius:7px;padding:4px 6px;box-shadow:0 2px 8px rgba(0,0,0,.3)}