/* CONTROLLER BADGES AND THE REFERENCE TABLE — ONE COPY, TWO READERS (#77, #50).
 *
 * These rules were inside index.html's own <style>, which made them unreachable
 * by any published page. #50's controls page needs the same badges and the same
 * table, and the obvious move was wrong twice over:
 *
 *   ⚠ NOT INTO assets/site/site.css. index.html does not link that file at all
 *     (verified, `grep -c` = 0), so putting them there would mean pulling the
 *     whole ~18 KB marketing stylesheet — body, .site-nav, .site-foot,
 *     typography — into the sim's page. That is a collision, not a hoist.
 *
 *   ⚠ NOT A SECOND COPY. tests/ops/panelX.test.ts exists because `.panel-x`
 *     forked between index.html and another surface, and tests/ops/inkColours
 *     exists to hold index.html's un-importable rules to exported constants.
 *     A duplicate here would drift the same way.
 *
 * So: its own file, in publicDir, linked by both. It carries ONLY what both
 * readers need. The sim-only rules that were interleaved with these —
 * `#hud-pace > .key-cap`, `.lcd-prompt`, `.pad-focus`, `#pad-settings .row` —
 * stayed in index.html, because a guide page has no LCD keys and no pad focus
 * ring to draw.
 *
 * ⚠ THE COLOURS ARE THE CONTRACT. tests/ops/promptStyles.test.ts asserts
 * index.html does not redefine any selector below, so an edit here is the only
 * way to change a badge — which is the point.
 *
 * Input prompts (gamepad plan G3). The SHAPE is drawn here and the label stays
 * plain text, because we already shipped a tofu box once by trusting a Unicode
 * glyph to exist in the system font (🖩, #284) — and a controller badge is a far
 * more visible place to lose that bet.
 */

/* Visually-hidden text: the badge is aria-hidden decoration, so the row header
   still announces a real name ("A button") rather than a circled-letter glyph or
   nothing at all. Deleting this makes the gamepad table unreadable to a screen
   reader while looking identical on screen. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.prompt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5em; height: 1.5em; padding: 0 0.35em; margin: 0 0.1em;
  font-family: ui-monospace, monospace; font-size: 0.86em; font-weight: 700;
  line-height: 1; vertical-align: -0.25em; white-space: nowrap;
}
.prompt-key {
  border: 1px solid #6d7f63; border-radius: 4px; border-bottom-width: 2px;
  background: rgba(40, 52, 34, 0.9); color: #dff0d0;
}
.prompt-pad { background: #2b3a52; color: #e8f2ff; border: 1px solid #5b7fa8; }
.prompt-face { border-radius: 999px; background: #384a2c; border-color: #7ba05b; color: #eaffe2; }
.prompt-shoulder { border-radius: 6px; background: #2b3a52; border-color: #5b7fa8; }
.prompt-system { border-radius: 4px; background: #3d3550; border-color: #8a7bb0; }
.prompt-dpad, .prompt-stick { border-radius: 4px; background: #4a3c28; border-color: #a8875b; }
/* A ROUTE, NOT A BUTTON (#247). `shape: 'menu'` means no pad button does this
   verb at all and the label names where it lives instead ("the interact
   menu"). Drawing it as a cap would be the very promise the ticket was about:
   a cap says "this is stamped on your controller". So the chrome comes off and
   it reads as the words it is.
   ⚠ COLOUR IS `inherit` ON PURPOSE. Every other badge picks its own pair and
   was measured against ONE panel; this one is substituted into running prose
   on surfaces we have not enumerated, so borrowing the sentence's own colour
   is the only way its contrast is right everywhere by construction. */
.prompt-menu {
  display: inline; background: none; border: 0; padding: 0; min-width: 0; height: auto;
  font-family: inherit; font-size: inherit; font-weight: 600; color: inherit;
  vertical-align: baseline; white-space: normal;
}

/* Controller reference table (G4). Scrolls in its own box so the help panel body
   never scrolls sideways on a phone. */
.help-pad { width: 100%; border-collapse: collapse; font-size: 0.76rem; margin: 0.4rem 0 0.6rem; }
.help-pad caption { caption-side: top; text-align: left; color: #9fb89a; font-size: 0.72rem; padding-bottom: 0.25rem; }
.help-pad th, .help-pad td { border: 1px solid #3c4a34; padding: 0.22rem 0.4rem; text-align: left; vertical-align: top; }
.help-pad thead th { background: rgba(40, 52, 34, 0.9); color: #dff0d0; }
.help-pad tbody th { background: rgba(28, 36, 24, 0.8); color: #eaffe2; white-space: nowrap; font-family: ui-monospace, monospace; }