/*
 * The Question research page (/features/question-research/), linked from that page only.
 * DESIGN.md, "The Question research page in detail". Everything here is inside
 * main.qr-page and starts with .qr-, so nothing reaches another page. The site's own
 * parts (hero, story, crux-feature, faq, feat-related, the closing band) are unchanged.
 */

.qr-page {
  /* The app's Modelled and Observed chips (DESIGN.md front matter: wait, wait-wash,
     good, good-wash), used on this page only. */
  --qr-wait: #6e5c00;
  --qr-wait-wash: #f4f0dc;
  --qr-good: #15803d;
  --qr-good-wash: #eaf6ee;
}

/* ---------- Footage: the app, filling its frame from the top left ---------- */

.qr-clip video,
.qr-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: left top;
}

.qr-shot {
  background: #fff;
}

/* ---------- Chips ---------- */

.qr-tag {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--sheet);
  color: var(--ink-2);
  font: 500 12.5px/1 var(--font);
  white-space: nowrap;
}

.qr-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: 10px;
  padding: 0 8px;
  border-radius: 999px;
  font: 500 12px/1 var(--font);
  vertical-align: 1px;
}

.qr-chip-modelled {
  background: var(--qr-wait-wash);
  color: var(--qr-wait);
}

.qr-chip-observed {
  background: var(--qr-good-wash);
  color: var(--qr-good);
}

/* ---------- 01 The idea: a keyword, its questions, the searches, every day ---------- */

.qr-idea-head .lede {
  max-width: 560px;
}

.qr-flow {
  margin-top: 48px;
  padding: clamp(20px, 3vw, 36px);
  border-radius: 28px;
  background: var(--sheet);
}

.qr-flow-steps {
  display: grid;
  grid-template-columns:
    minmax(0, 0.85fr) minmax(0, 1.3fr) minmax(0, 1.3fr)
    minmax(0, 0.95fr);
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qr-flow-step {
  position: relative;
  min-width: 0;
}

/* The arrow to the next column, in the gap between them. */
.qr-flow-step:not(:last-child)::after {
  position: absolute;
  top: 1px;
  right: -36px;
  width: 16px;
  height: 16px;
  background: var(--faint);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E")
    center / contain no-repeat;
  content: "";
}

.qr-flow-name {
  color: var(--muted);
  font: 400 13px/1.4 var(--mono);
}

.qr-flow-name b {
  margin-right: 8px;
  color: var(--brand);
  font-weight: 500;
}

.qr-keyword {
  display: inline-block;
  margin-top: 16px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 400 14px/1.4 var(--mono);
}

.qr-flow-from {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.qr-flow-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.qr-flow-list li {
  position: relative;
  padding: 11px 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.45;
}

.qr-flow-list li + li {
  border-top: 1px solid var(--line);
}

/* On the sheet panel a chip stands on white, on its own line under the words. */
.qr-flow .qr-tag {
  display: flex;
  width: max-content;
  margin-top: 8px;
  background: #fff;
}

.qr-flow-searches li {
  padding-left: 26px;
}

.qr-flow-searches img {
  position: absolute;
  top: 14px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.qr-engines {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.qr-engines img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.qr-flow-text {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- The three parts ---------- */

.qr-part .eyebrow {
  display: flex;
  align-items: center;
}

.qr-part .eyebrow .qr-chip {
  margin-left: 12px;
}

/* ---------- Narrower ---------- */

@media (max-width: 1100px) {
  .qr-flow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 56px;
  }

  /* Two to a row: the arrow after the second column has nowhere to point. */
  .qr-flow-step:nth-child(2)::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .qr-flow-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  /* One column: every arrow turns down, into the gap under its step. */
  .qr-flow-step:not(:last-child)::after,
  .qr-flow-step:nth-child(2)::after {
    top: auto;
    right: auto;
    bottom: -30px;
    left: 0;
    display: block;
    transform: rotate(90deg);
  }
}