/* Shared styles for the _ti2_idea_rows.html partial.
 * Mirrors the inline rules embedded at the top of speaker_detail.html so
 * other pages (e.g. speaker_detail_v2.html) can reuse the same row partial
 * without duplicating ~300 lines of CSS. */

.ti2-mono { font-family: 'JetBrains Mono', monospace; }
.ti2-feed-inner { max-width: 910px; margin: 0 auto; width: 100%; }

.ti2-row {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 10px 16px;
    margin: 0;
    border-bottom: 1px solid #0e1218;
    background: transparent;
    cursor: pointer;
    transition: background .1s;
    align-items: start;
    gap: 0 12px;
    color: #8898ac;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    box-sizing: border-box;
}
.ti2-row *, .ti2-row *::before, .ti2-row *::after { box-sizing: border-box; }
.ti2-row.yt-row { padding: 12px 16px; }
.ti2-row.ti2-no-speaker { grid-template-columns: 1fr; }
.ti2-row:hover { background: #0a0e16; }
.ti2-row.expanded { background: #0c1020; }
.ti2-row-right {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: auto; white-space: nowrap;
}
.ti2-row-time {
    font-size: 12px; color: #7a8a9d;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ti2-score-label {
    font-size: 9px; font-weight: 600; letter-spacing: 0.4px;
    color: #555D6B; font-family: 'Inter', system-ui, sans-serif;
    line-height: 1; user-select: none;
}
.ti2-thesis {
    font-size: 15.5px; line-height: 1.55; color: #c0cde0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ti2-row.yt-row .ti2-thesis { -webkit-line-clamp: 3; }
.ti2-row.expanded .ti2-thesis { -webkit-line-clamp: unset; color: #e0e8f4; }
.ti2-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.ti2-pill {
    font-size: 13px; font-weight: 600; border-radius: 50px;
    padding: 1px 10px; line-height: 24px;
    border: 1px solid; white-space: nowrap;
    cursor: pointer; position: relative;
}
.ti2-pill[data-sym]:hover { filter: brightness(1.25); }
.ti2-pill.long  { color: #34d399; background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.18); }
.ti2-pill.short { color: #f87171; background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.18); }
.ti2-pill.watch { color: #a78bfa; background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.18); }
/* Anchors inside .ti2-pill (substack/reddit cards) must take the pill's
   color regardless of visited state. Inline style="color:inherit" alone
   isn't enough — Chrome's a:visited overrides inline color for visited
   links. Selector specificity 0,2,1 here beats a:visited (0,1,1). */
.ti2-pill > a, .ti2-pill > a:visited,
.ti2-pill > a:hover, .ti2-pill > a:active { color: inherit; }
.ti2-pill .ti2-profit-dot {
    display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    margin-left: 4px; vertical-align: middle;
}
.ti2-pill .ti2-profit-dot.win  { background: #22c55e; box-shadow: 0 0 4px #22c55e44; }
.ti2-pill .ti2-profit-dot.lose { background: #ef4444; box-shadow: 0 0 4px #ef444444; }
.ti2-pill .ti2-profit-dot.flat { background: #4a5568; }
.ti2-pill-pct { font-size: 11px; font-weight: 600; margin-left: 3px; opacity: .85; }

.ti2-price-tip-float {
    position: fixed; z-index: 99999;
    background: #131820; border: 1px solid #2a3a50; border-radius: 8px;
    padding: 10px 14px; min-width: 190px; white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.3);
    pointer-events: none; transition: opacity .12s;
}
.ti2-price-tip-float .tip-arrow { position: absolute; left: 50%; transform: translateX(-50%); border: 6px solid transparent; }
.ti2-price-tip-float .tip-arrow.arrow-up { bottom: 100%; border-bottom-color: #2a3a50; }
.ti2-price-tip-float .tip-arrow.arrow-down { top: 100%; border-top-color: #2a3a50; }

.ti2-speaker {
    text-align: right; min-width: 120px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.ti2-speaker-name { font-size: 13px; color: #7a8a9d; display: flex; align-items: center; gap: 5px; }
.ti2-speaker-name a:hover { color: #c0cde0 !important; }
.ti2-speaker-role { font-size: 11px; color: #3a4a5d; }

.ti2-yt-mini {
    display: block; position: relative; margin-top: 4px;
    width: 110px; height: 62px; border-radius: 6px;
    overflow: hidden; flex-shrink: 0;
}
.ti2-yt-mini img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: opacity .15s; }
.ti2-yt-mini:hover img { opacity: 1; }
.ti2-yt-mini-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #fff; font-size: 18px; text-shadow: 0 1px 6px rgba(0,0,0,.7); pointer-events: none;
}
.ti2-yt-mini-title {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 2px 4px; font-size: 9px; color: #c0cde0;
    background: linear-gradient(transparent, rgba(0,0,0,.8));
    line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ti2-expand-detail {
    display: none; grid-column: 1 / -1;
    padding: 10px 0 4px 0; font-size: 13px; color: #7a8a9d;
}
.ti2-row.expanded .ti2-expand-detail { display: block; }
.ti2-expand-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.ti2-expand-meta span { display: flex; align-items: center; gap: 4px; }
.ti2-expand-quote {
    margin-top: 8px; padding: 8px 12px;
    border-left: 2px solid #2a3444;
    color: #7a8a9d; font-style: italic; font-size: 13px;
}

.ti2-ideas-bulb {
    display: inline-flex; align-items: center; margin-left: 3px;
    color: #d4a017 !important; text-decoration: none !important; opacity: .55;
    transition: all .15s; vertical-align: middle;
}
.ti2-ideas-bulb:visited { color: #d4a017 !important; }
.ti2-ideas-bulb:hover { opacity: 1; transform: scale(1.2); filter: drop-shadow(0 0 5px rgba(212,160,23,.5)); }
.ti2-ideas-bulb svg { display: block; }
.ti2-channel-link {
    font-size: 11px; color: #7a8a9d !important; text-decoration: none !important;
    font-weight: 500; white-space: nowrap;
    transition: color .12s;
}
.ti2-channel-link:visited { color: #7a8a9d !important; }
.ti2-channel-link:hover { color: #FF0000 !important; }

.ti2-save-btn {
    background: none; border: none; cursor: pointer;
    font-size: 16px; color: #3a4a5d; padding: 0 2px;
    line-height: 24px; vertical-align: middle;
}
.ti2-save-btn:hover { color: #c0d0e8; }
.ti2-save-btn.saved { color: #f59e0b; }

.ti2-src-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.ti2-src-icon.yt  { color: #FF0000; }
.ti2-src-icon.tw  { color: #1DA1F2; }
.ti2-src-icon.rd  { color: #FF4500; }
.ti2-src-icon.ss  { color: #FF6719; }
.ti2-src-icon.nw  { color: #94a3b8; }

.ti2-tweet-embed {
    margin-top: 8px; max-width: 500px; min-height: 0;
    overflow: hidden; border-radius: 8px;
}
.ti2-tweet-embed.loading { min-height: 200px; background: #0a0e16; border-radius: 8px; }
.ti2-tweet-embed iframe { border-radius: 8px !important; }