/* Meerkat Core, composed: one compact instrument (composed.js), the last item in the formal
   core's "Under the hood" drawer (cli.js). It uses the page's instrument,
   screen, key and progress styles (style.css) and adds the split screen, the code panel,
   the row of session options and the caption. */

.cm { --cm-panel: #f1f0eb; --cm-fs: 12px; }

/* The screen: the diagram and the code side by side, the options along the bottom. */
.cm .cm-screen {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: minmax(clamp(232px, 18.5vw, 256px), auto) auto;
}
.cm .cm-stage { position: relative; min-width: 0; min-height: 0; }
.cm .cm-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm .cm-stage[hidden] { display: none; }

/* The code panel: a light panel, as in the hero's product scene. The four steps' code sits
   in one grid cell, so switching steps never changes the panel's height. */
.cm .cm-code {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 14px 18px 16px;
  background: var(--cm-panel);
  box-shadow: inset 1px 0 0 var(--line-2);
}
.cm .cm-page { grid-area: 1 / 1; min-width: 0; }
.cm .cm-page[aria-hidden="true"] { visibility: hidden; }
.cm .cm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.cm .cm-where { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.cm .cm-lang { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mid); }
.cm .cm-pre {
  margin: 0 -18px;
  font-family: var(--mono);
  font-size: var(--cm-fs);
  line-height: 1.62;
  color: var(--ink);
  background: none;
  overflow: visible;
}
.cm .cm-pre code { font: inherit; display: block; }
.cm .cm-ln { display: block; padding: 0 18px; transition: background-color 0.25s, opacity 0.25s; }
/* A long line wraps under a hanging indent, four columns past its own indentation. */
.cm .cm-tx {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding-left: calc((var(--i, 0) + 4) * 1ch);
  text-indent: calc((var(--i, 0) + 4) * -1ch);
}
.cm .cm-tx.n { display: none; }
.cm.cm-nl .cm-tx.w { display: none; }
.cm.cm-nl .cm-tx.n { display: block; }
.cm .cm-ln.is-todo { opacity: 0.45; }
.cm .cm-ln.is-now { background-color: rgba(28, 28, 26, 0.05); box-shadow: inset 2.5px 0 0 var(--accent); }
.cm .t-k { font-weight: 650; }
.cm .t-h { font-weight: 650; }
.cm .t-s { color: var(--mid); }
.cm .t-key { color: var(--ink); }
.cm .t-p { color: var(--mid); }

/* The session options: quiet, set in the code's type; the ones in use are in ink. */
.cm .cm-opts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 9px 16px 10px;
  box-shadow: inset 0 1px 0 var(--line-2);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(28, 28, 26, 0.4);
}
.cm .cm-opts-k { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mid); margin-right: 2px; }
.cm .cm-opt { display: inline-flex; align-items: center; gap: 6px; transition: color 0.3s; }
.cm .cm-opt::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--line); transition: background-color 0.3s; }
.cm .cm-opt.is-on { color: var(--ink); }
.cm .cm-opt.is-on::before { background: var(--ink-2); }
.cm .cm-opt.is-new::before { background: var(--accent); }
.cm.is-paused .cm-opt.is-new::before { background: var(--ink-2); }

/* The caption: one short paragraph per step, all in one cell so the height holds. */
.cm .cm-note { display: grid; padding: 14px 6px 4px; }
.cm .cm-note > p { grid-area: 1 / 1; max-width: 880px; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.cm .cm-note > p[aria-hidden="true"] { visibility: hidden; }
.cm .cm-note b { font-size: 15px; font-weight: 600; color: var(--ink); margin-right: 0.25em; }

/* Without the drawing engine: code only. */
.cm.cm-static .cm-screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
.cm.cm-static .cm-code { box-shadow: none; }

/* Stacked: the diagram above the code. */
.cm.is-narrow .cm-screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
.cm.is-narrow .cm-stage { height: var(--cm-stage-h, 220px); }
.cm.is-narrow .cm-code { padding: 11px 14px 13px; box-shadow: inset 0 1px 0 var(--line-2); }
.cm.is-narrow .cm-pre { margin: 0 -14px; line-height: 1.55; }
.cm.is-narrow .cm-ln { padding: 0 14px; }
.cm.is-narrow .cm-opts { padding: 8px 14px 9px; gap: 3px 12px; font-size: 10.5px; }
.cm.is-narrow .cm-note > p { font-size: 13.5px; }
.cm.is-narrow .cm-note b { font-size: 14px; }
/* Phones: the options row gives way to the code. */
.cm.is-compact .cm-opts { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cm .cm-ln, .cm .cm-opt, .cm .cm-opt::before { transition: none; }
}

/* The block's head, in the manner of the drawer's other blocks: a label and one line. */
.cm-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }