/* Shared by the selected study and private example review. The tallest record sets the height. */
.example-stage{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;min-width:0}
.example-slide{grid-area:1/1;min-width:0;opacity:0;pointer-events:none;transition:opacity .38s ease}
.example-slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.example-controls{display:flex;gap:6px;margin-top:16px;overflow-x:auto;scrollbar-width:thin;padding:2px 0 8px}
.example-controls button{flex:none;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);font:600 11px/1.1 "Hanken Grotesk",Arial,sans-serif;white-space:nowrap;cursor:pointer}
.example-controls button[aria-pressed="true"]{border-color:var(--gold);background:#e9dfcc;color:var(--gold)}
.example-controls button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.extra-field{grid-column:1/-1;padding-top:11px;border-top:1px solid var(--dark-line)}
@media(max-width:760px){.example-controls{margin-top:13px}}
@media(max-width:450px){
  .example-slide .detail-fields>div:nth-child(2),.example-slide .detail-fields>.email-field{grid-column:1/-1}
  .example-slide .detail-fields dd{overflow-wrap:normal;word-break:normal}
  .example-slide .email-field dd{font-size:clamp(10px,3vw,12px);white-space:nowrap;letter-spacing:-.03em}
}
@media(prefers-reduced-motion:reduce){.example-slide{transition:none}}
