/* Squishy button START */
.squishy {
    position: relative;
    padding: 7px 12px;
    border: none;
    cursor: pointer;
    transition: all 250ms;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.squishy i {
    align-self: center;
}

/* Busy/disabled: no press affordance while the work is running */
.squishy:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

/* Tech Squishy */
.squishy-tech {
    background-color: rgb(5 150 105);
    color: white;
    border-radius: 0.5rem;
    box-shadow:
        inset 0 1px 0 0 rgba(255,255,255,0.3),
        0 2px 0 0 #059669,
        0 4px 0 0 #047857,
        0 6px 0 0 #065f46,
        0 8px 0 0 #064e3b,
        0 8px 16px 0 rgba(5,150,105,0.5);
    overflow: visible;
}

.squishy-tech:hover:not(:disabled) {
    transform: translateY(4px);
    box-shadow:
        inset 0 1px 0 0 rgba(255,255,255,0.3),
        0 1px 0 0 #059669,
        0 2px 0 0 #047857,
        0 3px 0 0 #065f46,
        0 4px 0 0 #064e3b,
        0 4px 8px 0 rgba(5,150,105,0.5);
}

.squishy-tech:hover:not(:disabled) i {
    animation: bounce 1s infinite;
}

/* Animations */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-25%);
    }
}

/* Squishy tech END */
/* Save/bookmark button — used by save_item.js on every feed and detail page.
   Kept here rather than in a per-app stylesheet because the button appears in
   politics, överblick, rnm and Min sida, and buttons.css is already loaded by
   all of them. */
/* The button keeps its neutral grey in both states — saved-ness is carried by
   the bookmark glyph going solid (bi-bookmark -> bi-bookmark-fill), and the
   moment-of-action feedback by the green pill below. `is-saved` is still
   toggled by save_item.js and left as a styling hook; it deliberately applies
   no colour of its own. Anchors the pill. */
.save-item-btn {
    position: relative;
}

/* "✓ Sparad" — shown for ~1.2s after a successful save, then faded out.
   pointer-events:none so it can never swallow a click aimed at the button it
   sits on top of. */
.save-item-flash {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    z-index: 5;

    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
    pointer-events: none;

    padding: 0.1rem 0.45rem;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background-color: #f0fdf4;
    color: #15803d;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;

    opacity: 0;
    animation: save-item-flash-in 0.18s ease-out forwards;
}

/* Set by save_item.js when there is not enough room above the button inside a
   scrolling feed, which would otherwise slice the pill in half. */
.save-item-flash.is-below {
    bottom: auto;
    top: calc(100% + 4px);
    animation-name: save-item-flash-in-below;
}

.save-item-flash.is-leaving {
    animation: save-item-flash-out 0.3s ease-in forwards;
}

.save-item-flash.is-below.is-leaving {
    animation-name: save-item-flash-out-below;
}

@keyframes save-item-flash-in {
    from { opacity: 0; transform: translate(-50%, 4px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes save-item-flash-out {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, -4px); }
}

@keyframes save-item-flash-in-below {
    from { opacity: 0; transform: translate(-50%, -4px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes save-item-flash-out-below {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, 4px); }
}

/* Flashed for ~1.5s when a toggle request fails, so a dropped save is visible
   rather than silently doing nothing. */
.save-item-btn.save-item-error {
    color: #b91c1c;
    border-color: #b91c1c;
    animation: save-item-shake 0.3s;
}

@keyframes save-item-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* Keep the feedback, drop the motion. The pill still appears and disappears —
   only the slide and the shake go away. */
@media (prefers-reduced-motion: reduce) {
    .save-item-flash,
    .save-item-flash.is-below {
        opacity: 1;
        transform: translate(-50%, 0);
        animation: none;
    }

    .save-item-flash.is-leaving,
    .save-item-flash.is-below.is-leaving {
        opacity: 0;
        animation: none;
        transition: opacity 0.2s linear;
    }

    .save-item-btn.save-item-error {
        animation: none;
    }
}