/* ============================================================
   kbd.css — where the keyboard is pointing, and the help dialog.

   The ring has to be visible on a card, on an empty slot, and on a
   pile covered by other cards, in both themes, without moving
   anything by a pixel. That rules out borders and rules in an
   outline, which is drawn outside the box and never affects layout.
   ============================================================ */

/* The board itself takes focus, so it needs a focus style of its
   own for the moment before anybody has pressed an arrow. */
.board:focus-visible{outline:3px solid var(--accent-ink); outline-offset:6px; border-radius:14px}

/* The pile the keyboard is on. Offset inward at narrow widths for the
   same reason the hint ring is, which is that the outermost pile sits
   about 8px from the edge of a phone. */
.pile.kfocus{outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:10px}
@media (max-width: 430px){
  .pile.kfocus{outline-offset:1px}
}

/* The card inside it. Drawn INSIDE the card, because a card at the
   bottom of a column has the board edge right under it. */
.board .hpc.kcard{outline:3px solid var(--accent-ink); outline-offset:-3px; border-radius:8px}

/* ---------- the help dialog ---------- */
/* OPAQUE, not var(--panel). Every panel on this table is a three
   percent white wash over whatever is behind it, which is right for a
   bar sitting on the page and wrong for a dialog floating over a board
   of fifty two cards. The first version used --panel and the cards read
   straight through the help text. */
.khelp{
  border:1px solid var(--line); border-radius:16px; color:var(--ink);
  background:var(--bg-2);
  padding:clamp(16px,4vw,26px); max-width:min(92vw, 460px); width:100%;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.khelp::backdrop{background:rgba(6,4,14,.72)}
:root[data-theme="light"] .khelp{background:#fbf8ff}
.khelp h2{margin:0 0 6px; font-size:1.15rem}
.khelp-lede{margin:0 0 16px; color:var(--muted); font-size:.9rem}
/* Keys down the left, what they do down the right, and the two lined
   up at the TOP of each row rather than the baseline, because a key
   name is one line and its description is often two. */
.khelp dl{
  margin:0 0 18px; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:11px 14px; align-items:start;
}
.khelp dt{display:flex; gap:5px; flex-wrap:wrap; padding-top:1px}
.khelp dd{line-height:1.45}
.khelp dd{margin:0; color:var(--muted); font-size:.9rem}
.khelp kbd{
  font-family:var(--mono); font-size:.72rem; line-height:1;
  border:1px solid var(--line); border-bottom-width:2px; border-radius:6px;
  padding:5px 7px; background:var(--bg-2); color:var(--ink); white-space:nowrap;
}

/* The button that opens it. Small, quiet, and a real button, because
   help for people who cannot use a pointer must not itself need one. */
.kbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--tap); min-height:var(--tap);
  border:1px solid var(--line); border-radius:999px; background:var(--panel);
  color:var(--accent); font-family:var(--mono); font-size:.86rem; font-weight:700;
  cursor:pointer; padding:0 14px;
}
.kbtn:hover{border-color:var(--accent-ink)}
.kbtn:focus-visible{outline:3px solid var(--accent-ink); outline-offset:2px}