/* The quick key map (quickmap.js): K in a match. A grid of tiles, each the
   painted icon of what is on a key, its name and its key. Tap one, press a
   key. The full page (schemes, every key) is the Settings page, styled at the
   bottom of this file in the door's own language. */
#binds[data-kind="quick"] { background: rgba(8, 10, 13, .72); padding: 16px; box-sizing: border-box; }
#binds .qm-card {
  --qm-ink: #f2e6bd;
  --qm-muted: #a99f86;
  --qm-brass: #c6a85b;
  --qm-gold: #f1d27d;
  width: min(880px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  box-sizing: border-box;
  padding: 16px 18px 14px;
  background: rgba(10, 15, 24, .97);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .55), 0 12px 36px rgba(0, 0, 0, .5);
  color: var(--qm-ink);
  font: 400 14px/1.35 "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
#binds .qm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#binds .qm-head b { font: 700 18px/1 "Glow Serif", "PT Serif", Georgia, serif; letter-spacing: .14em; color: var(--qm-gold); }
#binds .qm-head span { font-size: 13px; color: var(--qm-muted); }
#binds .qm-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
#binds .qm-tile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-height: 132px;
  padding: 10px 6px 10px;
  background: rgba(20, 28, 40, .95);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .3);
  color: var(--qm-ink);
  font: inherit;
  cursor: pointer;
}
#binds .qm-tile:hover, #binds .qm-tile:focus-visible { box-shadow: inset 0 0 0 1px var(--qm-brass); outline: none; }
#binds .qm-tile.is-listening { box-shadow: inset 0 0 0 2px var(--qm-gold), 0 0 18px rgba(241, 210, 125, .3); }
#binds .qm-tile.is-empty .qm-ic { opacity: .45; }
#binds .qm-ic { display: grid; place-items: center; width: 52px; height: 52px; color: var(--qm-brass); }
#binds .qm-ic img { width: 52px; height: 52px; object-fit: contain; }
#binds .qm-ic svg { width: 40px; height: 40px; }
#binds .qm-name { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2; }
#binds .qm-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 28px; align-items: center; }
#binds .qm-keys .co-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 28px;
  height: 26px;
  padding: 0 7px;
  box-sizing: border-box;
  background: linear-gradient(#253246, #182230);
  border: 1px solid rgba(198, 168, 91, .7);
  border-bottom-width: 3px;
  border-radius: 5px;
  font: 700 13px/1 "Glow Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  color: var(--qm-ink);
  white-space: nowrap;
}
#binds .qm-keys .co-cap-mouse svg { width: 12px; height: 17px; color: var(--qm-gold); }
#binds .qm-keys .co-cap-mouse i { font-style: normal; font-size: 11px; }
#binds .qm-ask { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--qm-gold); animation: qm-pulse 1s ease-in-out infinite; }
#binds .qm-none { font-size: 12px; color: var(--qm-muted); }
@keyframes qm-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { #binds .qm-ask { animation: none; } }
#binds .qm-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
#binds .qm-more { flex: 1; min-width: 180px; font-size: 12px; color: var(--qm-muted); text-align: center; }
#binds .qm-foot button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  font: 700 13px/1 "Avenir Next", "Segoe UI", system-ui, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}
#binds .qm-quiet { background: transparent; color: var(--qm-muted); box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .35); }
#binds .qm-done { background: linear-gradient(#f1d27d, #c99443); color: #22170e; min-width: 120px; }

@media (max-width: 600px) {
  #binds .qm-card { padding: 12px; }
  #binds .qm-head { flex-direction: column; gap: 4px; }
  #binds .qm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #binds .qm-tile { min-height: 112px; padding: 8px 4px; }
  #binds .qm-ic, #binds .qm-ic img { width: 40px; height: 40px; }
  #binds .qm-name { font-size: 12px; }
  #binds .qm-keys .co-cap-mouse i { display: none; }
  #binds .qm-more { order: 3; flex-basis: 100%; }
  #binds .qm-foot button { flex: 1; }
}

/* The full page, opened from Settings over the main menu (and from nowhere
   else). menus-ux-10 (2026-10-08): restyled in the door's own language from the
   concept in worldhopper-art-archive/glow-polish-2026-10-08/concepts/
   polish-menu-nav/keys-card-concept.png: the serif heading on a brass rule, the
   Settings rows' panel, the one gold, the cream focus ring. #binds is outside
   #hold, so the tokens are restated under the door's names. */
#binds[data-kind="full"] {
  --ui-ink: #f2e6bd;
  --ui-muted: #a9b79e;
  --ui-brass: #c6a85b;
  --ui-focus: #f2e6bd;
  --ui-gold-a: #f1d27d;
  --ui-gold-b: #c99443;
  --ui-gold-edge: #7a5f38;
  --ui-gold-ink: #22170e;
  --bc-serif: "Glow Serif", "PT Serif", Georgia, "Times New Roman", serif;
  --bc-body: "Glow Condensed", "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  padding: 16px; box-sizing: border-box;
  background: rgba(4, 6, 11, .72);
}
#binds .bc-full {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "title title" "schemes keys" "foot foot" "note note";
  gap: 10px 28px;
  width: min(940px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  box-sizing: border-box;
  padding: 20px 24px 16px;
  /* menus-ux-28: opaque, so the Settings rows under it do not ghost through. */
  background: rgb(7, 11, 19);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--ui-brass), 0 16px 48px rgba(0, 0, 0, .55);
  color: var(--ui-ink);
  font: 400 15px/1.3 var(--bc-body);
}
#binds .bc-full.bc-one { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "keys" "foot" "note"; width: min(520px, 100%); }
#binds .bc-full .bc-title {
  grid-area: title;
  margin: 0 0 4px; padding-bottom: 12px; text-align: center;
  font: 700 clamp(28px, 3.4vw, 40px)/1 var(--bc-serif); letter-spacing: .24em; text-indent: .24em;
  color: var(--ui-ink);
  background: linear-gradient(90deg, rgba(198, 168, 91, 0), var(--ui-brass) 30%, var(--ui-brass) 70%, rgba(198, 168, 91, 0)) bottom center / 100% 1px no-repeat;
}
#binds .bc-full .bc-schemes { grid-area: schemes; }
#binds .bc-full .bc-keys { grid-area: keys; display: grid; align-content: start; }
#binds .bc-full h3 { margin: 0 0 8px; font: 700 15px/1 var(--bc-serif); letter-spacing: .2em; color: var(--ui-gold-a); text-transform: uppercase; }
#binds .bc-full [role="radiogroup"] { display: grid; gap: 6px; }
/* One picker row per Blink style. The name only, until it is the chosen one. */
#binds .bc-full .schemerow {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 4px;
  width: 100%; min-height: 46px; margin: 0; padding: 9px 14px; box-sizing: border-box;
  background: rgba(16, 23, 34, .9);
  border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .3);
  color: var(--ui-ink); font: inherit; text-align: left; cursor: pointer;
}
#binds .bc-full .schemerow:hover { background: rgba(26, 36, 50, .95); box-shadow: inset 0 0 0 1px var(--ui-brass); }
#binds .bc-full .schemerow span { font-size: 16px; }
#binds .bc-full .schemerow small { grid-column: 2; font-size: 13px; line-height: 1.4; color: var(--ui-muted); opacity: 1; }
#binds .bc-full .schemerow.on { background: rgba(26, 36, 50, .95); box-shadow: inset 0 0 0 2px var(--ui-ink); border-color: transparent; }
#binds .bc-full .schemerow.on span { color: var(--ui-ink); font-weight: 600; }
#binds .bc-full .bc-radio { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ui-brass); }
#binds .bc-full .schemerow.on .bc-radio { background: radial-gradient(circle, var(--ui-gold-a) 0 4px, transparent 4.5px); box-shadow: inset 0 0 0 1.5px var(--ui-gold-a); }
/* The key list: quiet rows, the keycaps the buy screen and the quick map use. */
#binds .bc-full .bindrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; min-height: 36px; padding: 3px 4px 3px 8px; box-sizing: border-box;
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(198, 168, 91, .14);
  color: var(--ui-ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
#binds .bc-full .bindrow:hover { background: rgba(26, 36, 50, .7); }
#binds .bc-full .bindrow.is-fixed { cursor: default; }
#binds .bc-full .bindrow.is-fixed:hover { background: transparent; }
#binds .bc-full .bindrow.listening { background: rgba(241, 210, 125, .1); }
#binds .bc-full .bc-caps { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
#binds .bc-full .bindrow kbd {
  min-width: 34px; padding: 5px 9px; box-sizing: border-box; text-align: center;
  font: 700 13px/1 var(--bc-body); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ui-ink);
  background: linear-gradient(#253246, #182230);
  border: 1px solid rgba(198, 168, 91, .7); border-bottom-width: 3px; border-radius: 5px;
}
#binds .bc-full .bindrow kbd.bc-ask { color: var(--ui-gold-a); text-transform: none; animation: qm-pulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #binds .bc-full .bindrow kbd.bc-ask { animation: none; } }
#binds .bc-full .bindfoot { grid-area: foot; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
#binds .bc-full .bindfoot button {
  min-height: 48px; padding: 0 16px; border: 0; border-radius: 0; cursor: pointer;
  font: 700 15px/1 var(--bc-serif); letter-spacing: .16em; text-transform: uppercase;
}
#binds .bc-full .bc-ghost { background: rgba(16, 23, 34, .9); color: var(--ui-ink); box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .45); }
#binds .bc-full .bc-ghost:hover { box-shadow: inset 0 0 0 1px var(--ui-brass); background: rgba(26, 36, 50, .95); }
#binds .bc-full .bc-gold { background: linear-gradient(var(--ui-gold-a), var(--ui-gold-b)); color: var(--ui-gold-ink); box-shadow: inset 0 0 0 1px var(--ui-gold-edge); }
#binds .bc-full .bc-gold:hover { background: linear-gradient(#f6dc94, #d5a04c); }
#binds .bc-full .bc-note { grid-area: note; display: flex; align-items: center; gap: 10px; margin: 2px 0 0; font-size: 13px; color: var(--ui-muted); }
#binds .bc-full .bc-note kbd { flex: none; min-width: 28px; padding: 4px 6px; text-align: center; font: 600 12px/1 var(--bc-body); color: var(--ui-ink); box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .7); }
#binds .bc-full .bc-note b { flex: none; font: 400 13px/1 var(--bc-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ui-ink); margin-right: 8px; }
#binds .bc-full :is(button):focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
/* menus-ux-28: Shoot and Pause made the list two rows longer; 900 px tall
   screens keep the whole card on them. */
