/* Section 03. Brand values come from tokens.css; scene geometry stays local. */
.study-examples { min-height:0; gap:var(--space-10); padding-bottom:var(--space-20); }
.study-examples .example-heading { align-items:center; }
.example-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:var(--control-border-width) solid var(--rule); gap:var(--space-8); }
.example-tabs[hidden] { display:none; }
.example-tabs button { position:relative; display:flex; align-items:baseline; gap:var(--space-3); text-align:left; min-width:0; min-height:var(--control-target-min); padding:var(--space-4) 0; border:0; border-radius:var(--control-radius); background:none; color:var(--text-soft); font:var(--type-weight-medium) var(--type-tabs)/var(--type-line-body) var(--font-body); cursor:pointer; transition:color var(--motion-fast) var(--motion-ease-rise); }
.example-tabs button::after { content:''; position:absolute; inset:auto 0 calc(-1 * var(--control-border-width)); height:var(--control-focus-width); background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform var(--motion-tab) var(--motion-ease-rise); }
.example-tabs button:hover { color:var(--ink); }
.example-tabs button:active { transform:translateY(var(--control-border-width)); }
.example-tabs button:focus-visible { outline:var(--control-focus-width) solid var(--ink); outline-offset:var(--control-focus-offset); }
.example-tabs button[aria-selected="true"] { color:var(--ink); }
.example-tabs button[aria-selected="true"]::after { transform:scaleX(1); }
.example-tabs .tab-index { flex:none; color:var(--ink); font-size:var(--type-body-detail); font-variant-numeric:tabular-nums; }
.example-board { min-width:0; }
.example-panel { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:center; gap:var(--space-16); min-height:26rem; scroll-margin-top:var(--space-24); }
.example-panel[hidden] { display:none; }
.example-panel + .example-panel { margin-top:var(--space-16); padding-top:var(--space-12); border-top:var(--control-border-width) solid var(--rule); }
.examples-ready .example-panel { margin-top:0; padding-top:0; border-top:0; }
.example-story { display:grid; align-content:start; gap:var(--space-4); }
.example-context { color:var(--ink); font-size:var(--type-body-detail); line-height:var(--type-line-body); }
.example-story h3 { margin:0; max-width:23ch; color:var(--text); font-size:var(--type-step-title); font-weight:var(--type-weight-medium); line-height:1.2; letter-spacing:var(--type-tracking-display); text-wrap:balance; }
.example-story p { text-wrap:pretty; }
.example-pain,.example-benefit p { color:var(--text-soft); font-size:var(--type-body); line-height:var(--type-line-copy); max-width:42ch; }
.example-benefit { display:grid; gap:var(--space-2); margin-top:var(--space-4); }
.example-benefit h4 { margin:0; color:var(--ink); font-size:var(--type-label); font-weight:var(--type-weight-medium); }
.example-figure { margin:0; min-width:0; }
.example-figure figcaption { margin-top:var(--space-5); color:var(--text-soft); font-size:var(--type-body-detail); line-height:var(--type-line-body); text-align:center; text-wrap:pretty; }
.example-scene { min-width:0; padding:var(--space-4); }
.example-scene svg { width:1.2em; height:1.2em; flex:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.scene-paper { min-width:0; background:var(--color-surface); border:var(--control-border-width) solid var(--color-border-paper); padding:var(--space-5) var(--space-6); box-shadow:var(--space-2) var(--space-2) 0 var(--color-shadow-paper); transform:rotate(var(--paper-tilt,0deg)); }
.scene-meta { display:flex; align-items:center; gap:var(--space-2); color:var(--ink); font-size:var(--type-body-detail); line-height:var(--type-line-body); }
.scene-diamond { width:.4rem; height:.4rem; margin-inline:var(--space-1); background:var(--ink); transform:rotate(45deg); flex:none; }

/* A message becomes a prepared request; the date remains unconfirmed. */
.scene-tasks { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); }
.request-message { grid-column:1 / 7; grid-row:1; --paper-tilt:-2deg; padding-bottom:var(--space-8); }
.request-message p { margin-top:var(--space-4); font-size:var(--type-body-small); line-height:var(--type-line-copy); color:var(--text); }
.request-record { grid-column:3 / -1; grid-row:2; margin-top:calc(-1 * var(--space-2)); }
.request-fields { margin:var(--space-3) 0 0; font-size:var(--type-body-small); }
.request-fields > div { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); padding-block:var(--space-2); border-bottom:var(--control-border-width) solid var(--color-paper-divider); }
.request-fields dt { color:var(--text-soft); }
.request-fields dd { margin:0; font-weight:var(--type-weight-medium); font-variant-numeric:tabular-nums; }
.request-pending dd { color:var(--ink); }
.scene-status { display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-4); color:var(--ink); font-size:var(--type-body-detail); }
.scene-connection { position:relative; grid-column:1 / 3; grid-row:2; height:4rem; margin-left:var(--space-6); border-left:var(--control-border-width) solid var(--rule); border-bottom:var(--control-border-width) solid var(--rule); }
.scene-connection span { position:absolute; inset:0 calc(-1 * var(--control-border-width)) calc(-1 * var(--control-border-width)); border-left:var(--control-border-width) solid var(--ink); border-bottom:var(--control-border-width) solid var(--ink); }
.scene-connection::after { content:''; position:absolute; right:calc(-1 * var(--space-1)); bottom:calc(-1 * var(--space-1)); width:var(--space-2); height:var(--space-2); background:var(--ink); transform:rotate(45deg); }

