/* A battlefield's inscriptions to pick (src/panels/picks_sheet.rs, docs/pvp/levels.md): a small frame
   at the left edge of the view, out of the fight's middle, while a battle level has given one. Each
   path offered is a press: its skill's icon on a key's ground, its name over its skill's, what it
   gives. It takes the page's own clicks with the mouse free; captured, the cursor's key held, the
   page's cursor (#cursor, page.css) points and clicks (src/panels/picks_panel.rs). */
#picks {
  position: fixed; left: 18px; top: 50%; z-index: 3; width: min(300px, 26vw); translate: 0 -50%;
  &[hidden] { display: none; }
  .picks-sheet { padding: 14px 16px 14px 20px; animation: pop-in 260ms ease-out both; --from: -8px; }
  header {
    display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px;
    b { font: 600 17px/1.2 var(--face); color: var(--paper-bright); }
    small { font-size: 12.5px; font-style: italic; color: var(--muted); }
    kbd { font-size: 11px; font-style: normal; }
  }
  .offers { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .offer {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 3px;
    align-items: center; width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 2px;
    background: var(--paper-wash); color: var(--paper); font: inherit; text-align: left; cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    .glyph { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px;
      border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 3px;
      background: linear-gradient(180deg, var(--paper-fill), var(--well));
      img { width: 28px; height: 28px; } }
    .what { display: flex; align-items: baseline; gap: 7px; min-width: 0;
      b { font: 600 14.5px/1.2 var(--face); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
    .does { font-size: 13px; color: var(--paper-muted); font-variant-numeric: tabular-nums; }
    &:hover, &:focus-visible { border-color: var(--accent-rim); background: var(--accent-wash); outline: none; }
    &:hover .what b { color: var(--accent-hi); }
  }
  @media (prefers-reduced-motion: reduce) { .picks-sheet { animation: none; } }
}