/* ==========================================================================
   THE COMMAND MENU, AND THE KEYBOARD
   These outlived the board they shipped with. ⌘K is the answer to forty-nine
   routes whatever the landing screen is, and the shortcut sheet is still the
   cheapest explanation of the loop in the product.
   ========================================================================== */

/* ==========================================================================
   23 · THE COMMAND MENU
   Linear's ⌘K, and for Linear's reason: forty-eight routes is more than anyone
   will learn, so the answer is to stop asking them to. Type the thing.
   ========================================================================== */
.cmd-scrim { position: fixed; inset: 0; background: rgb(28 27 23 / .34); z-index: 80; }
.cmd {
  position: fixed; z-index: 81;
  top: 13vh; left: 50%; transform: translateX(-50%);
  width: min(620px, calc(100vw - 32px));
  max-height: 68vh; display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 16px;
  box-shadow: var(--e3);
  overflow: hidden;
}
.cmd-h {
  display: flex; align-items: center; gap: var(--s3); flex: none;
  padding: 0 var(--s4); height: 54px;
  border-bottom: 1px solid var(--hairline);
  color: var(--n500);
}
.cmd-q {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--font-sans); font-size: var(--t-md); color: var(--ink);
}
.cmd-q::placeholder { color: var(--n400); }
.cmd-esc { flex: none; }

.cmd-b { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s2); }
.cmd-g + .cmd-g { margin-top: 4px; }
.cmd-gh {
  padding: 8px 10px 5px;
  font-size: var(--t-micro); font-weight: 600; color: var(--n500);
}
.cmd-r {
  width: 100%; display: flex; align-items: center; gap: var(--s3);
  padding: 8px 10px; border-radius: var(--r-chip);
  background: none; border: 0; text-align: left; color: var(--ink);
  font-size: var(--t-sm); cursor: pointer;
}
.cmd-r:hover { background: var(--n100); }
.cmd-r.is-sel { background: var(--ink); color: #fff; }
.cmd-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--n100); color: var(--n700); }
.cmd-r.is-sel .cmd-ico { background: rgb(255 255 255 / .14); color: var(--terra-300); }
.cmd-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cmd-w { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--n500); }
.cmd-r.is-sel .cmd-w { color: rgb(255 255 255 / .55); }
.cmd-hot { flex: none; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: var(--r-pill); background: var(--terra-100); color: var(--terra-800); }
.cmd-r.is-sel .cmd-hot { background: var(--terra); color: #fff; }
.cmd-go { flex: none; opacity: 0; color: rgb(255 255 255 / .6); }
.cmd-r.is-sel .cmd-go { opacity: 1; }

.cmd-none { padding: var(--s7) var(--s5); text-align: center; color: var(--n600); }
.cmd-none p { margin: 8px 0 0; font-size: var(--t-sm); }
.cmd-none b { color: var(--ink); }

.cmd-f {
  display: flex; align-items: center; gap: var(--s4); flex: none;
  padding: 9px var(--s4);
  border-top: 1px solid var(--hairline); background: var(--surface-2);
  font-size: var(--t-xs); color: var(--n600);
}
.cmd-f span { display: inline-flex; align-items: center; gap: 5px; }
.cmd-help { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; color: var(--n600); font-size: var(--t-xs); cursor: pointer; }
.cmd-help:hover { color: var(--ink); }
@media (max-width: 760px) { .cmd-f span:nth-child(3) { display: none; } }

/* ==========================================================================
   24 · KEYS
   One kbd style everywhere, and the chord's own state: while g is held open
   the app dims a shade, so the mode is visible rather than remembered.
   ========================================================================== */
kbd {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  font-family: var(--font-mono); font-size: 10px; line-height: 1;
  background: var(--surface); color: var(--n700);
  border: 1px solid var(--n300); border-bottom-width: 2px;
  border-radius: 5px;
}
.cmd-r.is-sel kbd { background: transparent; color: #fff; border-color: rgb(255 255 255 / .3); }
body.chording .app { filter: brightness(.97); }
body.chording::after {
  content: "g …"; position: fixed; z-index: 70;
  left: 50%; bottom: 26px; transform: translateX(-50%);
  padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-family: var(--font-mono); font-size: var(--t-xs);
  box-shadow: var(--e-pop);
}
table.keys { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.keys td, table.keys th { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
table.keys th { font-size: var(--t-micro); font-weight: 600; color: var(--n500); padding-top: 16px; }
table.keys td:first-child { width: 78px; white-space: nowrap; }
table.keys td:nth-child(2) { width: 170px; font-weight: 500; }
table.keys td.muted { font-size: var(--t-xs); line-height: 1.45; }