/* THE LANGUAGE PILL, ONCE, FOR EVERY PANEL.
 *
 * Globe, the full language name, and a chevron (ruling of 2026-09-29). One
 * definition rather than one per panel: the admin's .ap-pill and the promoter
 * panel's .pp-flag were two copies of the same design and had already drifted
 * apart on four values -- padding 16 against 14, gap 7 against 6, font-size
 * 13.5 against 13, weight 700 against 800 -- which is what two copies of a
 * component do.
 *
 * WHY THE NAMES LOOK LIKE THIS. The old promoter layout loads bootstrap.css,
 * and CLAUDE.md records what that costs: .label, .caret, .badge, .well, .btn,
 * .close and .hidden are all global Bootstrap rules there, and a design drawn
 * standalone has no reason to avoid them. Every class here is prefixed
 * o5-lang-, which Bootstrap does not use and which no panel stylesheet
 * defines.
 *
 * AND WHY IT DEPENDS ON NOTHING. The custom properties carry fallbacks, so the
 * pill renders correctly on a page that defines none of them -- the old
 * promoter layout has no --line or --ink, because those arrive with
 * promoter-o5.css, which it does not load. A panel that DOES define them wins,
 * so the pill takes each panel's own palette where there is one.
 *
 * SCOPED TO NOTHING. .ap-pill is scoped .ap-shell and .pp-flag is scoped
 * .pp-shell, which is exactly what stopped either being reusable. These rules
 * are scoped to their own class and work wherever the markup is placed.
 */

.o5-lang-wrap {
    position: relative;
    display: inline-block;
}

.o5-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line, #e6e2db);
    background: var(--surface, #fff);
    font-family: var(--display, inherit);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 17px;
    color: var(--ink, #1a1a1a);
    cursor: pointer;
    /* Bootstrap gives every <button> a margin and a text-transform on some
       themes; both are neutralised here rather than fought per panel. */
    margin: 0;
    text-transform: none;
}

.o5-lang-btn:hover {
    border-color: var(--ink, #1a1a1a);
}

.o5-lang-btn:focus-visible {
    outline: 2px solid var(--blue, #2f6df6);
    outline-offset: 2px;
}

/* The globe. 15px against a 17px line box, so the pill's height is set by the
   text and does not change when the icon loads. */
.o5-lang-globe {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--ink2, #6b675f);
}

.o5-lang-name {
    white-space: nowrap;
}

.o5-lang-car {
    width: 10px;
    height: 10px;
    flex: none;
    color: var(--ink2, #6b675f);
    transition: transform .18s;
}

.o5-lang-btn.is-open .o5-lang-car {
    transform: rotate(180deg);
}

/* ── THE MENU ──────────────────────────────────────────────────────────────
   A white rounded card. Aligned to the pill's END edge (right in English,
   left in Arabic -- logical properties, 2026-09-30), because the pill sits at the end of
   a toolbar or a header on every screen that has one. */
.o5-lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 180px;
    padding: 6px;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e6e2db);
    border-radius: 14px;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .22);
    z-index: 120;
}

.o5-lang-menu.is-open {
    display: block;
}

.o5-lang-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    background: none;
    border-radius: 9px;
    font-family: var(--display, inherit);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink, #1a1a1a);
    cursor: pointer;
    text-align: start;
    margin: 0;
    text-transform: none;
}

.o5-lang-item:hover {
    background: var(--surface-2, #f7f5f0);
}

/* THE SELECTED ONE IS BOLD WITH A RED DOT, the others grey -- the open-state
   the designs show. The dot is always in the layout, transparent when the
   option is not the active one, so the labels do not shift by 6px as the
   selection moves. */
.o5-lang-item::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex: none;
    background: transparent;
}

.o5-lang-item.is-on {
    font-weight: 800;
    color: var(--ink, #1a1a1a);
}

.o5-lang-item.is-on::before {
    background: var(--red, #d7282f);
}

.o5-lang-item:not(.is-on) {
    color: var(--ink2, #6b675f);
}

/* ── THE PUBLIC SITE'S MENU ROWS: name on one side, code on the other ──
   The panels' rows are <button> elements with a single label. The public
   site's are LINKS -- a language is a URL prefix here, so the honest control
   navigates -- and the approved design puts the code opposite the name. These
   rules only add what the anchor form needs; everything else, including the
   .is-on treatment, is inherited from the rules above so the two cannot
   drift. */
.o5-lang-item {
  text-decoration: none;
}
.o5-lang-item .o5-lang-item-name {
  flex: 1 1 auto;
  text-align: start;
}
.o5-lang-item .o5-lang-item-code {
  flex: 0 0 auto;
  margin-inline-start: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .55;
}
.o5-lang-item.is-on .o5-lang-item-code {
  opacity: .8;
}

/* ── PHONE WIDTH: THE GLOBE ALONE ──
   Measured, not guessed. Adding the pill to the public header took the page
   to 406px at a 390px viewport and made opening the search wrap "Sign In" --
   the events browser check failed on both before this rule existed. The
   header was already tight there: in Arabic it stands 106px against English's
   78px, because the sign-in button wraps to two lines on its own.

   So below 480 the pill keeps the globe and drops the code. The control stays
   in the same place and still opens the same menu, where every language is
   written out in full -- which is the part a visitor actually needs. The menu
   itself is unchanged; only the button's label goes.

   This is the cheap half of the phone problem. The other half is that the
   primary nav is display:none under 900px with NOTHING replacing it, so there
   is no menu to fold the switcher into. That is reported rather than invented
   here. */
@media (max-width: 480px) {
  .o5-lang-btn .o5-lang-name { display: none; }
  .o5-lang-btn { padding-inline: 10px; gap: 4px; }
  .o5-lang-btn .o5-lang-car { display: none; }
}