/* #9432 - THE TWIN DROPDOWNS' POSITIONING, IN ONE PLACE.

   The analyze/upgrade panel on /games (.analyze-dropdown) and the re-analyze
   panel on /games/{id}/analysis (.reanalyze-dropdown) are the same panel: hung
   off a small trigger whose container is its containing block. #6717 fixed a
   clipping defect in both at once and left a note that the two rules "must be
   kept in sync by hand"; #9393 then fixed only the Games one and they drifted.
   So where the panel sits, and how wide it may be, is written ONCE here, and
   each page's scoped stylesheet keeps only its look (colors, border, z-index)
   and the states only one twin has (Games' .drop-up and .is-floating).
   AnchoredDropdownTwinContractTests fails if a scoped stylesheet restates any
   of it. The edge shift that goes with it is wwwroot/js/anchored-dropdown.js.

   Global on purpose: a scoped rule carries the page's attribute, so it could
   not name both pages' panels. The scoped modifier rules still win where they
   apply, because they weigh more than one class. */

.analyze-dropdown,
.reanalyze-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    /* The floor is 220px wherever 220px fits, and it gives way to the phone cap
       below. A bare min-width beats max-width whenever the two conflict, so the
       cap could never engage (#9432). Not min(13.75rem, 100%): the containing
       block is the trigger's container, about 44px wide, so 100% would throw the
       floor away and shrink the panel to its longest word. */
    min-width: min(13.75rem, calc(100vw - 1.5rem));
}

/* #6717 - on phones anchor the panel to the LEFT edge of its trigger. The base
   rule is right: 0, which lines the panel's RIGHT edge up with the trigger's and
   lets it hang leftward off a trigger near the left of the screen: the panel's
   left edge landed at about -20px and every label lost its first character
   ("Quick" read as "uick"). Reported on Android at ~450 CSS px. A trigger near
   the RIGHT then pushes the panel off the other side, which is what the shift
   in anchored-dropdown.js takes back (#9393). */
@media (max-width: 768px) {
    .analyze-dropdown,
    .reanalyze-dropdown {
        left: 0;
        right: auto;
        max-width: calc(100vw - 1.5rem);
    }
}