/* YouTube thumbnail tester: a mock feed drawn to YouTube's proportions with neutral placeholders. */
.tt-editor { display: grid; gap: 14px; }
.tt-editor .tool-row .seg { justify-self: start; }
.tt-mock { --tt-ink: #0f0f0f; --tt-faint: #606060; --tt-bar: rgba(0, 0, 0, 0.09); padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px; display: grid; gap: 22px 16px; overflow: hidden; }
.tt-mock.is-dark { --tt-ink: #f1f1f1; --tt-faint: #aaaaaa; --tt-bar: rgba(255, 255, 255, 0.14); background: #0f0f0f; border-color: #262626; }
.tt-card { display: grid; gap: 12px; min-width: 0; }
.tt-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--tt-bar); }
.tt-thumb img, .tt-thumb i { display: block; width: 100%; height: 100%; object-fit: cover; }
.tt-dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.8); color: #fff; font: 500 12px/1.4 var(--sans); }
.tt-tag { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 11px/1.5 var(--sans); letter-spacing: 0.04em; }
.tt-meta { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.tt-avatar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--tt-bar); }
.tt-text { display: grid; gap: 5px; min-width: 0; flex: 1; align-content: start; }
.tt-title { font: 600 15px/1.3 var(--sans); color: var(--tt-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tt-line { font: 400 13px/1.3 var(--sans); color: var(--tt-faint); }
.tt-bar { display: block; height: 13px; border-radius: 5px; background: var(--tt-bar); }
.tt-bar-sm { height: 10px; margin-top: 2px; }
/* Home: three columns like the desktop grid */
.tt-mock.is-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Search: rows with the thumbnail on the left */
.tt-mock.is-search { grid-template-columns: 1fr; gap: 18px; }
.tt-mock.is-search .tt-card { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 16px; }
.tt-mock.is-search .tt-avatar { display: none; }
.tt-mock.is-search .tt-title { font-size: 18px; }
/* Sidebar: the small suggested size, 168 px wide */
.tt-mock.is-sidebar { grid-template-columns: 1fr; gap: 10px; max-width: 440px; }
.tt-mock.is-sidebar .tt-card { grid-template-columns: 168px minmax(0, 1fr); gap: 8px; }
.tt-mock.is-sidebar .tt-thumb { border-radius: 8px; }
.tt-mock.is-sidebar .tt-avatar { display: none; }
.tt-mock.is-sidebar .tt-title { font-size: 13px; }
.tt-mock.is-sidebar .tt-line, .tt-mock.is-sidebar .tt-dur { font-size: 12px; }
.tt-mock.is-sidebar .tt-bar { height: 11px; }
/* Phone: one column at 390 px */
.tt-mock.is-mobile { grid-template-columns: 1fr; gap: 20px; max-width: 390px; margin-inline: auto; padding: 0 0 12px; border-radius: 22px; }
.tt-mock.is-mobile .tt-thumb { border-radius: 0; }
.tt-mock.is-mobile .tt-meta { padding: 0 12px; }
.tt-checks { display: grid; gap: 6px; }
.tt-checkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 13px/1.3 var(--sans); }
.tt-checkrow b { margin-right: 4px; }
.tt-chip { padding: 4px 10px; border-radius: 999px; font: 500 12.5px/1.3 var(--sans); }
.tt-chip.is-pass { background: rgba(23, 160, 106, 0.12); color: #0f7a4f; }
.tt-chip.is-fail { background: rgba(242, 84, 61, 0.12); color: #b8321c; }
.tt-editor .chip-btn { cursor: pointer; }
@media (max-width: 760px) {
  .tt-mock.is-home { grid-template-columns: 1fr; }
  .tt-mock.is-search .tt-card { grid-template-columns: 1fr; }
  .tt-mock.is-sidebar .tt-card { grid-template-columns: 140px minmax(0, 1fr); }
}
.tt-editor .tool-row { min-width: 0; }
.tt-editor .tool-actions { flex-wrap: wrap; }
.tt-editor .tool-actions .btn { white-space: normal; }