/* The shared tooltip (viewer/tooltip.js): the app's dark panel, its type, an amber rule; the control's
   name, its key as a key cap, a one-line explanation. */
.tip { position: fixed; left: 0; top: 0; z-index: 1001; max-width: min(320px, calc(100vw - 12px)); padding: 5px 9px 6px;
  background: rgba(21, 23, 26, 0.97); border: 1px solid var(--line); border-left: 2px solid var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); color: var(--text); pointer-events: none;
  font: 12px/1.35 "DIN Condensed", "Futura", system-ui, sans-serif; letter-spacing: 0.02em; }
.tip[hidden] { display: none; }
.tip-h { display: flex; align-items: center; gap: 6px; }
.tip-h + .tip-t { margin-top: 3px; }
.tip-n { color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; }
.tip kbd { display: inline-block; min-width: 17px; padding: 0 4px; text-align: center; font: inherit; font-size: 11px; line-height: 15px;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 2px; }
.tip-n + kbd { margin-left: auto; }
.tip-kn { color: var(--dim); font-size: 11px; }
.tip-t { color: var(--text); white-space: pre-line; }