/* quest.css — openvibe-shared/quest's card. Scoped to .ovq-, built on the kit's tokens (with the site's own theme
 * tokens and the network's defaults as fallbacks), so it wears every site's theme. Link it beside quest.js. */
.ovq-quest {
    --ovq-a: var(--ovk-accent, var(--accent, #3b82f6));
    --ovq-p: var(--ovk-panel, var(--bg-card, #121826));
    --ovq-t: var(--ovk-text, var(--text-primary, #e8ecf3));
    --ovq-m: var(--ovk-muted, var(--text-secondary, #93a0b4));
    --ovq-ok: var(--ovk-ok, var(--success, #22c55e));
    max-width: 520px;
    margin: 0 auto 22px;
    border-radius: var(--ov-radius-2, 14px);
    background: color-mix(in srgb, var(--ovq-a) 7%, var(--ovq-p));
    box-shadow: var(--ov-elev-3);
    color: var(--ovq-t);
    text-align: left;
    overflow: hidden;
}
.ovq-quest[hidden], .ovq-body[hidden], .ovq-chip[hidden] { display: none; }
.ovq-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 12px 14px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ovq-head:focus-visible, .ovq-steps a:focus-visible, .ovq-more:focus-visible { outline: 2px solid var(--ovq-a); outline-offset: 2px; }
.ovq-icon, .ovq-site-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; color: var(--ovq-a); }
.ovq-titles { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ovq-kicker { color: color-mix(in srgb, var(--ovq-a) 78%, var(--ovq-t)); font-size: .66rem; font-weight: 800; letter-spacing: .09em; }
.ovq-title { font-size: 1rem; font-weight: 800; line-height: 1.3; text-wrap: balance; }
.ovq-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 160px; margin-top: 7px; }
.ovq-bar i { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ovq-t) 12%, transparent); }
.ovq-quest[data-progress="1"] .ovq-bar i:first-child,
.ovq-quest[data-progress="2"] .ovq-bar i:nth-child(-n+2),
.ovq-quest[data-progress="3"] .ovq-bar i { background: var(--ovq-a); }
.ovq-quest[data-progress="3"] .ovq-bar i { background: var(--ovq-ok); }
.ovq-chip { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, #f97316 16%, transparent); color: color-mix(in srgb, #f97316 78%, var(--ovq-t)); font-size: .78rem; font-weight: 800; }
.ovq-chev { color: var(--ovq-m); transition: transform .2s; }
.ovq-quest.open .ovq-chev { transform: rotate(180deg); }
.ovq-body { padding: 0 10px 10px; }
.ovq-story { margin: -2px 4px 8px; color: var(--ovq-m); font-size: .82rem; line-height: 1.45; }
.ovq-steps { display: grid; gap: 2px; list-style: none; padding: 0; margin: 0 0 8px; }
.ovq-steps a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px; border-radius: 12px; color: inherit; text-decoration: none; }
.ovq-steps a:hover { background: color-mix(in srgb, var(--ovq-t) 6%, transparent); }
.ovq-steps .is-next a { background: color-mix(in srgb, var(--ovq-a) 13%, transparent); }
.ovq-step { display: flex; flex: 1; flex-direction: column; min-width: 0; font-size: .88rem; font-weight: 650; line-height: 1.3; }
.ovq-step small { color: var(--ovq-m); font-size: .72rem; font-weight: 600; }
.ovq-steps .is-next small, .ovq-more > i { color: color-mix(in srgb, var(--ovq-a) 78%, var(--ovq-t)); }
.ovq-steps .is-done .ovq-step > span { color: var(--ovq-m); }
.ovq-go { color: var(--ovq-m); font-size: .72rem; }
.ovq-check { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ovq-ok); color: #fff; font-size: .75rem; font-weight: 900; }
.ovq-more { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ovq-a) 15%, var(--ovq-p)); color: inherit; text-decoration: none; }
.ovq-more:hover { background: color-mix(in srgb, var(--ovq-a) 22%, var(--ovq-p)); }
.ovq-more-text { display: flex; flex: 1; flex-direction: column; min-width: 0; color: var(--ovq-m); font-size: .78rem; line-height: 1.35; }
.ovq-more-text b { color: var(--ovq-t); font-size: .88rem; }

/* The card's own marks (no Font Awesome needed). */
.ovq-g{display:inline-grid;place-items:center;flex:none;width:1em;height:1em}
.ovq-g svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ovq-g.is-fill svg{fill:currentColor;stroke:none}
.ovq-arrow{color:var(--ovk-accent,var(--accent,#60a5fa))}