/* Two things js/post-sheet-v2.js needs and no sheet on the site already owns.

   1. The card a reader says "Not interested" to leaves instead of blinking out. The script measures
      the card, writes that number inline, and only then adds .mtv-post--leaving and sets the height
      to 0 — so the rule below never has to guess a height, and the feed closes the gap under it
      rather than leaving a hole until the next page load.

   2. The chip that replaces it carries an Undo button, which app.css cannot do: its .mtv-toast is a
      full-width page banner. This is a small fixed card in the same white/hairline/shadow language
      as the site's own notices, kept off the phone dock and off the notch. */
.mtv-post--leaving {
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-6px);
    transition: height 420ms cubic-bezier(.22, .61, .36, 1),
        opacity 220ms ease-out,
        transform 420ms cubic-bezier(.22, .61, .36, 1),
        margin 420ms ease,
        padding 420ms ease,
        border-width 420ms ease;
}

.mtv-undo {
    position: fixed;
    left: 50%;
    bottom: calc(104px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 92vw;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--mtv-hairline);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(9, 34, 56, .18);
    color: var(--mtv-navy);
    font: 600 14px/1.3 var(--mtv-font-ui);
}

.mtv-undo span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mtv-undo button {
    flex: none;
    padding: 7px 12px;
    border: 0;
    border-radius: 9px;
    background: rgba(216, 30, 91, .1);
    color: var(--mtv-magenta);
    font: 700 13px/1 var(--mtv-font-ui);
    cursor: pointer;
}

.mtv-undo button:disabled {
    opacity: .6;
    cursor: default;
}

:root[data-theme="dark"] .mtv-undo {
    background: #10161c;
    border-color: rgba(255, 255, 255, .14);
    color: #eef3f7;
}

@media (min-width: 821px) {
    .mtv-undo {
        bottom: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mtv-post--leaving {
        transition-duration: 1ms;
        transform: none;
    }
}