/* A question, its sources and a readable answer. No simulated text input. */
.scene-knowledge { display:grid; grid-template-columns:1fr; align-content:center; }
.knowledge-question { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) 0 var(--space-6); }
.knowledge-question svg { color:var(--ink); }
.knowledge-question p { font-size:var(--type-card-title); line-height:var(--type-line-body); text-wrap:balance; }
.knowledge-sources { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.knowledge-sources > div { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3); background:var(--color-surface-muted); font-size:var(--type-body-detail); color:var(--text-soft); }
.knowledge-sources svg { color:var(--ink); }
.knowledge-connection { position:relative; height:var(--space-8); width:50%; justify-self:center; }
.knowledge-connection::before { content:''; position:absolute; inset:0 0 50%; border:var(--control-border-width) solid var(--rule); border-top:0; }
.knowledge-connection span { position:absolute; top:50%; bottom:0; width:var(--control-border-width); left:50%; background:var(--ink); transform-origin:top; }
.knowledge-answer p { font-size:var(--type-body); line-height:var(--type-line-copy); margin-top:var(--space-4); }
.answer-source { display:flex; align-items:center; gap:var(--space-2); border-top:var(--control-border-width) solid var(--color-paper-divider); margin-top:var(--space-5); padding-top:var(--space-3); color:var(--ink); font-size:var(--type-body-detail); line-height:var(--type-line-body); }

/* An operational view with pending and completed work. */
.scene-oversight { display:grid; align-content:center; }
.operation-header { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); padding-bottom:var(--space-5); border-bottom:var(--control-border-width) solid var(--rule); }
.operation-header strong { font-size:var(--type-card-title); font-weight:var(--type-weight-medium); }
.operation-list { position:relative; list-style:none; padding:0; margin:var(--space-2) 0 0; }
.operation-list::before { content:''; position:absolute; left:.35rem; width:var(--control-border-width); top:var(--space-6); bottom:var(--space-6); background:var(--rule); }
.operation-item { position:relative; display:flex; align-items:baseline; gap:var(--space-4); padding-block:var(--space-4); }
.operation-point { position:relative; z-index:1; flex:none; width:.75rem; height:.75rem; border:var(--control-border-width) solid var(--ink); background:var(--color-surface); border-radius:50%; }
.operation-point svg { display:block; width:100%; height:100%; color:var(--ink); }
.operation-detail { flex:1; min-width:0; }
.operation-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-1) var(--space-3); justify-content:space-between; }
.operation-title strong { font-size:var(--type-body-small); font-weight:var(--type-weight-medium); font-variant-numeric:tabular-nums; }
.operation-status { color:var(--ink); font-size:var(--type-body-detail); }
.operation-origin { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-1) var(--space-3); margin-top:var(--space-2); color:var(--text-soft); font-size:var(--type-body-detail); line-height:var(--type-line-body); }
.operation-origin span:last-child { color:var(--ink); font-variant-numeric:tabular-nums; }
.operation-item.is-complete .operation-origin span:last-child { color:var(--text-soft); }
.operation-detail p { margin-top:var(--space-2); color:var(--text-soft); font-size:var(--type-body-detail); line-height:var(--type-line-body); }
.operation-item.is-complete .operation-title,.operation-item.is-complete .operation-status { color:var(--text-soft); }
.example-notes { display:grid; gap:var(--space-2); padding-top:var(--space-4); border-top:var(--control-border-width) solid var(--rule); color:var(--text-soft); font-size:var(--type-body-detail); line-height:var(--type-line-body); }
.example-next { display:none; }
.example-next[hidden] { display:none; }