@media (max-height: 960px) { #binds .bc-full .bindrow { min-height: 32px; } }
/* A short laptop screen keeps the whole card on it. */
@media (max-height: 800px) {
  #binds .bc-full { padding: 14px 20px 12px; gap: 8px 24px; }
  #binds .bc-full .bc-title { font-size: 28px; padding-bottom: 8px; }
  #binds .bc-full .schemerow { min-height: 40px; padding: 7px 12px; }
  #binds .bc-full .bindrow { min-height: 29px; }
  #binds .bc-full .bindrow kbd { padding: 3px 8px; }
  #binds .bc-full .bindfoot button { min-height: 42px; }
}
@media (max-width: 760px) {
  #binds .bc-full { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "schemes" "keys" "foot" "note"; padding: 14px; }
  #binds .bc-full .bc-note { flex-wrap: wrap; }
}

/* The two trigger groups keep independent direction choices. */
#binds .bc-full .bc-directions { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
#binds .bc-full .bc-directions legend { margin-bottom: 10px; color: var(--ui-gold-a); font-size: 15px; }
#binds .bc-full .bc-directions label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#binds .bc-full .bc-directions select { flex: 0 0 auto; padding: 6px; background: #101722; color: var(--ui-ink); border: 1px solid var(--ui-brass); font: inherit; }
#binds .bc-full .bc-directions p { margin: 6px 0 14px; color: var(--ui-muted); font-size: 13px; line-height: 1.4; }