/* ---------- the demo page ----------
   Loaded only by the five demo pages (demo/index.html in each language), after site.css. Four short tasks from two recorded sessions of
   Clerc on a fictitious firm, each with the request, the pieces of the firm that Clerc connects and
   the result, then a section on what Clerc connects. Each scene ([data-play]) plays once in view
   (site.js). Without motion, without the script, or in print, every scene shows how it ends. */

.demo-note { margin-top: 18px; font-size: 14px; color: var(--muted); }

.tasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; margin-top: 34px; }
.task.scene { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; padding: 22px; }
/* Side by side, the three cards share one height: the result box fills the bottom of each, so their
   frames and their results line up. */
.tasks .task.scene { grid-template-rows: auto auto auto 1fr; align-content: stretch; }
.task-title { display: flex; align-items: baseline; gap: 10px; margin: 0; font: 400 24px/1.2 var(--serif); }
.task-num { font: 400 12px/1 var(--mono); color: var(--muted); }
.task .msg.q { justify-self: end; max-width: 92%; font-size: 15px; line-height: 1.5; }

/* The pieces Clerc connects: one chip per source, then Clerc. */
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.links li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; }
.links .kind { font: 500 10px/1 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
/* The arrow and Clerc are one item, so that a line never ends on the arrow alone. */
.links .to-clerc { padding: 0; border: 0; background: none; gap: 8px; }
.links .to { color: var(--muted); }
.links .clerc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 500; }
.links .clerc .mark-svg { width: 14px; height: 14px; }

/* The result. When Clerc asked for an agreement, each result starts with the answer given. */
.result, .outcomes { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.result strong, .outcomes strong { font-weight: 600; }
.outcomes { list-style: none; margin: 0; display: grid; gap: 9px; }
.outcomes li + li { padding-top: 9px; border-top: 1px solid var(--line); }
.answer { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.answer::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.answer.no { color: var(--muted); }
.answer.no::before { background: none; box-shadow: inset 0 0 0 1.5px var(--muted); }

.later-title { margin-top: 56px; font: 400 clamp(26px, 3vw, 34px)/1.15 var(--serif); }
.task.later { margin-top: 18px; max-width: 760px; }

/* The planned runs of a scheduled task, as a line of dates. */
.when-label { font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
.when { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.when li { position: relative; padding: 7px 12px 7px 26px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 14px; }
.when li::before { content: ''; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ink); }
.when li + li::before { background: var(--field); }

/* What Clerc connects: the firm's own tools on one side, outside tools on the other, Clerc between
   them, and what we build after an audit underneath. */
.hub.scene { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px 0; padding: 22px; }
.hub-group { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.hub-group h3 { margin: 0 0 10px; font: 500 12px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.hub-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hub-group li { font-size: 14px; line-height: 1.45; color: var(--muted); }
.hub-group li strong { display: block; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.hub-core { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 28px; }
/* The two spokes, drawn as hairlines from Clerc to each side. */
.hub-core::before, .hub-core::after { content: ''; position: absolute; top: 50%; width: 28px; border-top: 1px solid var(--field); }
.hub-core::before { left: 0; }
.hub-core::after { right: 0; }
.hub-core .clerc { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 500; }
.hub-core .clerc .mark-svg { width: 16px; height: 16px; }
.hub-made { grid-column: 1 / -1; border-style: dashed; }
@media (max-width: 760px) {
  .hub.scene { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hub-core { padding: 26px 0; }
  .hub-core::before, .hub-core::after { left: 50%; width: 0; height: 26px; border-top: 0; border-left: 1px solid var(--field); }
  .hub-core::before { top: 0; }
  .hub-core::after { top: auto; bottom: 0; right: auto; }
  .hub-made { margin-top: 18px; }
}
@media screen { .play .hub:not(.is-in) .beat { opacity: 0; } }
.motion .hub.is-in .beat { animation: rise 0.45s ease-out both; }
.motion .hub.is-in .beat.d1 { animation-delay: 0.1s; }
.motion .hub.is-in .beat.d2 { animation-delay: 0.6s; }
.motion .hub.is-in .beat.d3 { animation-delay: 1.1s; }
.motion .hub.is-in .beat.d4 { animation-delay: 1.6s; }

.demo-end { margin-top: 40px; max-width: 640px; }
.demo-end p { color: var(--muted); }
.demo-end .btn { margin-top: 20px; }

/* Playing: the request, then the pieces one by one, then the decision and the result. */
@media screen { .play .task:not(.is-in) .beat, .play .task:not(.is-in) .links li { opacity: 0; } }
.motion .task.is-in .beat { animation: rise 0.4s ease-out both; }
.motion .task.is-in .beat.d1 { animation-delay: 0.1s; }
.motion .task.is-in .beat.d3 { animation-delay: 1.5s; }
.motion .task.is-in .beat.d4 { animation-delay: 2.1s; }
.motion .task.is-in .links li { animation: rise 0.3s ease-out both; }
.motion .task.is-in .links li:nth-child(1) { animation-delay: 0.6s; }
.motion .task.is-in .links li:nth-child(2) { animation-delay: 0.75s; }
.motion .task.is-in .links li:nth-child(3) { animation-delay: 0.9s; }
.motion .task.is-in .links li:nth-child(4) { animation-delay: 1.05s; }
.motion .task.is-in .links li:nth-child(5) { animation-delay: 1.2s; }
.motion .task.is-in .links li:nth-child(6) { animation-delay: 1.35s; }
.motion .task.is-in .links li:nth-child(7) { animation-delay: 1.5s; }
@media screen { .play .task:not(.is-in) .when li { opacity: 0; } }
.motion .task.is-in .when li { animation: rise 0.3s ease-out both; }
.motion .task.is-in .when li:nth-child(1) { animation-delay: 2.3s; }
.motion .task.is-in .when li:nth-child(2) { animation-delay: 2.55s; }
.motion .task.is-in .when li:nth-child(3) { animation-delay: 2.8s; }