/* YouTube Title Checker - live counters, surface mocks with real
 * two-line clamps, and the checklist. */

.ytc-intro { margin: 0 0 14px; color: #4b5563; font-size: 0.95rem; }
.ytc-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.ytc-field { display: flex; flex-direction: column; gap: 5px; flex: 0 1 300px; }
.ytc-field-grow { flex: 1 1 380px; }
.ytc-label { font-size: 0.8rem; font-weight: 600; color: #374151; }
.ytc-text { flex: 0 0 auto; }
.ytc-counter { font-size: 0.78rem; color: #6b7280; }
.ytc-counter.is-near { color: #b45309; }
.ytc-counter.is-over { color: #b91c1c; font-weight: 700; }

.ytc-previews, .ytc-checks-region {
    margin: 16px 0 4px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 16px 18px;
}
.ytc-previews[hidden], .ytc-checks-region[hidden] { display: none; }
.ytc-prev-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ytc-prev-title { margin: 0 0 10px; font-size: 1rem; font-weight: 700; color: #1f2937; }
.ytc-prev-head .ytc-prev-title { margin: 0; }
.ytc-theme-toggle { font-size: 0.85rem; color: #334155; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.ytc-surfaces {
    --yt-bg: #ffffff;
    --yt-text: #0f0f0f;
    --yt-ph: #e5e5e5;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}
/* One surface per row: the mocks run at real YouTube sizes (search 240px
 * thumb + 350px title, home 360px, sidebar 168px + 234px), which never
 * fit three-across without clipping, and a mixed 1 + 2 layout read odd. */
.ytc-surfaces.ytc-dark {
    --yt-bg: #0f0f0f;
    --yt-text: #f1f1f1;
    --yt-ph: #474747;
}
/* Dark mode paints the whole "How it renders" card, not just the mocks,
 * so the three surfaces read as one dark YouTube page. */
.ytc-previews.ytc-dark { background: #0f0f0f; border-color: #303030; }
.ytc-previews.ytc-dark .ytc-prev-title,
.ytc-previews.ytc-dark .ytc-theme-toggle { color: #f1f1f1; }
.ytc-previews.ytc-dark .ytc-surface-name { color: #aaaaaa; }
.ytc-surface { min-width: 0; }
.ytc-surface-name { font-size: 0.8rem; font-weight: 600; color: #6b7280; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.ytc-badge {
    background: #fff7ed;
    color: #b45309;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}
.ytc-badge[hidden] { display: none; }
.ytc-mockwrap { overflow-x: auto; }
.ytc-mock {
    background: var(--yt-bg);
    border-radius: 10px;
    padding: 14px;
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
}
.ytc-mock-thumb { display: block; background: var(--yt-ph); border-radius: 10px; flex: 0 0 auto; }
.ytc-render { color: var(--yt-text); display: block; overflow: hidden; word-break: break-word; }

/* Search: 360x202 thumb left of a 590px text column at 18px/26, 2 lines. */
.ytc-mock-search { display: flex; gap: 14px; min-width: 560px; }
.ytc-mock-search .ytc-mock-thumb { width: 240px; height: 135px; }
.ytc-render-search { font-size: 18px; line-height: 26px; max-height: 52px; font-weight: 400; flex: 0 1 350px; }

/* Home: 360-wide tile, 16px/22, 2 lines. */
.ytc-mock-home { width: 360px; max-width: 100%; }
.ytc-mock-thumb-top { width: 100%; height: 180px; margin-bottom: 10px; }
.ytc-render-home { font-size: 16px; line-height: 22px; max-height: 44px; font-weight: 500; }

/* Sidebar: 168x94 thumb, 234px text column at 14px/20, 2 lines. */
.ytc-mock-side { display: flex; gap: 8px; min-width: 380px; }
.ytc-mock-thumb-sm { width: 168px; height: 94px; border-radius: 8px; }
.ytc-render-side { font-size: 14px; line-height: 20px; max-height: 40px; font-weight: 500; flex: 0 1 234px; }

/* Checklist */
.ytc-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ytc-check { display: flex; gap: 9px; align-items: flex-start; font-size: 0.88rem; }
.ytc-check.is-ok { color: #047857; }
.ytc-check.is-warn { color: #b45309; }
.ytc-check.is-info { color: #475569; }
.ytc-check-mark {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 1px;
}
.ytc-check.is-ok .ytc-check-mark { background: #ecfdf5; }
.ytc-check.is-warn .ytc-check-mark { background: #fff7ed; }
.ytc-check.is-info .ytc-check-mark { background: #eef2f7; }
.ytc-next { margin: 14px 0 0; font-size: 0.86rem; color: #4b5563; }

@media (max-width: 640px) {
    .ytc-mock-search, .ytc-mock-side { min-width: 0; flex-wrap: wrap; }
    .ytc-render-search, .ytc-render-side { flex: 1 1 100%; }
}