/*
  The thumbnail tester fills the screen under the site header: a one-line title bar,
  then the tester edge to edge. The tester is a self-contained page that keeps its own
  dark palette in every site theme, so this only sizes it. The page content follows below.
*/
.thumb-stage { display: flex; flex-direction: column; height: calc(100vh - 69px); height: calc(100dvh - 69px); min-height: 560px; }
.thumb-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 20px; padding: 10px 28px; border-bottom: 1px solid var(--cw-border-soft); }
.thumb-bar h1 { margin: 0; color: var(--cw-text); font-size: 16px; line-height: 1.4; font-weight: 700; }
.thumb-bar h1 span { color: var(--cw-blue); }
.thumb-bar p { margin: 0; color: var(--cw-faint); font-size: 13px; }
.thumb-bar a { margin-left: 8px; color: var(--cw-muted); text-decoration: underline; text-underline-offset: 3px; }
.thumb-page .tool-intro { scroll-margin-top: 16px; }
.thumb-frame { display: block; flex: 1; width: 100%; min-height: 0; border: 0; background: #0f0f0f; }

.thumb-page .tool-intro h2 { margin: 0 0 12px; color: var(--cw-text); font-size: 22px; line-height: 1.3; }

@media (max-width: 600px) {
  .thumb-bar { padding: 8px 16px; }
  .thumb-bar h1 { font-size: 14px; }
  .thumb-bar p { display: none; }
  /* On a phone the bar shows only the title; the FAQ is one scroll below the tester. */
}