.example-top,.example-sector,.example-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.example-top { min-height:32px; margin-bottom:12px; }
.example-top .card-label { margin:0; }
.preview-control { border:0; border-radius:6px; background:transparent; color:#176e60; font-size:.75rem; font-weight:650; padding:8px; cursor:pointer; }
.preview-control:hover { background:#e0f2ec; }
.preview-control:focus-visible,.evidence-open:focus-visible { outline:3px solid #167b68; outline-offset:3px; }
.example-sector { color:#52717e; font-size:.75rem; margin-bottom:18px; }
#example-sector { color:#176e60; font-weight:750; }
.example-stage .question { min-height:76px; margin-left:22px; }
.example-stage .answer { min-height:110px; margin-top:20px; }
.answer-content { min-width:0; }
#example-thinking { color:#64808c; font-size:.85rem; }
.progress-wheel { display:inline-block; width:18px; height:18px; border:2px solid #c4ddd5; border-top-color:#167b68; border-radius:50%; vertical-align:middle; margin-right:7px; }
.motion-enabled .progress-wheel { animation:wheel-spin 750ms linear infinite; }
@keyframes wheel-spin { to { transform:rotate(360deg); } }
.is-typing::after { content:''; display:inline-block; width:2px; height:1em; background:#167b68; margin-left:2px; vertical-align:-2px; animation:caret-blink 750ms step-end infinite; }
@keyframes caret-blink { 50% {opacity:0;} }
.is-paused .progress-wheel,.is-paused .is-typing::after { animation-play-state:paused; }
#example-answer { display:block; opacity:0; transform:translateY(6px); transition:opacity 280ms ease,transform 280ms ease; }
#example-answer.answer-visible {opacity:1;transform:none;}

.example-source { transition:opacity 280ms ease, transform 280ms ease; }
.example-source.is-pending { opacity:0; transform:translateY(8px); pointer-events:none; visibility:hidden; }
.animated-preview .evidence-label { margin:12px 0 10px; }
.animated-preview .evidence-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:9px; padding:12px 10px; border-radius:12px; background:#fbfdfe; min-height:90px; }
.animated-preview .document-icon { width:28px; height:34px; border-radius:9px; background:#e8f7f2; }
.animated-preview .document-icon svg { width:16px; }
.animated-preview .evidence-copy strong { font-size:.76rem; line-height:1.4; }
.animated-preview .evidence-copy small { font-size:.69rem; line-height:1.5; color:#6f899b; }
.evidence-copy b { color:#087f79; font-weight:650; }
.relevance-bars { display:flex; gap:3px; margin-top:7px; }
.relevance-bars i { width:29px; height:4px; background:#2c8973; border-radius:1px; }
.evidence-open { border:0; padding:7px 0; background:transparent; color:#087f79; font:inherit; font-size:.69rem; font-weight:650; white-space:nowrap; cursor:pointer; }
.example-bottom { margin-top:14px; min-height:32px; color:#6b818b; font-size:.66rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#evidence-dialog blockquote { margin:24px 0; padding:12px 18px; border-left:3px solid var(--mint); line-height:1.7; }
@media(max-width:520px) { .example-stage .question {min-height:96px;} .example-stage .answer {min-height:142px;} }
@media(max-width:380px) { .animated-preview .evidence-row { grid-template-columns:28px minmax(0,1fr); } .evidence-open { grid-column:2; justify-self:start; } .example-stage .answer { min-height:166px; } }
@media(prefers-reduced-motion:reduce) { .animated-preview:not(.motion-enabled) .example-source,.animated-preview:not(.motion-enabled) #example-answer {transition:none;} }

.example-top .card-label {font-size:.65rem;}

/* Keep the automatic sequence while reducing decorative motion when requested. */
@media(prefers-reduced-motion:reduce) { .motion-enabled .progress-wheel,.is-typing::after {animation:none;} .example-source,#example-answer {transition:none;} }