/* THE GAME'S OWN DROPDOWN. . A native select cannot carry an icon per option in
any browser this site supports, and its list is painted by the OS — no font,
no colour, no row height of ours survives it. So this is a button and a
listbox, with the keyboard behaviour a select would have given for free
written back in by hand: arrows move, Enter and Space choose, Escape closes,
Home and End jump, and focus returns to the button. That is the price of the
icons and it is paid in d4-dropdown.js rather than skipped.
⚠ THE FONT IS DECLARED TWICE ON THIS SITE, HERE AND IN item-tooltip.css.
Same family name, same file, so a browser resolves them to one face and
there is no behaviour to drift — but if ExocetMedium.ttf is ever renamed,
BOTH have to move. It is not extracted into a third stylesheet because
item-tooltip.css is loaded by the calculator and this by the hub, and adding
a file that every page must remember to include is a worse trade than a
duplicated four-line rule that cannot disagree with itself.
THE COLOURS ARE READ OFF THE OWNER'S SCREENSHOTS, not invented: the closed
control's red rule and its brighter square button, the near-black list, pale
bone text, and the gold that marks the current row. Diablo's UI is warm and
very dark, and the one thing it never does is a flat grey. */
@font-face {
font-family: "D4Exocet";
src: url("/assets/fonts/ExocetMedium.ttf") format("truetype");
font-display: swap;
}
.d4dd { position: relative; }
/* ---- the closed control ---------------------------------------------- */
/* ⚠ THE SIZES CAME DOWN A STEP ON 21 Aug 2026 — the owner, of the DPS
Checker's card: *"The box shouldnt have to scroll... Make the text a bit
smaller."* A 42px control with a 26px icon made every row 40px tall, so
eight classes needed 328px of a 320px list and the eighth was cut off. The
list is no longer clipped either way (see the portal in d4-dropdown.js);
this is the other half — the whole card fits without scrolling. */
.d4dd-btn {
display: flex; align-items: center; gap: 9px; width: 100%;
background: linear-gradient(180deg, #17120f 0%, #0e0b0a 100%);
border: 1px solid #7c2a20; border-radius: 2px;
padding: 0 0 0 10px; height: 36px; cursor: pointer; text-align: left;
box-shadow: inset 0 0 14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .5);
}
.d4dd-btn:hover { border-color: #a8392a; }
.d4dd-btn:focus-visible { outline: 2px solid #c9a227; outline-offset: 1px; }
.d4dd[data-open="1"] .d4dd-btn { border-color: #c04a33; }
.d4dd-ico { width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; }
/* A row with no icon must not jump left — the space is held whether or not a
picture arrives, which is also what happens while one is still loading. */
.d4dd-ico.is-empty { visibility: hidden; }
.d4dd-label {
flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap;
font-family: "D4Exocet", Georgia, serif; font-size: 15px; letter-spacing: .01em;
color: #d9d0bd;
}
.d4dd-btn[data-placeholder="1"] .d4dd-label { color: #6f665a; }
/* The square button at the right, with the game's little triangle. */
.d4dd-caret {
flex: 0 0 34px; align-self: stretch; margin-left: 6px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(180deg, #4a1712 0%, #2a0d0a 100%);
border-left: 1px solid #7c2a20; color: #e8b4a4; font-size: 11px; line-height: 1;
}
.d4dd[data-open="1"] .d4dd-caret { color: #ffd7c6; }
/* ---- the open list ---------------------------------------------------- */
/* ⚠ THE OPEN LIST IS MOVED TO AND POSITIONED FROM SCRIPT — top, left,
width, and which way it opens are all set by place() in d4-dropdown.js, and
there is no `max-height` here on purpose: it is computed from the room
actually left on screen. A fixed cap is what hid Warlock. Anything the
script does not set (the paint, the z-index above the modal's 9000) is
here. See the long note in the script; the two halves are one fix. */
.d4dd-list {
position: fixed; z-index: 9500;
/* Stated rather than inherited from whatever reset the host page happens to
use: place() sizes this box in viewport pixels, and a `max-height` that
silently excluded the 1px borders clipped two pixels off the bottom row. */
box-sizing: border-box;
margin: 0; padding: 3px 0; list-style: none;
overflow-y: auto; overscroll-behavior: contain;
background: #0a0908; border: 1px solid #2b2521; border-radius: 2px;
box-shadow: 0 14px 34px rgba(0, 0, 0, .8);
}
.d4dd-list[hidden] { display: none; }
/* ⚠ SCR2, 1 Sep 2026 — A ROW NEVER WRAPS. The owner, of the planner's picker
against the Gear page's: *"Is the font bigger here, the text wraps, unlike the
gear comp one that doesn't. I don't like the wrapping. Font sizes should be
identical on Gear Comp And Char Planner one."*
THE FONT SIZES WERE ALREADY IDENTICAL — both are this rule, 15px, from this
one stylesheet, and neither page overrides it. What differed was the HOST's
width: the list is sized to its button by place(), the planner's picker is
narrower than the Gear page's `.cr-class`, and a wrapped row reads as a bigger
font. So the fix is the wrap, not the size, and it is here rather than on
either page so the two cannot drift apart again.
`nowrap` alone would only clip; place() also grows the list to its widest row
(see the note there). The two halves are one fix. */
.d4dd-opt {
display: flex; align-items: center; gap: 10px; padding: 5px 11px; cursor: pointer;
font-family: "D4Exocet", Georgia, serif; font-size: 15px; color: #cfc6b4;
white-space: nowrap;
}
/* Hover and keyboard focus are the SAME state, deliberately. Two different
highlights in one list means the mouse and the arrow keys disagree about
where you are. */
.d4dd-opt:hover, .d4dd-opt[data-active="1"] { background: #1a1512; color: #e6c765; }
.d4dd-opt[aria-selected="true"] { color: #c9a227; }
.d4dd-opt[aria-disabled="true"] { color: #5a534a; cursor: default; }
.d4dd-opt[aria-disabled="true"]:hover { background: none; color: #5a534a; }
/* ---- THE LARGE SIZE, `size: "lg"` -------------------------------------
The owner, 3 Sep 2026, of the class picker on both planners: *"Class
selection box needs to be bigger. About double it's current size."* Then, of
the first attempt: *"The dropdown is not double sized. It's the same size as
before... And the box is truncated."*
⚠ WHY THE FIRST ATTEMPT DID NOTHING. Every number that decides this control's
size is set HERE, not inherited: the label has its own `font-size`, the icon
its own `flex` basis, the button its own `height`, and the caret its own
width. A page setting `font-size` on `.d4dd-btn` changes the button's own
text — of which there is none — and leaves all four alone. Worse, the label
is `overflow:hidden; text-overflow:ellipsis` inside a control whose width
comes from its host, so a longer string does not widen the box, it truncates:
"Please select a class" became "PLEASE S…" in a 210px control.
So the size lives here, beside the numbers it doubles, and a MIN-WIDTH comes
with it — a bigger font in the same box is not a bigger box. */
/* ⚠⚠ TWO THINGS WRONG IN THE FIRST VERSION, BOTH MEASURED, BOTH THE OWNER'S
REPORT: *"WHY IS THE CLASS DROPDOWN WAY OFF-CENTER and too BIG. I said double
the old size. That is quadruple."*
OFF-CENTRE, because the min-width was on the BUTTON and the button's width is
`100%` of its HOST. The host stayed at its content width — measured 210px,
correctly centred at 495 — while the button ran 500px from the host's left
edge, so it hung 290px off to the right with its centre at 640. The size
belongs on the host; the button follows it.
QUADRUPLE, because "double" reads as AREA. The default is 210x36 = 7,560px².
58px tall and 500 wide is 29,000px², which is very nearly four times it.
380x44 is 16,720px² — 2.2x — and the label still fits: at 20px it needs 265px
and the box leaves 294 after the pad, icon, gap and caret. */
.d4dd-lg { display: block; min-width: 380px; max-width: 100%; }
.d4dd-lg .d4dd-btn { height: 44px; gap: 10px; padding-left: 10px; }
.d4dd-lg .d4dd-label { font-size: 20px; }
.d4dd-lg .d4dd-ico { width: 26px; height: 26px; flex: 0 0 26px; }
.d4dd-lg .d4dd-caret { flex: 0 0 40px; font-size: 13px; }
/* The open list is portalled to , so it carries the class itself (see
setOpen in d4-dropdown.js) — a row must not be half the size of the control
that opened it. */
.d4dd-list.d4dd-lg .d4dd-opt { font-size: 18px; padding: 6px 12px; gap: 10px; }
.d4dd-list.d4dd-lg .d4dd-opt img { width: 24px; height: 24px; }
/* A 500px control does not fit a phone. The large size is a desktop request;
below that it steps back to something that still reads as bigger than the
default without pushing the page sideways. */
@media (max-width: 620px) {
/* A 380px control does not fit a 375px phone once the page's own padding is
taken. Measured there: the box comes out 335px and the label gets 243 after
the pad, icon, gap and caret, which holds the placeholder at 17px. */
.d4dd-lg { min-width: 0; }
.d4dd-lg .d4dd-btn { height: 42px; gap: 8px; padding-left: 10px; }
.d4dd-lg .d4dd-label { font-size: 17px; }
.d4dd-lg .d4dd-ico { width: 24px; height: 24px; flex: 0 0 24px; }
.d4dd-lg .d4dd-caret { flex: 0 0 34px; }
.d4dd-list.d4dd-lg .d4dd-opt { font-size: 16px; }
.d4dd-list.d4dd-lg .d4dd-opt img { width: 22px; height: 22px; }
}
/* ---- greyed out whole ------------------------------------------------- */
/* Training Dummy switches the rest of the form off. It is DISABLED, not
hidden: a control that vanishes leaves people wondering what they did, where
one that dims says "not for this choice" and stays where it was. */
.d4dd.is-off { opacity: .38; pointer-events: none; }
.d4dd.is-off .d4dd-btn { border-color: #3a2a26; }
@media (prefers-reduced-motion: reduce) { .d4dd-btn { transition: none; } }