/* ==========================================================================
   p-h-alert.css -- the thin line

   THIN IS THE WHOLE SPECIFICATION. The owner's words: it has to be narrow and
   out of the way so it does not get in the reader's way. So one line of text,
   no icon, no panel, no shadow big enough to read as a dialog, and gone by
   itself in a few seconds.

   It sits ABOVE THE BOTTOM BAR and not over it. The bar is how a reader moves
   around this site; covering it to announce a goal would be trading the thing
   they are doing for the thing we want to say.

   Every colour is a token: this is on all twenty-four palettes.
   ========================================================================== */

.xw_al{
    position: fixed;
    left: 50%;
    /* clear of the bottom bar, whose height is the site's own token, plus the
       home indicator on a phone that has one */
    bottom: calc(var(--xw-nav-h, 64px) + 10px + env(safe-area-inset-bottom, 0px));
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    max-width: calc(100% - 24px);
    padding: 0 6px 0 12px;
    height: 34px;
    background: var(--color-2);
    border: 1px solid var(--color-4);
    border-radius: 999px;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .6);
    /* out of the way until it has something to say, and out of the way of the
       pointer even then: a line that announces a goal must never swallow a tap
       meant for what is underneath it */
    opacity: 0;
    visibility: hidden;
    /* it comes UP from behind the bottom bar, so the movement says where it
       came from; a line that only fades in has arrived from nowhere */
    transform: translate(-50%, 14px) scale(.96);
    transition: opacity 160ms ease-in, transform 160ms ease-in, visibility 160ms;
    pointer-events: none;
}

/* ARRIVING IS A DIFFERENT GESTURE FROM LEAVING.

   In: a short spring, overshooting by a hair, so the eye catches it without
   the line demanding anything. Out: straight and quick, because a thing being
   dismissed should not perform.

   The two live in the transition above (leaving) and the curve here
   (arriving); the same easing for both is what makes a toast feel sluggish. */
.xw_al.on{
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
    pointer-events: auto;
    transition: opacity 180ms ease-out,
                transform 420ms cubic-bezier(.16, 1.2, .3, 1),
                visibility 180ms;
}

/* and the score itself gets one beat of the accent, which is the only moment
   this line asks for anything */
.xw_al.on .xw_al_t{ animation: xw_al_in 420ms ease-out both; }
@keyframes xw_al_in{
    from{ opacity: 0; transform: translateY(3px); }
    to{ opacity: 1; transform: translateY(0); }
}

.xw_al .xw_al_t{
    color: var(--color-9);
    font-size: 13px;
    line-height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    /* numbers in a score should not shuffle the words either side of them */
    font-variant-numeric: tabular-nums;
}
.xw_al .xw_al_t[href]{ cursor: pointer; }

.xw_al .xw_al_x{
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-6, var(--color-8));
    font: inherit;
    font-size: 17px;
    line-height: 22px;
    cursor: pointer;
}
.xw_al .xw_al_x:hover{ color: var(--color-9); }

@media (prefers-reduced-motion: reduce){
    .xw_al, .xw_al.on{ transition: opacity 120ms linear; transform: translate(-50%, 0); }
    .xw_al.on .xw_al_t{ animation: none; }
}