/* ══════════════════════════════════════════════════════════════
   phrase-interaction.css — Reusable phrase card interaction styles
   Only applied inside .phrase-card elements
   ══════════════════════════════════════════════════════════════ */

/* ── Stripe: thin vertical bar on card left edge (only when status set) ── */
.phrase-card{position:relative;transition:opacity .3s,filter .3s}
.phrase-card.pi-stripe-green{border-right:3px solid var(--green)}
.phrase-card.pi-stripe-red{border-right:3px solid var(--danger)}
.phrase-card.pi-stripe-amber{border-right:3px solid var(--amber)}

/* ── Easy state: dim card slightly, blur only the Arabic text ── */
.phrase-card.pi-state-easy{opacity:.72}
.phrase-card.pi-state-easy:hover{opacity:.9}
.phrase-card.pi-state-easy .phrase-arabic,
.phrase-card.pi-state-easy .pi-arabic-blur{filter:blur(3px)}

/* ── Guess prompt row ── */
.pi-guess-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.pi-guess-label{font-size:.75rem;color:var(--text-soft);white-space:nowrap}

/* ── Blurred Arabic + reveal button ── */
.pi-arabic-mask{position:relative;display:inline-flex;align-items:center;gap:6px;flex:1;min-width:0}
.pi-arabic-blur{font-size:1rem;color:var(--text);filter:blur(6px);user-select:none;transition:filter .3s ease;cursor:default;line-height:1.6}
.pi-arabic-blur.pi-revealed{filter:blur(0)}
.pi-reveal-btn{flex-shrink:0;background:var(--primary);color:#fff;border:none;padding:4px 12px;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font);font-size:.72rem;font-weight:600;transition:background .2s;line-height:1.4}
.pi-reveal-btn:hover{background:var(--primary-dark)}
.pi-reveal-btn.pi-hidden{display:none}

/* ── Revealed details (pronunciation + example + note) ── */
.pi-extra{display:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--glass-border);font-size:.82rem;line-height:1.7;color:var(--text)}
.pi-extra.pi-show{display:block}
.pi-extra-pron{color:var(--accent);font-weight:600;font-family:var(--font-en);margin-bottom:2px}
.pi-extra-example{color:var(--text-soft);font-style:italic;font-family:var(--font-en)}
.pi-extra-example-ar{color:var(--text-soft);font-size:.8rem;margin-top:2px;font-style:normal}
.pi-extra-note{color:var(--text-muted);margin-top:4px;font-size:.78rem}

/* ── Rating buttons (always visible, immune to card state) ── */
.pi-rate-row{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--glass-border);opacity:1!important;filter:none!important}
.pi-rate-btn{flex:1;border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:6px 4px;cursor:pointer;font-family:var(--font);font-size:.7rem;font-weight:600;text-align:center;transition:all .2s;background:var(--surface);color:var(--text-soft)}
.pi-rate-btn:hover{border-color:var(--primary);color:var(--text)}
.pi-rate-btn.pi-on{cursor:default;font-weight:700}
.pi-rate-btn.pi-r-easy.pi-on{border-color:var(--green);background:rgba(0,184,148,.12);color:var(--green)}
.pi-rate-btn.pi-r-hard.pi-on{border-color:var(--danger);background:rgba(255,107,107,.1);color:var(--danger)}
.pi-rate-btn.pi-r-review.pi-on{border-color:var(--amber);background:rgba(253,203,110,.12);color:var(--amber)}