/*
 * EnFavori Design System 1.0 — public action controls.
 *
 * Single visual owner for actions: links, buttons and disclosure triggers.
 * Opt-in class only; existing form actions, JS hooks and APIs remain unchanged.
 * Compact card CTAs (36px) stay separate from interactive controls (40/44px).
 */
:root {
    --ef-action-height:40px;
    --ef-action-tap-height:44px;
    --ef-action-radius:10px;
    --ef-action-gap:8px;
    --ef-action-ink:#102b49;
    --ef-action-line:#bdced8;
    --ef-action-surface:#fff;
    --ef-action-primary:#087c74;
    --ef-action-primary-hover:#06645e;
    --ef-action-active-surface:#e9f7f3;
}
.ef-ui-action,
.ef-ui-action.ef-ui-action--secondary {
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--ef-action-gap);
    min-height:var(--ef-action-height);
    padding:7px 13px;
    border:1px solid var(--ef-action-line);
    border-radius:var(--ef-action-radius);
    background:var(--ef-action-surface);
    color:var(--ef-action-ink);
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    line-height:1.25;
    text-align:center;
    text-decoration:none;
    vertical-align:middle;
    cursor:pointer;
    transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
/* Action icons have one size, stroke and optical weight on every page. */
.ef-ui-action .ef-ui-icon {
    display:block;
    flex:none;
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
}
.fav__btn.ef-ui-action.is-on .ef-ui-icon { fill:currentColor; }
.ef-ui-action.ef-ui-action--primary {
    border-color:var(--ef-action-primary);
    background:var(--ef-action-primary);
    color:#fff;
}
.ef-ui-action.ef-ui-action--secondary {
    border-color:var(--ef-action-line);
    background:var(--ef-action-surface);
    color:var(--ef-action-ink);
}
.ef-ui-action.ef-ui-action--quiet {
    border-color:transparent;
    background:transparent;
    color:var(--ef-action-ink);
}
.ef-ui-action.ef-ui-action--compact {
    min-height:36px;
    padding:5px 11px;
}
.ef-ui-action.is-on,
.ef-ui-action[aria-pressed="true"] {
    border-color:#9cd7cc;
    background:var(--ef-action-active-surface);
    color:#07584f;
}
@media (hover:hover) {
    .ef-ui-action.ef-ui-action--primary:hover {
        border-color:var(--ef-action-primary-hover);
        background:var(--ef-action-primary-hover);
    }
    .ef-ui-action.ef-ui-action--secondary:hover,
    .ef-ui-action.ef-ui-action--quiet:hover {
        border-color:#89b8b4;
        background:#eff9f7;
    }
}
.ef-ui-action:focus-visible {
    outline:3px solid #1c658c;
    outline-offset:3px;
}
.ef-ui-action:disabled,
.ef-ui-action[aria-disabled="true"] {
    opacity:.55;
    cursor:not-allowed;
}
/* The list V4 <summary> uses a more specific legacy selector.
 * Use the same token-based component, without changing its disclosure logic. */
.ef-design-preview__share summary.ef-ui-action {
    min-height:var(--ef-action-height);
    padding:7px 13px;
    border:1px solid var(--ef-action-line);
    border-radius:var(--ef-action-radius);
    background:var(--ef-action-surface);
    color:var(--ef-action-ink);
    font-size:13px;
    font-weight:700;
}
@media (max-width:767px) {
    :root { --ef-action-height:var(--ef-action-tap-height); }
    :is(a,button,summary).ef-ui-action.ef-ui-action--compact { min-height:40px; }
}
@media (prefers-reduced-motion:reduce) {
    .ef-ui-action { transition:none; }
}