/* Small illustrated examples inside Help & guide topics. Static, decorative, labelled for assistive tech. */
.feature-example { margin: 26px 0; color: var(--ink); }
.feature-example__window {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 16px 34px -30px rgba(26, 40, 35, .4);
}
.feature-example__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; font-size: 14px; font-weight: 650; }
.feature-example__heading small { color: var(--muted); font: 500 10px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.feature-example__input { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 14px; }
.feature-example__glyph { color: var(--ink-2); font-size: 17px; }
.feature-example__input kbd { margin-left: auto; padding: 1px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--muted); font: 12px/1.6 var(--font-mono); }
.feature-example__match { display: flex; align-items: center; gap: 18px; margin-top: 12px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--lime-wash); }
.feature-example__match img { width: 38%; max-width: 168px; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; object-fit: cover; }
.feature-example__match strong { display: block; font-size: 14px; }
.feature-example__match p { margin: 3px 0 10px; font-size: 14px; }
.feature-example__tag { display: block; margin-bottom: 6px; color: var(--muted); font: 500 10px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.feature-example__control { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.4; }
.feature-example__control--primary { border-color: transparent; background: #e8eada; color: var(--ink); }
.help-topic__body .feature-example__flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.help-topic__body .feature-example__flow li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding: 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); }
.feature-example__number { color: var(--muted); font: 500 11px/1.4 var(--font-mono); }
.feature-example__flow strong { font-size: 14px; line-height: 1.4; }
.feature-example__flow small { color: var(--muted); font-size: 12px; }
.feature-example__choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; }
.feature-example__person { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; padding: 10px 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); }
.feature-example__person strong, .feature-example__person small { display: block; }
.feature-example__person strong { font-size: 14px; }
.feature-example__person small { color: var(--muted); font-size: 12px; }
.feature-example__person > :last-child { margin-left: auto; color: var(--muted); }
.feature-example__avatar { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--peach); color: #7a5034; font-size: 12px; font-weight: 700; }
.feature-example__message { padding: 12px 16px; border-radius: 18px 18px 6px 18px; background: #e7ebdc; font-size: 14px; }
.feature-example__chip { display: inline-block; margin-right: 4px; padding: 1px 8px; border: 1px solid #d0dcc1; border-radius: 999px; background: var(--surface); color: var(--ink-2); font-weight: 600; }

/* Factual check: a claim, its quiet marker and the opened evidence. */
.feature-example__claim { max-width: 88%; }
.feature-example__name { display: block; margin: 0 0 4px 12px; color: var(--faint); font-size: 12px; font-weight: 650; }
.feature-example__claim p { margin: 0; padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: var(--paper-2); font-size: 14px; line-height: 1.5; }
.feature-example__time { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0 12px; color: var(--muted); font: 11px/1.4 var(--font-mono); }
.feature-example__dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.feature-example__dot--true { color: var(--signal); }
.feature-example__dot--checking { color: #b8812f; }
.feature-example__dot--false { color: #ad5060; }
.feature-example__evidence { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.feature-example__evidence-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--muted); font: 500 10px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.feature-example__verdict { color: #ad5060; }
.feature-example__evidence strong { display: block; font-size: 14px; }
.feature-example__evidence p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.help-topic__body .feature-example__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-soft); list-style: none; }
.help-topic__body .feature-example__legend li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; color: var(--muted); font-size: 13px; }

/* Permission: the companion's question, as it appears beside the conversation. */
.feature-example__ask { padding: 18px; border: 1px solid #cbd8b9; border-radius: 18px; background: linear-gradient(165deg, #f4f6eb 0%, #e8eedb 100%); }
.feature-example__ask > strong { display: block; font-size: 16px; letter-spacing: -.01em; }
.feature-example__ask > p { margin: 4px 0 12px; color: var(--muted); font-size: 13px; }
.feature-example__detail { padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface); font-size: 13px; }
.feature-example__remember { display: flex; align-items: center; gap: 10px; margin: 12px 0 14px; color: var(--ink); font-size: 13px; }
.feature-example__remember i { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--ink-2); border-radius: 4px; background: var(--surface); }

.feature-example figcaption { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.feature-example figcaption > span { display: block; margin-top: 2px; font: 500 10px/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 600px) {
  .feature-example__window { padding: 16px; border-radius: 18px; }
  .help-topic__body .feature-example__flow { grid-template-columns: 1fr; }
  .help-topic__body .feature-example__flow li { gap: 8px; padding: 14px; }
  .feature-example__match { gap: 12px; padding: 10px; }
  .feature-example__claim { max-width: 100%; }
}