/* A quiet gesture at the end of the reading column. */
.ni-heart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 36px;
}
.ni-heart .ni-heart-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 9px 15px;
    border: 1px solid var(--color-pietra, #526975);
    border-radius: 24px;
    background: transparent;
    color: var(--color-foresta, #294854);
    font: 400 .72rem/1.5 var(--font-mono, monospace);
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
}
.ni-heart-button svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ni-heart-button[aria-pressed="true"] {
    background: var(--color-ghiaccio-deep, #dbe8ed);
    border-color: var(--color-foresta, #294854);
}
.ni-heart-button[aria-pressed="true"] svg { fill: currentColor; }
.ni-heart-button:hover:not(:disabled) { background: var(--color-ghiaccio-deep, #dbe8ed); }
.ni-heart-button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.ni-heart-button:disabled { cursor: wait; opacity: .65; }
.ni-heart-count {
    min-width: 1ch;
    padding-left: 10px;
    border-left: 1px solid currentColor;
    font-variant-numeric: tabular-nums;
}
.ni-heart-feedback { color: var(--color-pietra, #526975); font-size: .9rem; line-height: 1.5; }
.ni-heart-feedback:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (prefers-reduced-motion: reduce) {
    .ni-heart .ni-heart-button { transition: none; }
}