/* YouTube Transcript Generator - install buttons, tutorial steps + the
 * formatter panel. */

.ytg-intro { margin: 0 0 14px; color: #374151; font-size: 0.96rem; }
.ytg-install { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.ytg-install-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.ytg-install-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    flex: 0 0 auto;
}
.ytg-install-logo svg { width: 17px; height: 17px; display: block; }

.ytg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; counter-reset: ytgstep; }
.ytg-step { counter-increment: ytgstep; display: flex; flex-direction: column; gap: 10px; }
.ytg-step-text { font-size: 0.9rem; color: #374151; }
.ytg-step-text::before {
    content: counter(ytgstep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #cc0000;
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    margin-right: 8px;
}
.ytg-alt { margin: 16px 0 0; font-size: 0.88rem; color: #4b5563; }

.ytg-panel-title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: #1f2937; }
.ytg-panel-intro { margin: 0 0 12px; color: #4b5563; font-size: 0.92rem; }
.ytg-area {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.9rem;
    line-height: 1.6;
    font-family: inherit;
    resize: vertical;
}
.ytg-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ytg-check { font-size: 0.86rem; color: #334155; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.ytg-out { margin-top: 16px; }
.ytg-out[hidden] { display: none; }
.ytg-stats { font-size: 0.85rem; color: #6b7280; margin-bottom: 8px; font-weight: 600; }
.ytg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ytg-actions .ghost-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ytg-handoffs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef0f3; }
.ytg-handoff-label { font-size: 0.84rem; font-weight: 600; color: #6b7280; }
.ytg-handoffs .ghost-btn { text-decoration: none; }
.ytg-note { margin: 10px 0 0; font-size: 0.82rem; color: #64748b; }
.ytg-note[hidden] { display: none; }

@media (max-width: 640px) {
    .ytg-install { flex-direction: column; }
    .ytg-install-btn { justify-content: center; }
}