/* =================================================================== NOTCH (global) =================================================================== */
/* A cut-out in a card's corner that holds a badge (number, icon, arrow, date).
   The notch is filled with the colour BEHIND the card (--notch-bg) and gets two
   inverted (concave) corners from radial gradients, so the card edge curves
   smoothly into the cut. Place it inside a position:relative card.

   .notch--tr  top-right      .notch--tl  top-left
   .notch--br  bottom-right   .notch--b   bottom tab (sits on an image's bottom edge)

   Set --notch-bg to the surface the card sits on (default: page background). */
.notch {
    --notch-bg: var(--surface-light);
    --notch-r: var(--r-lg);

    position: absolute;
    z-index: 1;
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp10);
    background: var(--notch-bg);

    &::before, &::after {
        position: absolute;
        width: var(--notch-r); height: var(--notch-r);
        content: '';
        pointer-events: none;
    }

    &.notch--tr {
        top: 0; right: 0;
        border-bottom-left-radius: var(--notch-r);

        &::before { top: 0; left: calc(var(--notch-r) * -1); background: radial-gradient(circle at 0 100%, transparent calc(var(--notch-r) - .5px), var(--notch-bg) var(--notch-r)); }
        &::after  { top: 100%; right: 0; background: radial-gradient(circle at 0 100%, transparent calc(var(--notch-r) - .5px), var(--notch-bg) var(--notch-r)); }
    }

    &.notch--tl {
        top: 0; left: 0;
        border-bottom-right-radius: var(--notch-r);

        &::before { top: 0; right: calc(var(--notch-r) * -1); background: radial-gradient(circle at 100% 100%, transparent calc(var(--notch-r) - .5px), var(--notch-bg) var(--notch-r)); }
        &::after  { top: 100%; left: 0; background: radial-gradient(circle at 100% 100%, transparent calc(var(--notch-r) - .5px), var(--notch-bg) var(--notch-r)); }
    }

    &.notch--br {
        right: 0; bottom: 0;
        border-top-left-radius: var(--notch-r);

        &::before { bottom: 0; left: calc(var(--notch-r) * -1); background: radial-gradient(circle at 0 0, transparent calc(var(--notch-r) - .5px), var(--notch-bg) var(--notch-r)); }
        &::after  { right: 0; bottom: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--notch-r) - .5px), var(--notch-bg) var(--notch-r)); }
    }

    &.notch--b {
        bottom: 0;
        padding: var(--sp10) var(--sp30) 0;
        border-radius: var(--notch-r) var(--notch-r) 0 0;

        &::before { bottom: 0; left: calc(var(--notch-r) * -1); background: radial-gradient(circle at 0 0, transparent calc(var(--notch-r) - .5px), var(--notch-bg) var(--notch-r)); }
        &::after  { right: calc(var(--notch-r) * -1); bottom: 0; background: radial-gradient(circle at 100% 0, transparent calc(var(--notch-r) - .5px), var(--notch-bg) var(--notch-r)); }
    }
}

/* Round badge that usually sits inside a notch. */
.notch-badge {
    display: flex; align-items: center; justify-content: center;
    width: 60px; height: 60px;
    background: var(--white);
    border-radius: var(--r-full);
    font-family: var(--font-mona);
    font-size: var(--f16);
    font-weight: 600;
    color: var(--ink);
    transition: var(--transition);
}