/*
|---------------------------------------------------------------
| COMPONENTS — reusable UI component styles
|---------------------------------------------------------------
| Extracted from inline <style> blocks so a single definition is
| shared across views. Add further reusable components here.
*/

/* ── Post / Log cards (dashboard, posts index, recent activity) ── */
.post-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.post-card {
    background: rgba(14,14,28,0.95);
    border: 1px solid rgba(var(--pp-rgb,168,85,247),0.2);
    border-left: 3px solid var(--pp-dk,#6b21a8);
    border-radius: 4px;
    padding: 14px 16px;
    position: relative;
    transition: border-color 0.2s;
}
.post-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--pp-dk,#6b21a8), transparent);
}
.post-card:hover { border-color: rgba(var(--pp-rgb,168,85,247),0.5); }
.post-card-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: baseline;
    margin-bottom: 6px;
}
.post-card-title {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.post-card-title a { color: #f0f0ff !important; text-decoration: none; }
.post-card-title a:hover { color: var(--pp-lt,#c084fc) !important; text-shadow: 0 0 8px rgba(var(--pp-rgb,168,85,247),0.4); }
.post-card-irl-date,
.post-card-irl-time {
    font-size: 0.78rem;
    color: #888;
    letter-spacing: 0.08em;
    white-space: nowrap;
    font-family: 'Rajdhani', sans-serif;
}
.post-card-irl-date { font-weight: 600; color: var(--pp-lt,#c084fc); }
.post-card-meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(var(--pp-rgb,168,85,247),0.1); }
.post-card-authors { font-size: 0.85rem; color: var(--pp,#a855f7); }
.post-card-mission-name { font-size: 0.78rem; color: var(--pp-dk,#6b21a8); letter-spacing: 0.06em; text-align: center; font-weight: 600; }
.post-card-mission-name a { color: var(--pp-dk,#6b21a8) !important; text-decoration: none; }
.post-card-mission-name a:hover { color: var(--pp,#a855f7) !important; }
.post-card-mission-day { font-size: 0.78rem; color: var(--pp,#a855f7); font-weight: 600; text-align: right; }


/* -- Listen / text-to-speech control (posts, bios, wiki) -- */
.post-listen-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.listen-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(20,20,34,0.9); border: 1px solid rgba(var(--pp-rgb,168,85,247),0.5);
    color: var(--pp,#a855f7); font-family: 'Cinzel', serif; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 14px;
    border-radius: 4px; cursor: pointer; transition: all 0.2s;
}
.listen-btn:hover { background: rgba(var(--pp-dk-rgb,107,33,168),0.4); border-color: var(--pp,#a855f7); color: var(--pp-lt,#c084fc); box-shadow: 0 0 10px rgba(var(--pp-rgb,168,85,247),0.3); }
.listen-btn-stop { color: #f59e0b; border-color: rgba(245,158,11,0.5); }
.listen-btn-stop:hover { background: rgba(120,53,15,0.3); border-color: #f59e0b; color: #fbbf24; box-shadow: 0 0 10px rgba(245,158,11,0.25); }
.listen-icon { font-size: 0.7rem; line-height: 1; }
.listen-status { font-size: 0.78rem; color: #888899; font-style: italic; }
.listen-voice {
    background: rgba(20,20,34,0.9); border: 1px solid rgba(var(--pp-rgb,168,85,247),0.3); color: #c8c8d8;
    font-size: 0.75rem; padding: 5px 8px; border-radius: 4px; max-width: 210px;
}
.listen-rate { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; color: #888899; letter-spacing: 0.05em; text-transform: uppercase; }
.listen-rate-input { accent-color: var(--pp,#a855f7); cursor: pointer; }
.listen-rate-val { color: var(--pp,#a855f7); font-weight: 700; min-width: 34px; }
@media (max-width: 640px) { .listen-voice { max-width: 140px; } .post-listen-bar { gap: 8px; } }

/* Listen + Translate share one row on the post page: audio left, translate pushed right */
.post-tools-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.post-tools-row .post-listen-bar { margin: 0; }
.post-tools-row .xlate-wrap { margin: 0 0 0 auto !important; }
@media (max-width: 640px) { .post-tools-row .xlate-wrap { margin-left: 0 !important; } }