/* Coming from AutoCAD: the app's command line standing on the ground, centred, and under it a
   headline and one grey line, lettered like a figure's title. It is the one scene on the page
   with nothing drawn: this is the keyboard's turn. The stack of answers grows up out of the field
   as it does in the app, so its six rows of room are held above the field, where an empty stack
   is only the top of the section, and nothing moves while it fills and empties. The field comes
   first on the screen and second to a screen reader, which should hear what it is for before it.
   The lit row is blue because Enter runs it, which is what blue means on this page. */
/* The stack's held room was once the section's whole top margin, but a filled stack is not empty
   room: the command list came within 20 px of the sheet above it. The top matches a chapter's. */
.switching { padding-block: clamp(64px, 16vh, 180px) clamp(72px, 13vh, 150px); text-align: center; }
.switch-wrap { display: flex; flex-direction: column; align-items: center; }
.switching h2 { margin-top: clamp(32px, 6vh, 64px); }
.switching .lede { margin-top: clamp(14px, 2.4vh, 22px); }

.cmdline {
  --row: clamp(32px, 5.4vh, 40px);
  order: -1; position: relative; width: min(560px, 100%);
  padding-top: calc(var(--row) * 6 + 22px);
  text-align: left;
}
.cl-stack {
  position: absolute; left: 0; right: 0; bottom: calc(100% - var(--row) * 6 - 12px);
  display: flex; flex-direction: column-reverse; gap: 1px; margin: 0; padding: 5px; list-style: none;
  border-radius: 14px; background: var(--raise-2); box-shadow: inset 0 0 0 1px var(--hair), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  opacity: 0; transition: opacity 0.12s ease-out;
}
.cmdline.open .cl-stack { opacity: 1; }
.cl-row { display: flex; align-items: center; gap: 12px; height: var(--row); padding: 0 12px; border-radius: 9px; color: var(--fg); cursor: pointer; }
.cl-alias { min-width: 52px; font: 600 12.5px/1 var(--mono); letter-spacing: 0.02em; color: var(--fg-2); }
.cl-name { font: 500 clamp(15px, 1.2vw, 17px)/1 var(--sans); letter-spacing: -0.01em; }
.cl-row:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
/* The lit row: dark ink on the blue, since near-white on it is under 3:1. */
.cl-row.on { background: var(--blue); color: var(--ground); }
.cl-row.on .cl-alias { color: inherit; }
.cl-row.ran { animation: ran 0.32s var(--ease); }
@keyframes ran { 40% { transform: scale(0.985); filter: brightness(1.25); } }

.cl-field {
  position: relative; height: clamp(46px, 7vh, 54px); border-radius: 999px;
  background: var(--raise-2); box-shadow: inset 0 0 0 1px var(--hair-2); transition: box-shadow 0.25s;
  font: 400 clamp(17px, 1.4vw, 19px)/1 var(--sans);
}
.cl-field.live { box-shadow: inset 0 0 0 1.5px var(--blue); }
.cl-field:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.cl-field input {
  position: absolute; inset: 0; width: 100%; padding: 0 24px; border: 0; border-radius: inherit;
  background: none; color: var(--fg); font: inherit; outline: none; caret-color: var(--blue);
}
.cl-field input::placeholder { color: var(--fg-3); }
/* While the field types by itself its letters are drawn here, not in the input, so they carry
   the app's caret and a visitor's click still lands in an empty field. */
.cl-ghost { position: absolute; left: 24px; top: 0; bottom: 0; display: flex; align-items: center; gap: 1px; pointer-events: none; font-weight: 500; white-space: pre; }
.cl-ghost .caret { display: none; width: 1.5px; height: 1.05em; background: var(--blue); }
.cl-typed:not(:empty) + .caret { display: inline-block; }
.cl-field:has(.cl-typed:not(:empty)) input::placeholder { color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .cl-stack { transition: none; }
  .cl-row.ran { animation: none; }
}