/* ════════════════════════════════════════════════════════════════════════
   desktop-virtual-lab / ui / shortcuts-panel.css
   ────────────────────────────────────────────────────────────────────────
   `?` keyboard cheat sheet — standalone stylesheet, mirrors the ⌘K palette
   (ui/search-palette.css) visual language. Existing tokens only (style.css v1
   family) → automatic light/dark, no new colors (DESIGN.md §3.5 monochrome).
   ════════════════════════════════════════════════════════════════════════ */

.sc-scrim {
  /* 2000 (modal tier): the `?` cheat sheet is a full-screen overlay; it must
     cover the topbar (raised to 1400 so its menu dropdowns clear the panel
     tier, DESIGN.md §8.4.A z-table). Was 1000. */
  position: fixed; inset: 0; z-index: 2000;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 9vh;
  background: var(--overlay-2);
  backdrop-filter: blur(2px);
  animation: sc-fade var(--dur-enter, 160ms) var(--ease-out, ease);
}
.sc-scrim[hidden] { display: none; }
@keyframes sc-fade { from { opacity: 0 } to { opacity: 1 } }

.sc-scrim.is-leaving {
  animation: sc-fade var(--dur-exit, 120ms) var(--ease-out, ease) reverse forwards;
  pointer-events: none;
}
.sc-scrim.is-leaving .sc-panel {
  animation: sc-pop var(--dur-exit, 120ms) var(--ease-out, ease) reverse forwards;
}
@media (prefers-reduced-motion: reduce) {
  .sc-scrim, .sc-panel { animation: none !important; }
}

.sc-panel {
  width: min(620px, 92vw);
  max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: 12px;
  box-shadow: 0 16px 48px -12px rgba(13, 13, 15, .28), 0 2px 8px -2px rgba(13, 13, 15, .12);
  overflow: hidden;
  animation: sc-pop var(--dur-enter, 160ms) var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
:root[data-theme="dark"] .sc-panel {
  box-shadow: 0 18px 56px -12px rgba(0, 0, 0, .7), 0 2px 10px -2px rgba(0, 0, 0, .5);
}
@keyframes sc-pop { from { opacity: 0; transform: translateY(-6px) scale(.985) } to { opacity: 1; transform: none } }

/* ── header: title · OS toggle · close ── */
.sc-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--line-1);
  flex: 0 0 auto;
}
.sc-title {
  margin: 0; flex: 1 1 auto;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink-1);
}
.sc-os { display: flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--line-1); border-radius: 7px; padding: 2px; }
.sc-os button {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3-v1);
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  padding: 3px 11px; cursor: pointer; line-height: 1.3;
}
.sc-os button[data-on="1"] {
  color: var(--ink-1); background: var(--surface-1); border-color: var(--line-1);
}
.sc-close {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--ink-3-v1); background: var(--ctl-rest); border: 1px solid transparent;   /* v2 affordance：关闭 × 静止即有座（U10）*/
  font-size: 13px; line-height: 1;
}
.sc-close:hover { color: var(--ink-1); background: var(--surface-2); border-color: var(--line-1); }

/* ── body: grouped rows ── */
.sc-body { overflow-y: auto; padding: 6px 0 10px; flex: 1 1 auto; }
.sc-group { padding: 6px 0 2px; }
.sc-group-title {
  margin: 0; padding: 10px 16px 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3-v1); font-weight: 500;
}
.sc-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 5px 16px;
}
.sc-keys {
  flex: 0 0 180px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.sc-desc {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-ui); font-size: 13px; color: var(--ink-1);
}
.sc-or { color: var(--ink-3-v1); font-size: 11px; opacity: .6; padding: 0 1px; }

.sc-keys kbd, .sc-foot kbd {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--ink-2-v1); background: var(--surface-2);
  border: 1px solid var(--line-1); border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 6px; min-width: 18px; text-align: center; white-space: nowrap;
}

/* ── footer ── */
.sc-foot {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-top: 1px solid var(--line-1);
  background: var(--surface-2); flex: 0 0 auto;
  font-family: var(--font-ui); font-size: 11px; color: var(--ink-3-v1);
}
.sc-foot span { display: inline-flex; align-items: center; gap: 6px; }
.sc-manual-link {
  margin-left: auto;
  color: var(--ink-1);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.sc-manual-link:hover { text-decoration: underline; }
.sc-manual-link:focus-visible {
  outline: 2px solid var(--ink-1);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 520px) {
  .sc-foot {
    align-items: flex-start;
    flex-direction: column;
  }
  .sc-manual-link { margin-left: 0; }
}

/* ── canvas top-right help affordance ──
   Faint by default (透明一些), brightens to full on hover/focus/open. Sits just
   below the topbar at the canvas's right edge. Glass like the other
   floating chrome (--float-* tokens). */
.help-fab {
  position: fixed;
  top: calc(var(--topbar-h, 48px) + 12px);
  right: 14px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 999px; cursor: pointer;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: 1;
  color: var(--ink-2-v1);
  background: var(--float-bg);
  border: 1px solid var(--line-1);
  backdrop-filter: blur(var(--float-blur)) saturate(var(--float-sat));
  -webkit-backdrop-filter: blur(var(--float-blur)) saturate(var(--float-sat));
  box-shadow: var(--float-edge);
  opacity: .42;
  z-index: 200;
  transition: opacity 140ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.help-fab:hover { opacity: 1; color: var(--ink-1); border-color: var(--line-2); transform: translateY(-1px); }
.help-fab:active { transform: translateY(0); }
.help-fab.is-open { opacity: 1; color: var(--ink-1); border-color: var(--ink-1); }
.help-fab:focus-visible { opacity: 1; outline: 2px solid var(--ink-1); outline-offset: 2px; }