/* Educational state diagrams. Motion follows the request/change; text stays still. */
.explainer { margin: 26px 0; padding: 22px; border: 1px solid #bdcbd8; border-left: 3px solid #466d8b; background: #fafcfd; border-radius: 3px; min-width: 0; container-type: inline-size; }
.explainer .explainer-kind { display: block; color: #51687c; font-size: 13px; font-weight: 650; margin-bottom: 5px; }
.explainer .explainer-heading h3 { margin: 0 0 9px; font-size: 21px; line-height: 1.3; }
.explainer .explainer-intro { margin: 0; font-size: 16px; line-height: 1.5; color: #52606b; }
.explainer-diagram { position: relative; padding-top: 29px; margin: 23px 0; }
.explainer-nodes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 0; margin: 0; list-style: none; }
.explainer-diagram[data-count="4"] .explainer-nodes { grid-template-columns: repeat(4,minmax(0,1fr)); }
.explainer-diagram[data-count="5"] .explainer-nodes { grid-template-columns: repeat(5,minmax(0,1fr)); }
.explainer-node { position: relative; min-width: 0; padding: 0 5px; text-align: center; }
.explainer-node:not(:last-child)::after { content: ''; position: absolute; height: 2px; background: #bac8d3; top: 15px; left: calc(50% + 16px); width: calc(100% - 32px); }
.explainer-pin { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 11px; border: 2px solid #8a9daa; background: #fafcfd; color: #465d6c; border-radius: 50%; font-size: 14px; font-weight: 650; transition: background-color .3s, border-color .3s; }
.explainer-node-copy { padding: 9px 6px 10px; border: 1px solid transparent; border-radius: 3px; transition: background-color .3s, border-color .3s; }
.explainer-node-copy>strong { display: block; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.explainer-node-detail { display: block; margin-top: 5px; font-size: 13px; line-height: 1.4; color: #556470; overflow-wrap: anywhere; }
.explainer-node-state { display: block; margin-top: 9px; font-size: 12px; line-height: 1.25; color: #62717e; }
.explainer-node[data-state="active"] .explainer-pin { background: #184966; border-color: #184966; color: white; }
.explainer-node[data-state="active"] .explainer-node-copy { border-color: #6d91aa; background: #eaf2f8; }
.explainer-node[data-state="active"] .explainer-node-state { color: #174964; font-weight: 700; }
.explainer-node[data-state="complete"] .explainer-pin { background: #e4f1e9; border-color: #4e7e62; color: #245338; }
.explainer-node[data-state="complete"] .explainer-node-state { color: #2c6642; font-weight: 650; }
.explainer-node[data-state="complete"]:not(:last-child)::after { background: #6b917b; }
.explainer-node[data-state="blocked"] .explainer-pin { background: #f9eae4; border-color: #9b4b31; color: #7f341d; }
.explainer-node[data-state="blocked"] .explainer-node-copy { border-color: #b77964; background: #fff2ec; }
.explainer-node[data-state="blocked"] .explainer-node-state { color: #823c24; font-weight: 700; }
.explainer-cursor { position: absolute; z-index: 2; top: 0; left: 16.6667%; color: #184966; font-size: 18px; line-height: 1; transform: translateX(-50%); transition: left .65s cubic-bezier(.2,.65,.3,1), color .3s; }
.explainer-diagram[data-blocked="true"] .explainer-cursor { color: #9b4b31; }
.explainer-diagram[data-count="3"][data-cursor="1"] .explainer-cursor { left: 50%; }
.explainer-diagram[data-count="3"][data-cursor="2"] .explainer-cursor { left: 83.3333%; }
.explainer-diagram[data-count="4"] .explainer-cursor { left: 12.5%; }
.explainer-diagram[data-count="4"][data-cursor="1"] .explainer-cursor { left: 37.5%; }
.explainer-diagram[data-count="4"][data-cursor="2"] .explainer-cursor { left: 62.5%; }
.explainer-diagram[data-count="4"][data-cursor="3"] .explainer-cursor { left: 87.5%; }
.explainer-diagram[data-count="5"] .explainer-cursor { left: 10%; }
.explainer-diagram[data-count="5"][data-cursor="1"] .explainer-cursor { left: 30%; }
.explainer-diagram[data-count="5"][data-cursor="2"] .explainer-cursor { left: 50%; }
.explainer-diagram[data-count="5"][data-cursor="3"] .explainer-cursor { left: 70%; }
.explainer-diagram[data-count="5"][data-cursor="4"] .explainer-cursor { left: 90%; }
.explainer-frame { padding: 17px 0 5px; border-top: 1px solid #ccd7e0; }
.explainer-position { display: block; font-size: 13px; color: #536d80; font-weight: 650; margin-bottom: 5px; }
.explainer .explainer-frame h4 { font-size: 18px; line-height: 1.4; margin: 0 0 7px; }
.explainer .explainer-text { font-size: 16px; line-height: 1.55; margin: 0 0 13px; }
.explainer .explainer-message { padding: 9px 12px; border-left: 2px solid #547d97; background: #eaf0f4; font: 13px/1.6 Consolas, 'Courier New', monospace; margin: 0 0 15px; overflow-wrap: anywhere; white-space: pre-wrap; }
.explainer .explainer-message[data-kind="blocked"] { border-color: #9b4b31; background: #fff0e9; }
.explainer-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.explainer-button { min-height: 42px; border: 1px solid #97acbd; padding: 7px 13px; background: white; border-radius: 3px; font-size: 14px; }
.explainer-button:hover:not(:disabled) { background: #e7eef5; border-color: #466d8b; }
.explainer-play { background: #224d69; border-color: #224d69; color: white; min-width: 102px; }
.explainer-play:hover:not(:disabled) { color: #183e57; }
.explainer-button:disabled, .explainer-reset:disabled { cursor: default; opacity: .5; }
.explainer-reset { margin-left: auto; min-height: 42px; background: none; padding: 7px 3px; border: none; text-decoration: underline; text-underline-offset: 3px; color: #425c71; font-size: 13px; }
.explainer .explainer-note { margin: 9px 0 0; color: #62717d; font-size: 13px; line-height: 1.45; }
.explainer .explainer-reduced { font-size: 13px; color: #526472; margin: 7px 0 0; }
.explainer-motion-control { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; margin-top: 3px; color: #526472; font-size: 13px; cursor: pointer; }
.explainer-motion-control input { width: 16px; height: 16px; margin: 0; accent-color: #224d69; }
.explainer .explainer-takeaway { font-size: 15px; line-height: 1.55; margin: 20px 0 0; }
.explainer-transcript { margin-top: 12px; padding: 8px 0 0; border: 0; }
.explainer-transcript>summary { font-size: 14px; color: #3d5c73; font-weight: 600; }
.explainer-transcript ol { padding-left: 23px; margin-bottom: 8px; }
.explainer-transcript li { font-size: 15px; padding: 8px 0; }
.explainer-transcript li>strong { font-size: 16px; }
.explainer .explainer-transcript p { margin: 5px 0 7px; font-size: 15px; }
.explainer-transcript code { display: block; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.explainer-sources { font-size: 13px; padding-top: 12px; }
.explainer-sources a { display: block; margin-top: 5px; overflow-wrap: anywhere; }
.explainer[data-motion="off"] *, .explainer[data-motion="off"] *::before, .explainer[data-motion="off"] *::after { transition: none!important; animation: none!important; }
@container (max-width: 560px) {
  .explainer-diagram { padding-top: 0; margin: 20px 0; }
  .explainer-cursor { display: none; }
  .explainer .explainer-diagram .explainer-nodes { grid-template-columns: minmax(0,1fr); }
  .explainer-node { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 11px; padding: 0 0 14px; text-align: left; }
  .explainer-node:last-child { padding-bottom: 0; }
  .explainer-node:not(:last-child)::after { left: 15px; top: 31px; width: 2px; height: calc(100% - 31px); }
  .explainer-pin { margin: 5px 0 0; }
  .explainer-node-copy { padding: 6px 9px; }
  .explainer-node-detail { margin-top: 3px; font-size: 13px; }
  .explainer-node-state { margin-top: 4px; }
  .explainer[data-interacted="true"] .explainer-node[data-state="active"] .explainer-pin { animation: explainer-arrive .55s ease-out both; }
  .explainer-reset { width: 100%; margin: 0; min-height: 36px; text-align: left; }
  .explainer-button { flex: 1 1 auto; padding-left: 9px; padding-right: 9px; }
}
@media (max-width: 620px) { .explainer { padding: 17px 14px; } }
@keyframes explainer-arrive { from { transform: translateY(-16px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .explainer *, .explainer *::before, .explainer *::after { animation: none!important; transition: none!important; }
}
@media print {
  .explainer { break-inside: avoid; border-color: #aaa; background: white; }
  .explainer-controls, .explainer-note, .explainer-reduced, .explainer-cursor, .explainer-motion-control { display: none; }
  .explainer-transcript>summary { display: none; }
  .explainer-transcript::details-content { content-visibility: visible; }
  .explainer-transcript>*:not(summary) { display: block!important; }
}