/* Marketplace: the alerts under the mast (Fragments/Market/Alerts; MarketView::alerts, market.js). Its own file so
   market.css stays the cards' and pages' own. Signed in, every page's column starts with the alerts' wrapper, a live
   region (role="status") that's always there so a screen reader hears a line market.js adds; it takes no room until
   there's something new. Then a box in the cards' surface, as wide as the cards (36rem at most), a line per thing
   (a button: an icon in grn0 and the words), growing open from nothing and folding away
   like the stream's prompts; none of it with reduced motion.

   <div class="market-alerts is-open" role="status" data-mk-alerts data-mk-unread="2">
       <div class="market-alerts__box"><div class="market-alerts__lines" data-mk-alert-lines>
           <a class="btn market-alerts__line" href="/chat" data-mk-alert="messages">
               <span class="icon icon--lucide-messages-square market-alerts__icon" aria-hidden="true"></span>
               <span data-mk-alert-one hidden>…</span><span data-mk-alert-many>…</span>
           </a>
       </div></div>
   </div> */

.market-alerts {
    display: grid;
    grid-template-rows: 0fr;
    max-width: 36rem;
    margin-bottom: -1rem; /* while it's closed, cancels the column's gap after it */
    opacity: 0;
    transition: grid-template-rows .35s ease, margin-bottom .35s ease, opacity .125s ease;
}

.market-alerts.is-open {
    grid-template-rows: 1fr;
    margin-bottom: 0;
    opacity: 1;
}

.market-alerts__box {
    min-height: 0;
    overflow: hidden;
}

.market-alerts__lines {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem;
    background: var(--ink8);
    border-radius: var(--rad4);
}

/* Each line is a button (.btn): its look, height and hover; set at the box's left, its words wrapping rather than
   widening the column. */
.market-alerts__line {
    justify-content: flex-start;
    padding-block: .5rem;
    box-sizing: border-box;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.market-alerts__line:focus-visible {
    outline: solid var(--thk) var(--blu1);
    outline-offset: -2px; /* inside the box, which clips what's outside it */
}

/* A button's own icon size; grn0. */
.market-alerts__line .market-alerts__icon {
    background-color: var(--grn0);
}

/* Phones: the box spans the screen, square, right under the mast: the column's padding taken back at the sides,
   and above while it's open (closed, it takes no room, so the page's own space above stays). */
@media screen and (max-width: 767px) {
    .market-main > .market-alerts {
        width: calc(100% + 2 * var(--shell-pad));
        max-width: none;
        margin-inline: calc(-1 * var(--shell-pad));
        transition: grid-template-rows .35s ease, margin .35s ease, opacity .125s ease;
    }

    .market-main > .market-alerts.is-open {
        margin-top: calc(-1 * var(--shell-pad));
    }

    .market-alerts__lines {
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .market-alerts,
    .market-main > .market-alerts {
        transition: none;
    }
}