/*
   TR-SAVE — the save / favourite toggle, on TiorAI surfaces
   The BUTTON is the plugin's (`.tiorai-save-btn`, from tiorai-user-hub's
   favorites.css). This file re-skins it onto the theme's tokens and adds the
   two placements the theme uses.

   It has to override rather than extend, because the plugin's rules are a fixed
   light palette — `background:#fff`, `color:#374151` — written before the
   theme had a dark mode. Left alone, the control is a white pill on a dark
   card. Every value below is an existing token; no new colour, radius or
   spacing step is invented (CLAUDE.md §9.5).

   The dependency order is what makes the overrides win without `!important`:
   tiorai_enqueue_unified_save() declares `tiorai-favorites` as a dependency
   when that handle is present, so this stylesheet always prints after it.

   Enqueued at render time by template-parts/shared/save-button.php, so a page
   with no save control downloads nothing.
   ========================================================================== */

.tr-save {
    /*
     * The bookmark mark, drawn by the component rather than by the plugin: the
     * plugin's markup is a label and nothing else, and its `.save-icon` hook has
     * never had an element in it. Masks, not background-images, so the shape
     * inherits `currentColor` through all four states instead of needing four
     * recoloured assets.
     */
    --tr-save-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    --tr-save-icon-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");

    display: inline-flex;
    align-items: center;
}

.tr-save .tiorai-save-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tr-save .tiorai-save-btn::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--tr-save-icon) center / contain no-repeat;
    mask: var(--tr-save-icon) center / contain no-repeat;
}

/* The saved state fills the same mark, so the shape never changes size. */
.tr-save .tiorai-save-btn.is-saved::before {
    -webkit-mask-image: var(--tr-save-icon-filled);
    mask-image: var(--tr-save-icon-filled);
}

/* A-19: every colour below was --color-accent, which is #f6e96a — the YELLOW.
   Nothing else on the site is that colour: .btn--primary paints "Visit" with
   --color-primary (#B4E227) and .btn--outline paints the secondary action with
   --color-text-link, which resolves to the same lime. So the one personal
   control on the page was the one control in a colour of its own, and it read
   as a warning rather than as a state. It is the theme's own button tokens now,
   the same ones .btn uses. */
.tr-save .tiorai-save-btn:hover,
.tr-save .tiorai-save-btn:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--surface-card);
}

.tr-save .tiorai-save-btn:focus-visible {
    outline: var(--tiorai-focus-ring-width, 2px) solid var(--tiorai-focus-ring-color, var(--color-primary));
    outline-offset: var(--tiorai-focus-ring-offset, 2px);
}

/* Outlined, not filled. `Visit` is the solid lime on this page and it is the
   action the visitor came for; a second solid lime pill beside it competes with
   it for the same glance. A tint plus a lime edge reads as ON at a distance and
   still loses to Visit, which is the correct order. It also matches the
   subscribe control exactly — the two are peers and were previously drawn at
   two different weights. */
.tr-save .tiorai-save-btn.is-saved {
    background: rgba(var(--color-primary-rgb), 0.12);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tr-save .tiorai-save-btn.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Inline: the tool page's action row, beside "Visit" */

.tr-save--inline .tiorai-save-btn {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-default);
}

/* Compact: the card footer, where the row is one line and already full */

.tr-save--compact .tiorai-save-btn {
    padding: 6px;
    border-radius: var(--radius-full);
}

/*
 * Icon only, with the word still in the DOM. `.save-label` is the element
 * favorites.js writes the new state into, so it cannot be removed from the
 * markup — hiding it visually keeps the script's target and keeps the state
 * change announced to a screen reader.
 */
.tr-save--compact .save-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .tr-save .tiorai-save-btn {
        transition: none;
    }
}

/* Placement inside the shared tool card's footer row */

/*
 * The footer is `display:flex` and its direction cue is pinned to the end with
 * `margin-inline-start:auto`. Pinning the save button the same way would give
 * the row TWO auto margins, which splits the free space between them and lands
 * the button in the middle. So the button takes the pin and the adjacent cue
 * gives it up — an adjacent-sibling selector, which is the only way CSS can say
 * "only when a save button precedes you".
 */
.tr-tools-cards .tr-tools-card__save {
    margin-inline-start: auto;
}

.tr-tools-cards .tr-tools-card__save + .tr-tools-card__go {
    margin-inline-start: 0;
}