/* The push opt-in prompt.
 *
 * PORTAL-OWNED, UNLIKE main.css — same precedent as auth.css. That file is a
 * build artefact of the WordPress theme, byte-identical to
 * ptheme-tw/assets/css/main.css and compiled from its src/ by that project's
 * Tailwind, so a rule added there by hand is a rule the next `npm run build`
 * over there silently deletes. A Tailwind class that is not already in the
 * built file does nothing at all, which is why none are used here.
 *
 * Everything below reuses the theme's own tokens — the ink scale, the brand
 * ramp, --shadow-lift, and the --fab-* geometry that already keeps the
 * back-to-top button clear of the mobile dock.
 *
 * WordPress drew this with OneSignal's bell and its own prompt, and main.css
 * still carries nine rules positioning that bell. None of them are relied on:
 * the bell is gone, and this prompt sits on the opposite side so the
 * back-to-top button keeps the corner it already has.
 */

.psp-prompt {
    position: fixed;
    z-index: 45;
    bottom: var(--fab-bottom, 20px);

    /* Left, because [data-back-to-top] owns --fab-right. The two never share
       an edge, so neither needs to know the other's height — which is the
       thing that kept going wrong when the bell lived down here. */
    left: var(--fab-right, 20px);

    width: min(372px, calc(100vw - 40px));
    box-sizing: border-box;
    padding: 16px;

    background: #fff;
    /* Hairline rather than a drawn edge: the lift shadow is what separates
       the card from the page, and a 200-weight border on top of it reads as
       a second, competing outline. */
    border: 1px solid var(--color-ink-100, #eef0f4);
    border-radius: 16px;
    box-shadow: var(--shadow-lift, 0 2px 5px #141a240d, 0 18px 40px -20px #141a2447);

    /* Opens from a nudge rather than a slide across the whole screen: this
       appears while somebody is reading, and motion in the corner of the eye
       is the part that reads as an advert. */
    opacity: 0;
    transform: translateY(8px) scale(.985);
    transition: opacity .2s ease, transform .2s ease;
}

.psp-prompt.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* The bell beside the words, rather than words alone.
 *
 * This card arrives mid-sentence, over something the reader chose to read, so
 * the first job is to say what it is before it is read at all. An icon does
 * that in the glance the card gets; a title has to be read to do it. */
.psp-prompt__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.psp-prompt__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--color-brand-700, #0a7bc4);
    background: var(--color-brand-50, #eff8ff);
    /* Inset, so the tile's edge costs no layout and cannot shift the text
       beside it by the half-pixel a border would. */
    box-shadow: inset 0 0 0 1px var(--color-brand-100, #dcefff);
}

.psp-prompt__icon svg {
    width: 19px;
    height: 19px;
}

.psp-prompt__text {
    min-width: 0;
}

.psp-prompt__title {
    margin: 0 0 3px;
    color: var(--color-ink-900, #1b2130);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.psp-prompt__body {
    margin: 0;
    color: var(--color-ink-500, #6b7688);
    font-size: 13px;
    line-height: 1.5;
}

.psp-prompt__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.psp-prompt__accept,
.psp-prompt__cancel {
    border-radius: 12px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s, background-color .15s, color .15s;
}

/* The site's own primary button, down to the gradient and the token that
 * lights it: the same face as Install in the app banner and every other call
 * to action on the page. A flat brand fill was the one button on this site
 * that did not look like the rest of it. */
.psp-prompt__accept {
    border: 0;
    color: #fff;
    /* Wider than its word needs. "Allow" is three characters shorter than
       "No thanks", so matching their padding would have left the primary
       action the smaller of the two — the min-width sets the weight instead
       of the label length. */
    min-width: 112px;
    padding-inline: 22px;
    background-image: linear-gradient(135deg, var(--color-brand-500, #10a8f8) 0%, var(--color-brand-600, #0b8fe0) 50%, var(--color-brand-700, #0a7bc4) 100%);
    box-shadow: var(--shadow-brand, 0 2px 5px #0a7bc429, 0 12px 26px -14px #0a7bc480);
}

.psp-prompt__accept:hover {
    filter: brightness(1.06);
}

.psp-prompt__accept:active {
    filter: brightness(.96);
}

/* Quiet, but not hidden: same size, same weight, same 38px target as Allow.
 *
 * It loses the border because two outlined buttons of equal weight make the
 * card argue with itself — not so that declining is harder to find. A prompt
 * that has to trick somebody into Allow has already lost: the browser's own
 * dialog is behind this one, and a Block there is permanent. */
.psp-prompt__cancel {
    border: 0;
    color: var(--color-ink-600, #525c6e);
    background: transparent;
}

.psp-prompt__cancel:hover {
    background-color: var(--color-ink-50, #f7f8fa);
    color: var(--color-ink-800, #2b3344);
}

/* The theme's focus ring, as auth.css draws it. Safe in box-shadow on both
 * buttons here because neither hover rule touches the property — the trap
 * auth.css warns about is a hover that erases a focused button's ring. */
.psp-prompt__cancel:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(16 168 248 / .3);
}

.psp-prompt__accept:focus-visible {
    outline: none;
    box-shadow: var(--shadow-brand, 0 2px 5px #0a7bc429, 0 12px 26px -14px #0a7bc480), 0 0 0 3px rgb(16 168 248 / .35);
}

/* Out of the way of anything that takes the screen, exactly as the other
 * fixed-position furniture already does. The selector list is main.css's own,
 * kept in step so the prompt never floats over an open sign-in popup. */
body:has(.overlay.is-open) .psp-prompt,
body:has(.reg-bar.is-in) .psp-prompt,
.qr-open .psp-prompt {
    display: none;
}

/* On a phone it spans the gutters, because 360px beside a 20px inset leaves a
 * stripe of page on the right that reads as a mistake. */
@media (max-width: 480px) {
    .psp-prompt {
        left: 16px;
        right: 16px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .psp-prompt {
        transition: none;
    }
}

/* ----------------------------------------------------------------------
 * The Alerts panel on /account/
 *
 * Lives here rather than in auth.css because it is push furniture, and it
 * borrows the account page's own vocabulary — .profile-block, .acc-section,
 * .acc-fact-* — for everything it can. What is below is only what those have
 * no rule for.
 */

.psp-prefs__intro {
    margin: 0 0 12px;
}

.psp-prefs__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--color-ink-100, #eef0f4);
    cursor: pointer;
}

.psp-prefs__row input {
    margin-top: 2px;
    flex: none;
}

/* Muted rather than hidden when Everything is ticked: the boards are still
 * the answer to "what could I pick instead", and removing them would make the
 * panel appear to lose options. */
.psp-prefs__row.is-muted {
    opacity: .5;
    cursor: default;
}

.psp-prefs__name {
    display: block;
    color: var(--color-ink-800, #252c3a);
    font-size: 14px;
    font-weight: 600;
}

.psp-prefs__sub {
    display: block;
    margin-top: 2px;
    color: var(--color-ink-500, #6b7688);
    font-size: 12px;
}

.psp-prefs__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* Deliberately not a button that looks like one. Turning alerts off is not
 * undoable from this page — the browser will not prompt again — so it should
 * not sit at the same weight as Save. */
.psp-prefs__off {
    border: 0;
    background: none;
    padding: 0;
    color: var(--color-ink-500, #6b7688);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.psp-prefs__off:hover {
    color: var(--color-ink-700, #3b4455);
}

.psp-prefs__said {
    margin-top: 10px;
}