/* One short sequence per selection, with all text readable from the start. */
.example-panel.is-tracing .scene-paper { animation:example-paper-in var(--motion-reveal) var(--motion-ease-rise) backwards; }
.example-panel.is-tracing .request-record,.example-panel.is-tracing .knowledge-answer { animation-delay:var(--motion-fast); }
.example-panel.is-tracing .scene-connection span { animation:example-connect var(--motion-calendar) var(--motion-ease-draw) backwards; }
.example-panel.is-tracing .knowledge-connection span { animation:example-line var(--motion-calendar) var(--motion-ease-draw) backwards; }
.example-panel.is-tracing .operation-item { animation:example-item-in var(--motion-calendar) var(--motion-ease-rise) backwards; }
.example-panel.is-tracing .operation-item:nth-child(2) { animation-delay:var(--motion-fast); }
.example-panel.is-tracing .operation-item:nth-child(3) { animation-delay:var(--motion-state); }
@keyframes example-paper-in { from { opacity:.35; transform:translateY(var(--space-3)) rotate(var(--paper-tilt,0deg)); } to { opacity:1; transform:translateY(0) rotate(var(--paper-tilt,0deg)); } }
@keyframes example-item-in { from { opacity:.35; transform:translateY(var(--space-2)); } to { opacity:1; transform:translateY(0); } }
@keyframes example-connect { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0 -1px -1px -1px); } }
@keyframes example-line { from { transform:scaleY(0); } to { transform:scaleY(1); } }

@media(min-width:1500px) { .example-panel { gap:var(--space-24); } }
@media(max-width:1000px) {
  .example-panel { gap:var(--space-8); }
  .example-tabs { gap:var(--space-4); }
  .example-tabs button { font-size:var(--type-body); }
  .scene-paper { padding:var(--space-4); }
}
@media(max-width:720px) {
  .study-examples { padding-top:var(--space-20); padding-bottom:var(--space-12); gap:var(--space-6); }
  .study-examples .plate-label { top:var(--space-8); }
  .study-examples .example-heading { gap:var(--space-4); }
  .example-panel { grid-template-columns:1fr; min-height:0; gap:var(--space-6); align-items:start; }
  .example-story { gap:var(--space-3); }
  .example-story h3 { max-width:26ch; }
  .example-pain,.example-benefit p { max-width:50ch; }
  .example-benefit { margin-top:var(--space-2); }
  .example-figure { width:100%; max-width:34rem; justify-self:center; }
  .example-scene { padding:var(--space-2); }
  .example-figure figcaption { margin-top:var(--space-4); text-align:left; }
  .example-notes { gap:var(--space-3); }
  .example-next { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:var(--control-target-min); padding:var(--space-4) 0; border:0; border-top:var(--control-border-width) solid var(--rule); border-radius:var(--control-radius); background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
  .example-next > span { display:grid; gap:var(--space-1); }
  .example-next .example-next-label { color:var(--text-soft); font-size:var(--type-body-detail); }
  .example-next svg { width:var(--space-6); height:var(--space-6); flex:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
  .example-next:hover { color:var(--text); }
  .example-next:focus-visible { outline:var(--control-focus-width) solid var(--ink); outline-offset:var(--control-focus-offset); }
}
@media(max-width:600px) {
  .example-tabs { grid-template-columns:1fr; gap:0; border-bottom:0; }
  .example-tabs button { align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-2); border-bottom:var(--control-border-width) solid var(--rule); }
  .example-tabs button[aria-selected="true"] { background:var(--ink-faint); }
  .example-tabs .tab-index { min-width:var(--space-5); }
  .example-tabs button::after { inset:0 auto 0 0; width:var(--control-focus-width); height:auto; transform:scaleY(0); transform-origin:top; }
  .example-tabs button[aria-selected="true"]::after { transform:scaleY(1); }
  .request-message { grid-column:1 / 8; padding-bottom:var(--space-6); }
  .request-record { grid-column:2 / -1; margin-top:var(--space-4); }
  .scene-connection { grid-column:1 / 2; margin-left:0; margin-top:var(--space-2); }
  .request-message p { margin-top:var(--space-3); }
  .knowledge-sources { gap:var(--space-2); }
  .knowledge-sources > div { align-items:flex-start; padding:var(--space-2); }
  .operation-header { align-items:start; }
  .operation-header .scene-meta { text-align:right; }
}
@media(prefers-reduced-motion:reduce) {
  .example-tabs button,.example-tabs button::after { transition:none; }
  .example-panel.is-tracing .scene-paper,.example-panel.is-tracing .operation-item,
  .example-panel.is-tracing .scene-connection span,.example-panel.is-tracing .knowledge-connection span { animation:none; }
}