/*
 * test-layout.css — exp-0017 body arm (inc/test-layout.php): the tag row under
 * the title, and the block that now follows the questions — a divider, the
 * intro, then the reviewer box.
 * Loaded only for users in the body/both arms; styles only .tl-after, which
 * the control page never contains.
 */
/* the title right under the header (Lewis 2026-09-25: "too far down"): drop the
   column's top padding and the title's top margin on rearranged pages only */
.test-contain.tl-on > .grid > .grid-cell:first-child { padding-top: 4px; }
.test-contain.tl-on h1 { margin-top: 0; }

/* Hold the questions still (Lewis 2026-09-25). On phones Raptive inserts a
   320x50/100 banner directly above .qcont about 5 s after load (Android Chrome's
   delayed ad loading) and it pushed the questions down 100px — on screen, once
   they sit right under the title. Reserve that slot from the start: the question
   box starts 118px below whatever precedes it (the tags row on most tests, else
   the title), and when the banner arrives it brings that space with it (18px top
   margin + a 100px box; the question box's margin drops to 0), so nothing moves
   whatever the element above's own bottom margin is (collapsing: 18 >= it).
   Without a banner (no fill, ad blockers) the band stays empty. Phones only:
   Raptive's phone breakpoint is < 690px; desktop gets no banner there. */
@media (max-width: 689px) {
  .test-contain.tl-on h1 { margin-bottom: 18px; }
  .test-contain.tl-on .qcont { margin-top: 118px; }
  .test-contain.tl-on [id^="AdThrive_Header_1"] {
    box-sizing: border-box; height: 100px !important; min-height: 100px !important;
    margin: 18px 0 0 !important; padding: 0 !important; overflow: hidden;
  }
  .test-contain.tl-on [id^="AdThrive_Header_1"] + .qcont { margin-top: 0; }
}

.test-contain .tl-after > p:first-child,
.test-contain .tl-after > h3:first-child { margin-top: 0; }

.test-contain .tl-meta { margin: 18px 0 6px; }
.test-contain .tl-meta #academic-reviewer { margin: 0 0 14px; }

.test-contain .tl-meta .lang-tags { margin: 0; }
/* DEV-1139's mobile rules (views/header.php) give the endorsements, reviewer box and
   tags row negative top margins so they tuck under the header; below the intro that
   pulls them into the paragraph above. Reset them and space the meta blocks evenly. */
.test-contain .tl-meta > * { margin-top: 0 !important; }
.test-contain .tl-meta > * + * { margin-top: 12px !important; }
.test-contain .tl-meta .lang-tags:empty { display: none; }

/* The tags, back under the title (Lewis 2026-09-26): one quiet row of links after a
   tag icon, so they read as categories to browse rather than statements. */
.test-contain .tl-tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0;
  margin: -6px 0 0; font-size: 14px; line-height: 1.5; color: #8a8f94; }
.test-contain .tl-tags .icon-tag { margin-right: 6px; font-size: 13px; }
.test-contain .tl-tags .icon-tag:before { margin: 0; }
.test-contain .tl-tags a { color: #2d7fae; text-decoration: none; }
.test-contain .tl-tags a:after { display: none; }
.test-contain .tl-tags a:hover { text-decoration: underline; }
.test-contain .tl-tags a + a:before { content: "\00b7"; display: inline-block; margin: 0 7px; color: #b5b9bd; }

/* the break between the test and the reading: a divider line, no heading (Lewis 2026-09-26:
   the intro's own subheading — "Which … character are you?" — leads the section) */
.test-contain .tl-after { margin: 32px 0 8px; padding-top: 22px; border-top: 1px solid rgba(127,127,127,.22); }

/* desktop: the subheading stays under the title in its own stock style (Lewis 2026-09-26) */
.test-contain.tl-on h3[data-tl="sub"] + .tl-tags { margin-top: 0; }
@media (min-width: 690px) { .test-contain.tl-on .tl-tags { margin-bottom: 10px; } }