/* Site-wide ❤️ like button (assets/like.js). Plain: a heart and a number, no pill,
   no background. Placements (chosen by the page's layout, see like.js):
   .pm-like--side    left edge, heart level with the theme FAB's eye-saver icon
   .pm-like--corner  home, compact landscape: top-right of the top strip
   .pm-like--foot    home, tablet portrait: left end of the footer's © line
   .pm-like--head    home, phone portrait: top-right of the header */

.pm-like {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--fg-2, var(--text-secondary, #cbd5e1));
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pm-like:focus-visible { outline: 2px solid #f43f5e; outline-offset: 2px; border-radius: 6px; }
.pm-like:disabled { cursor: progress; }

.pm-like-heart { display: inline-flex; }
.pm-like-heart svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: fill 0.2s ease, stroke 0.2s ease;
}
@media (hover: hover) { .pm-like:hover .pm-like-heart svg { stroke: #f43f5e; } }
.pm-like.is-liked .pm-like-heart svg { fill: #f43f5e; stroke: #f43f5e; }
.pm-like-count { font-variant-numeric: tabular-nums; }
.pm-like-count[hidden] { display: none; }

/* ── Side: left edge, heart level with the eye-saver icon, number beside it ──
   The theme FAB sits at bottom 56px above 520px wide; its bottom button (eye-saver)
   is centred 21px above that (1px border + 4px padding + 16px half-button), so 77px
   from the bottom. This button is one row, 28px tall (4px padding + 20px heart +
   4px padding), so the heart's centre is 14px above its bottom: bottom = 77 - 14. */
.pm-like--side {
    position: fixed;
    left: 16px;
    bottom: calc(63px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    gap: 6px;
    font-size: 12px;
    /* Transparent over content: a soft shadow keeps it readable on text and code. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.pm-like--side .pm-like-heart svg { width: 20px; height: 20px; }

/* ── Corner: home, compact landscape ───────────────────────────────────── */
.pm-like--corner {
    position: fixed;
    top: 2px;
    right: 8px;
    z-index: 1000;
    padding: 2px 4px;
    gap: 4px;
    font-size: 11px;
    font-family: var(--font-mono, monospace);
}
.pm-like--corner .pm-like-heart svg { width: 13px; height: 13px; }

/* ── Foot: home, tablet portrait, left end of the © line ──────────────── */
.grid-status-bar .footer-left:has(.pm-like--foot) { position: relative; }
.pm-like--foot {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 4px;
    font-size: 11px;
}
.pm-like--foot .pm-like-heart svg { width: 14px; height: 14px; }

/* ── Head: home, phone portrait, top-right of the header ──────────────── */
header.grid-header:has(.pm-like--head) { position: relative; }
.pm-like--head {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    font-size: 13px;
}

/* ── Nudge: a heartbeat every 2.5 s, 4 times per page, until liked ─────
   Plain at rest, it went unnoticed. Surya asked for a pulse with a slight red
   outline; it stops after ~10 s so readers and coders are not left with motion
   in the corner of every page (WCAG 2.2.2: nothing moves on its own for more
   than 5 s without a way to stop it, and 4 beats end it), and it never runs once
   the reader has liked or has asked their system for less motion. */
.pm-like.is-nudging .pm-like-heart { animation: pm-like-beat 2.5s ease-in-out 1s 4; }
.pm-like.is-nudging .pm-like-heart svg { animation: pm-like-beat-tint 2.5s ease-in-out 1s 4; }
@keyframes pm-like-beat {
    0%, 30%, 100% { transform: scale(1); }
    8% { transform: scale(1.22); }
    15% { transform: scale(1); }
    22% { transform: scale(1.12); }
}
@keyframes pm-like-beat-tint {
    0%, 45%, 100% { stroke: currentColor; }
    8%, 30% { stroke: #f43f5e; }
}
@media (prefers-reduced-motion: reduce) {
    .pm-like.is-nudging .pm-like-heart,
    .pm-like.is-nudging .pm-like-heart svg { animation: none; }
}

/* ── Feedback ─────────────────────────────────────────────────────────── */
.pm-like.is-pop .pm-like-heart { animation: pm-like-pop 0.45s cubic-bezier(0.17, 0.89, 0.32, 1.49); }
@keyframes pm-like-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}
.pm-like.is-error .pm-like-heart svg { stroke: #f59e0b; }

/* Tooltip bubble; JS sets its position from the button. */
.pm-like-tip {
    position: fixed;
    z-index: 1001;
    width: max-content;
    max-width: min(24rem, calc(100vw - 24px));
    padding: 7px 10px;
    border-radius: 8px;
    background: #0b1220;
    color: #f1f5f9;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.pm-like-tip.is-above { transform: translateY(4px); }
.pm-like-tip.is-below { transform: translateY(-4px); }
/* Beside the heart in the landscape strip: vertically centred on it. */
.pm-like-tip.is-left { transform: translateX(4px); padding: 4px 9px; font-size: 11.5px; }
.pm-like-tip.is-on { opacity: 1; transform: none; }
.pm-like-tip::after { content: ""; position: absolute; border: 5px solid transparent; }
.pm-like-tip.is-above::after { bottom: -10px; border-top-color: #0b1220; }
.pm-like-tip.is-below::after { top: -10px; border-bottom-color: #0b1220; }
.pm-like-tip.is-start::after { left: 14px; }
.pm-like-tip.is-end::after { right: 14px; }
.pm-like-tip.is-left::after { right: -10px; top: 50%; margin-top: -5px; border-left-color: #0b1220; }

/* Thank-you card after a like: the tooltip's look, but clickable and with room
   for a Share button. Positioned by like.js (placeNear), like the tooltip. */
.pm-like-share {
    position: fixed;
    z-index: 1001;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: max-content;
    max-width: min(20rem, calc(100vw - 24px));
    padding: 10px 12px;
    border-radius: 10px;
    background: #0b1220;
    color: #f1f5f9;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    animation: pm-like-share-in 0.18s ease-out;
}
@keyframes pm-like-share-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pm-like-share-msg { margin: 0; }
.pm-like-share-go {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fb7185;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.pm-like-share-go:hover { text-decoration: underline; }
.pm-like-share-go:focus-visible { outline: 2px solid #fb7185; outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .pm-like-share { animation: none; } }

.pm-like-live {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Themes ───────────────────────────────────────────────────────────── */
:root[data-theme="light"] .pm-like { color: #334155; }
:root[data-theme="eye-saver"] .pm-like { color: #5b4632; }
:root[data-theme="light"] .pm-like--side,
:root[data-theme="eye-saver"] .pm-like--side {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.7));
}
:root[data-theme="light"] .pm-like-tip,
:root[data-theme="eye-saver"] .pm-like-tip { background: #1e293b; }
:root[data-theme="light"] .pm-like-tip.is-above::after,
:root[data-theme="eye-saver"] .pm-like-tip.is-above::after { border-top-color: #1e293b; }
:root[data-theme="light"] .pm-like-tip.is-below::after,
:root[data-theme="eye-saver"] .pm-like-tip.is-below::after { border-bottom-color: #1e293b; }
:root[data-theme="light"] .pm-like-tip.is-left::after,
:root[data-theme="eye-saver"] .pm-like-tip.is-left::after { border-left-color: #1e293b; }

@media print { .pm-like, .pm-like-tip { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
    .pm-like-heart svg, .pm-like-tip { transition: none; }
    .pm-like.is-pop .pm-like-heart { animation: none; }
}