/* HK-ENG-002.3 — Heart-only blue hover, neutral tile border, instant gray unsave; 44px target. */
.hk-library-tile { position:relative; }
.hk-recipe-bar-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
body .hk-save-heart {
    --hk-heart-blue:#175cd3;
    box-sizing:border-box; position:relative; isolation:isolate;
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; min-width:44px; min-height:44px; padding:0;
    border:0; border-radius:12px; background:transparent; color:#64748b;
    box-shadow:none; text-decoration:none!important;
    line-height:1; cursor:pointer; transition:color .15s ease;
}
/* Visible tile: 37px square (46px original x 0.80); interactive target stays 44px. */
body .hk-save-heart::before {
    content:""; position:absolute; inset:3.5px; border:1px solid #d8e2ec;
    border-radius:9.5px; background:#fff;
    box-shadow:0 2px 8px rgb(15 23 42 / 9%);
    pointer-events:none; z-index:0;
    transition:border-color .15s ease, background-color .15s ease;
}
/* Icon: 18.4px instead of 23px (20% reduction). */
body .hk-save-heart svg {
    display:block; position:relative; z-index:1; width:18.4px; height:18.4px; pointer-events:none;
}
/* WP/GeneratePress can apply a later `a:hover { color: black }` rule.
   Resolve SVG strokes explicitly in every state: neutral means gray, never black.
   The tile border stays gray in ALL pointer states, including saved/hovered. */
body a.hk-save-heart:not([data-hk-saved="true"]) {
    color:#64748b;
}
body a.hk-save-heart:not([data-hk-saved="true"]) svg path {
    stroke:#64748b; fill:none;
}
/* Unsaved HOVER: blue heart outline + light-blue tile; no blue tile border.
   Immediately after unsave, data-hk-just-unsaved suppresses the hover tint
   until pointer exits and re-enters, matching the user's requested behavior. */
body a.hk-save-heart:not([data-hk-saved="true"]):not([data-hk-just-unsaved="true"]):is(:hover,:focus-visible) {
    color:#175cd3; background:transparent;
}
body a.hk-save-heart:not([data-hk-saved="true"]):not([data-hk-just-unsaved="true"]):is(:hover,:focus-visible) svg path {
    stroke:#175cd3;
}
body a.hk-save-heart:not([data-hk-saved="true"]):not([data-hk-just-unsaved="true"]):is(:hover,:focus-visible)::before {
    background:#eff6ff; border-color:#d8e2ec;
}
body a.hk-save-heart:not([data-hk-saved="true"])[data-hk-just-unsaved="true"] {
    color:#64748b; background:transparent;
}
body a.hk-save-heart:not([data-hk-saved="true"])[data-hk-just-unsaved="true"] svg path {
    stroke:#64748b; fill:none;
}
body a.hk-save-heart:not([data-hk-saved="true"])[data-hk-just-unsaved="true"]::before {
    background:#fff; border-color:#d8e2ec;
}
/* The AJAX unsave transition should not animate a lingering blue tile. */
body a.hk-save-heart[data-hk-just-unsaved="true"],
body a.hk-save-heart[data-hk-just-unsaved="true"]::before { transition:none; }
/* Keep a distinct focus ring for keyboard users, NOT a blue tile border. */
body a.hk-save-heart:focus-visible { outline:3px solid #175cd3; outline-offset:0; }
body a.hk-save-heart:focus:not(:focus-visible) { outline:0; }
body a.hk-save-heart[data-hk-saved="true"] { color:#175cd3; }
body a.hk-save-heart[data-hk-saved="true"]::before { background:#eff6ff; border-color:#d8e2ec; }
body a.hk-save-heart[data-hk-saved="true"] svg path { stroke:#175cd3; fill:#175cd3; }
body .hk-save-heart[data-hk-busy="true"] { opacity:.55; cursor:progress; }
body .hk-save-heart--tile { position:absolute; top:12px; left:12px; right:auto; z-index:3; }
/* The staging-only development badge previously occupied the top left.
   Move it right with reserved room for the 44px heart target, including narrow cards. */
body.hk-recipe-library .hk-library-tile .hk-library-development-badge {
    left:auto; right:12px; max-width:calc(100% - 76px); z-index:2;
}
body .hk-recipe-card .hk-save-heart--inline { margin:0; flex-shrink:0; }
.hk-save-heart .screen-reader-text, .hk-heart-live { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(prefers-reduced-motion:reduce){body .hk-save-heart, body .hk-save-heart::before{transition:none}}
@media print{body .hk-save-heart, body .hk-heart-live{display:none!important}}