/* The key chords card in "Not just an SSH terminal app.": the bottom of the
   mobile device's terminal, its utility row, and the soft keyboard that slides
   up under it. chords.js plays two chords on it: Ctrl tapped, then the
   keyboard's c, to stop a running server, and Ctrl held over the keyboard's
   backspace. With no script, or with reduced
   motion, it stands on the second one done: keyboard up, three words gone and
   the chord named.

   The row is the app's own two-row pad (app-ui.css), drawn a little larger
   here because the card gives it more room than the hero's 210px screen. */

/* The card's frame is a crop of the screen's lower edge, held at the height
   every illustration in the row shares, so the headings stay level. */
.mini.chords {
  display: block;
  height: var(--mini-height);
  padding: 0;
}

/* Terminal, row and keyboard are one column pinned to the bottom of the
   frame. The keyboard starts below the edge; showing it lifts the whole
   column, so the terminal's last lines ride up above the row as they do in
   the app when the keyboard opens. */
.chord-stack {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  translate: 0 var(--soft-h);
  transition: translate var(--spring-gentle-ms) var(--spring-gentle), opacity 360ms var(--ease-out-soft);
  --soft-h: 57px;
}

.chords[data-typing] .chord-stack {
  translate: 0 0;
}

.chords[data-fading] .chord-stack {
  opacity: 0;
}

/* Lines sit on the bottom edge, the way a terminal fills, so a new line
   pushes the older ones up and out of the top of the frame. */
.chord-term {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* The frame less the utility row: nine 9px lines. */
  height: calc(var(--mini-height) - 43px);
  padding: 0 10px 3px;
  overflow: hidden;
  color: #cccccc;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.55;
}

.chord-term .line {
  min-height: 1.55em;
  overflow: hidden;
  white-space: pre;
}

.chord-term .line[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ keys --- */

.chords .keypad {
  gap: 3px;
  padding: 4px 4px 5px;
}

.chords .key {
  height: 15px;
  font-size: 7.4px;
  transition: translate 90ms var(--ease-out-soft), box-shadow 90ms var(--ease-out-soft), background-color 160ms var(--ease-out-soft),
    color 160ms var(--ease-out-soft);
}

.chords .key.is-arrow {
  font-size: 9.5px;
}

.chords .key.is-wide {
  font-size: 7.4px;
}

/* A modifier waiting for its partner, or held down under a finger: lit in the
   accent until it lets go. */
.chords .key.is-latched {
  background: var(--accent-fill);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  color: var(--on-accent);
}

/* A press: the cap sits down onto its base. */
.chords .key.is-down,
.softkeys span.is-down {
  background: var(--hairline-strong);
}

.chords .key.is-arrow.is-down {
  background: var(--tint-fill);
}

/* The soft keyboard: three letter rows, the second set in by half a key. */
.softkeys {
  display: grid;
  gap: 3px;
  height: var(--soft-h);
  padding: 4px 3px;
  background: var(--well);
  box-shadow: inset 0 0.5px 0 var(--hairline);
}

.softkeys div {
  display: flex;
  gap: 3px;
}

.softkeys div:nth-child(2) {
  padding: 0 4.5%;
}

.softkeys span {
  display: grid;
  flex: 1;
  place-items: center;
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  color: var(--label);
  font-size: 8px;
  line-height: 1;
  transition: translate 90ms var(--ease-out-soft), box-shadow 90ms var(--ease-out-soft),
    background-color 160ms var(--ease-out-soft);
}

.softkeys span.is-mod {
  flex: 1.5;
  background: var(--fill);
  color: var(--label);
}

.softkeys span.is-down {
  background: #4a5668;
}

/* ------------------------------------------------------------------ chip --- */

/* What was just pressed: the keys as caps, and whether Ctrl was tapped or
   held. Both chords are played with the keyboard up, when only two lines of
   terminal show and a long command fills them, so the chip floats over the
   middle of the keyboard, the way a key's own preview does. */
.chord-chip {
  position: absolute;
  top: 80px;
  right: 50%;
  z-index: 4;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px 8px 4px 4px;
  border-radius: 9px;
  background: var(--material-thick);
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
  box-shadow: var(--highlight), 0 0 0 0.5px var(--hairline), 0 8px 18px -8px rgba(0, 0, 0, 0.6);
  color: var(--label-2);
  font-size: 8px;
  white-space: nowrap;
  transform: translateX(50%);
  transition: opacity 220ms var(--ease-out-soft), translate 220ms var(--ease-out-soft);
}

.chord-chip[data-off] {
  opacity: 0;
  translate: 0 -4px;
}

.chord-chip kbd {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 15px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  color: var(--tint);
  font-family: inherit;
  font-size: 8px;
  font-weight: 600;
}

/* A repeated key is drawn once per press, so the chip counts them. */
.chord-chip kbd[hidden] {
  display: none;
}

.chord-chip i {
  font-style: normal;
}

.chord-chip small {
  margin-left: 3px;
  color: var(--label-2);
  font-size: 7px;
  font-weight: 510;
}

@media (prefers-reduced-motion: reduce) {
  .chord-stack,
  .chord-chip {
    transition: none;
  }
}