/* ---------------------------------------------------------------------------
   The ConveyThis language list in this design, light and dark.

   The switcher's script (cdn.conveythis.com, conveythis-initializer.js) opens
   #conveythis-wrapper: a full-screen dim with a white box of flags and names
   and a 22 px "Select a Language" in the browser's default face, all set in
   inline styles. The markup is the script's, so everything here is a selector
   under #conveythis-wrapper, with !important where an inline style has to be
   beaten. The list names only the other languages, never the one the page is
   in. The trigger in the rail is dt-shell.css; the script's own floating
   trigger, on the pages without the rail, is below.
   --------------------------------------------------------------------------- */

/* the script sets height: 100vh inline, which on iOS Safari is taller than the
   screen left under the address bar; 100dvh is the part actually visible */
#conveythis-wrapper.custom_conveythis_wrapper_outer {
    height: 100vh !important;
    height: 100dvh !important;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 0 !important;
    background-color: var(--dt-scrim) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: dt-ct-fade 160ms var(--dt-ease-enter) both;
}
@keyframes dt-ct-fade { from { opacity: 0; } }

/* the script sizes this to the screen and pins the list to its top; it holds
   the list at its own height instead, so the dim centres it */
#conveythis-wrapper .conveythis-widget-main {
    position: relative !important;
    width: min(880px, 100%);
    height: auto !important;
    overflow: visible !important;
    border-radius: 0 !important;
    white-space: normal !important;
    cursor: default !important;
    animation: dt-ct-rise 220ms var(--dt-ease-enter) both;
}
@keyframes dt-ct-rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } }

#conveythis-wrapper .conveythis-widget-languages {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    align-content: start;
    gap: 2px 6px;
    width: 100%;
    max-width: none !important;
    max-height: min(600px, calc(100vh - 32px)) !important;
    max-height: min(600px, calc(100dvh - 32px)) !important;
    margin: 0 !important;
    padding: 0 16px 16px !important;
    border: 1px solid var(--dt-line);
    border-radius: var(--dt-r-xl) !important;
    background-color: var(--dt-panel) !important;
    box-shadow: var(--dt-shadow-lg);
    color: var(--dt-ink) !important;
    font-family: var(--dt-font-body);
    overflow: hidden auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--dt-line-strong) transparent;
}

/* the title: pinned to the top while the list scrolls under it */
#conveythis-wrapper .conveythis-widget-languages > div {
    order: -1;
    grid-column: 1 / -1;
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    z-index: 1;
    width: auto !important;
    margin: 0 -16px 8px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--dt-line);
    background: var(--dt-panel);
    color: var(--dt-ink) !important;
    font-family: var(--dt-font-heading);
    font-size: 20px !important;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-align: left !important;
}

#conveythis-wrapper a.conveythis-widget-language {
    gap: 12px;
    width: auto !important;
    min-width: 0;
    padding: 9px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background-color: transparent !important;
    color: var(--dt-ink) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color var(--dt-dur-enter) var(--dt-ease-enter), border-color var(--dt-dur-enter) var(--dt-ease-enter);
}
/* the script's onmouseover paints an inline #F6F6F6 and a grey border (its
   hover colour), which in the dark theme left pale text on a pale row */
#conveythis-wrapper a.conveythis-widget-language:hover { background-color: var(--dt-tint) !important; }
#conveythis-wrapper a.conveythis-widget-language:focus-visible {
    outline: var(--dt-ring-width) solid var(--dt-ring);
    outline-offset: 1px;
}

#conveythis-wrapper .conveythis-widget-icon {
    flex: none;
    width: 24px !important;
    height: 18px !important;
    margin: 0 !important;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
}

/* ------------------------------------------------- the floating trigger
   On the pages without the rail (sign-in, sign-up, the landing) the script adds
   its own trigger, #conveythis-widget-current-language-wrapper: a white 194 x 36
   box flush with the bottom-left corner, grey border, Arial. It opens the same
   list as above. */
