/* Section 03. Shared brand roles come from tokens.css. */
.study-examples { min-height:0; gap:var(--space-10); padding-bottom:var(--space-20); }
.study-examples .example-heading { align-items:center; }
.study-examples .example-heading h2 { max-width:23ch; }
.help-list { min-width:0; }
.help-item { display:grid; grid-template-columns:var(--space-8) minmax(0,1fr); column-gap:var(--space-6); padding-block:var(--space-8); border-top:var(--control-border-width) solid var(--rule); }
.help-number { padding-top:var(--space-1); color:var(--ink); font-size:var(--type-body-detail); font-variant-numeric:tabular-nums; }
.help-main { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:start; }
.help-heading h3 { margin:0; max-width:28ch; font-size:var(--type-step-title); font-weight:var(--type-weight-medium); line-height:var(--type-line-heading); letter-spacing:var(--type-tracking-display); text-wrap:balance; }
.help-heading p,.help-response p { max-width:46ch; color:var(--text-soft); font-size:var(--type-body); line-height:var(--type-line-copy); text-wrap:pretty; }
.help-heading p { margin-top:var(--space-3); }
.help-response h4 { margin:0 0 var(--space-3); color:var(--ink); font-size:var(--type-body-detail); font-weight:var(--type-weight-medium); line-height:var(--type-line-body); }
.example-disclosure { grid-column:2; min-width:0; margin-top:var(--space-3); }
.example-disclosure .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.example-disclosure summary { display:flex; align-items:center; gap:var(--space-3); width:fit-content; min-height:var(--control-target-min); padding-block:var(--space-2); color:var(--ink); font-size:var(--type-body-small); cursor:pointer; list-style:none; transition:color var(--motion-fast) var(--motion-ease-rise); }
.example-disclosure summary::-webkit-details-marker { display:none; }
.example-disclosure summary::marker { content:''; }
.example-disclosure summary:hover { color:var(--text); }
.example-disclosure summary:focus-visible { outline:var(--control-focus-width) solid var(--ink); outline-offset:var(--control-focus-offset); }
.example-disclosure summary svg { width:var(--space-4); height:var(--space-4); flex:none; stroke:currentColor; stroke-width:1.4; transition:transform var(--motion-fast) var(--motion-ease-rise); }
.example-disclosure[open] summary svg { transform:rotate(45deg); }
.example-detail { display:grid; gap:var(--space-5); max-width:44rem; margin-top:var(--space-4); padding:var(--space-4) 0 var(--space-4) var(--space-8); border-left:var(--control-border-width) solid var(--rule); }
.example-context { display:flex; flex-wrap:wrap; gap:var(--space-2); color:var(--ink); font-size:var(--type-body-detail); line-height:var(--type-line-body); }
.example-disclaimer { color:var(--text-soft); font-size:var(--type-body-detail); line-height:var(--type-line-body); }
.example-bridge { padding-top:var(--space-6); border-top:var(--control-border-width) solid var(--rule); color:var(--text-soft); font-size:var(--type-body); line-height:var(--type-line-copy); }
.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); }

/* The illustrative request has a destination, conditional on the available tools. */
.request-destination { grid-column:3 / -1; display:grid; justify-items:center; gap:var(--space-3); margin-top:var(--space-4); color:var(--ink); }
.request-destination > svg { width:var(--space-6); height:var(--space-6); }
.request-destination > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2) var(--space-4); width:100%; padding:var(--space-4); border:var(--control-border-width) solid var(--rule); }
.request-destination strong { font-weight:var(--type-weight-medium); font-size:var(--type-body-small); }
.request-destination span { color:var(--text-soft); font-size:var(--type-body-detail); }

/* Brief motion only when an optional illustration is opened. */
.example-disclosure[open] .scene-paper { animation:example-paper-in var(--motion-reveal) var(--motion-ease-rise) backwards; }
.example-disclosure[open] .request-record,.example-disclosure[open] .knowledge-answer { animation-delay:var(--motion-fast); }
.example-disclosure[open] .scene-connection span { animation:example-connect var(--motion-calendar) var(--motion-ease-draw) backwards; }
.example-disclosure[open] .knowledge-connection span { animation:example-line var(--motion-calendar) var(--motion-ease-draw) backwards; }
.example-disclosure[open] .operation-item { animation:example-item-in var(--motion-calendar) var(--motion-ease-rise) backwards; }
.example-disclosure[open] .operation-item:nth-child(2) { animation-delay:var(--motion-fast); }
.example-disclosure[open] .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(max-width:1000px) {
  .help-main { gap:var(--space-8); }
  .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); }
  .help-item { grid-template-columns:var(--space-5) minmax(0,1fr); column-gap:var(--space-3); padding-block:var(--space-6); }
  .help-main { grid-template-columns:1fr; gap:var(--space-4); }
  .help-heading h3 { max-width:30ch; }
  .help-heading p,.help-response p { max-width:50ch; }
  .help-response h4 { margin-bottom:var(--space-2); }
  .example-disclosure { grid-column:1 / -1; }
  .example-disclosure summary { margin-left:var(--space-8); }
  .example-detail { padding:var(--space-4) 0; border-left:0; border-top:var(--control-border-width) solid var(--rule); }
  .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; }
}
@media(max-width:600px) {
  .request-message { grid-column:1 / 8; padding-bottom:var(--space-6); }
  .request-record { grid-column:2 / -1; margin-top:var(--space-4); }
  .request-destination { grid-column:2 / -1; }
  .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-disclosure summary,.example-disclosure summary svg { transition:none; }
  .example-disclosure[open] .scene-paper,.example-disclosure[open] .operation-item,
  .example-disclosure[open] .scene-connection span,.example-disclosure[open] .knowledge-connection span { animation:none; }
}