/* the script gives the trigger and the list the same top z-index, and the
   trigger comes later in the page, so it was drawn over the open list */
#conveythis-widget-current-language-wrapper.conveythis-widget-current-language-wrapper {
    z-index: 2147483646 !important;
    left: 16px !important;
    bottom: 16px !important;
    height: 40px !important;
    border: 1px solid var(--dt-line) !important;
    border-radius: 12px !important;
    background-color: var(--dt-panel) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
    transition: border-color var(--dt-dur-enter) var(--dt-ease-enter);
}
#conveythis-widget-current-language-wrapper.conveythis-widget-current-language-wrapper:hover { border-color: var(--dt-primary) !important; }
#conveythis-widget-current-language-wrapper .conveythis-widget-language {
    gap: 9px;
    width: auto !important;
    height: 100%;
    padding: 0 34px 0 12px !important;
    background-color: transparent !important;
    color: var(--dt-ink) !important;
}
#conveythis-widget-current-language-wrapper .conveythis-widget-icon {
    flex: none;
    width: 22px !important;
    height: 16px !important;
    margin: 0 !important;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
}
#conveythis-widget-current-language-wrapper .language_title {
    padding-right: 0 !important;
    color: var(--dt-ink) !important;
    font-family: var(--dt-font-body) !important;
    font-size: 13.5px !important;
    font-weight: 600;
}
#conveythis-widget-current-language-wrapper .conveythis-language-arrow {
    top: 50%;
    right: 12px !important;
    width: 10px !important;
    height: 10px !important;
    margin: -5px 0 0 !important;
    background-color: var(--dt-ink-muted) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* phones: fixed to the bottom corner it lay on the sign-in button (iPhone 13
   mini: the button starts at 625 px of 629). It moves to the top instead: on
   sign-in and sign-up a round flag beside the round theme toggle (54 px at
   top 30 / right 30, scrolling with the page like it), on the landing into the
   band dt-landing.css keeps free above the dialog. */
@media (max-width: 580px) {
    body:has(.dt-auth) #conveythis-widget-current-language-wrapper.conveythis-widget-current-language-wrapper {
        position: absolute !important;
        top: 30px !important;
        right: 96px !important;
        bottom: auto !important;
        left: auto !important;
        width: 54px;
        height: 54px !important;
        border-color: transparent !important;
        border-radius: 50% !important;
        background-color: var(--dt-tint) !important;
        box-shadow: none;
    }
    body:has(.dt-auth) #conveythis-widget-current-language-wrapper .conveythis-widget-language {
        justify-content: center;
        width: 100% !important;
        padding: 0 !important;
    }
    body:has(.dt-auth) #conveythis-widget-current-language-wrapper .conveythis-widget-icon { width: 26px !important; height: 19px !important; }
    body:has(.dt-auth) #conveythis-widget-current-language-wrapper .language_title,
    body:has(.dt-auth) #conveythis-widget-current-language-wrapper .conveythis-language-arrow { display: none !important; }
    body.dt-landing-page #conveythis-widget-current-language-wrapper.conveythis-widget-current-language-wrapper {
        top: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        left: auto !important;
    }
}

@media (max-width: 580px) {
    #conveythis-wrapper.custom_conveythis_wrapper_outer { padding: 12px; }
    #conveythis-wrapper .conveythis-widget-languages {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        padding: 0 10px 10px !important;
        border-radius: 18px !important;
    }
    #conveythis-wrapper .conveythis-widget-languages > div { margin: 0 -10px 6px; padding: 18px 18px 14px; font-size: 18px !important; }
    /* 44 px rows: the touch target a phone needs */
    #conveythis-wrapper a.conveythis-widget-language { padding: 12px 10px !important; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    #conveythis-wrapper.custom_conveythis_wrapper_outer,
    #conveythis-wrapper .conveythis-widget-main { animation: none; }
}