/* Copyright Ayers Electronics Inc. All rights reserved. */
/* on-page keypad. */

/* The on-page keypad under a text field on a television shell (js/keypad.js): the app's own
   keypad grammar - ghost keys, the white ring on the seat, the editing keys wide. It layers over
   every surface whose field it serves: the sign-in gate (40) and the first-run wizard (45). */
.page-keypad {
  position: fixed;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
/* Ten equal columns for the fixed panel's own rows, so a shorter row (the marks sharing the last
   letter row) never widens or narrows a key against the row above or below it. The action row spans
   the same ten columns instead of splitting them four ways. */
.page-keypad:not(.inline) {
  width: 764px;
}
.page-keypad > * + * {
  margin-top: 4px;
}
.page-keypad:not(.inline) .row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}
.page-keypad .key {
  min-width: 56px;
  height: 48px;
  padding: 0 10px;
  font: inherit;
  font-size: var(--type-heading);
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  cursor: pointer;
}
/* SHIFT and DELETE and DONE each hold two of the ten columns, SPACE the middle four: the same grid
   the letter and digit rows use, so a wide key is whole columns, never a fraction of one. */
.page-keypad:not(.inline) .row.actions .key {
  grid-column: span 2;
}
.page-keypad:not(.inline) .row.actions .key[data-key="SPACE"] {
  grid-column: span 4;
}
.page-keypad .key.wide {
  padding: 0 12px;
  font-size: var(--type-body);
  letter-spacing: 0.06em;
  font-weight: 600;
}
/* SHIFT is the arrow first, then the word, so the key reads to someone who has never met the term. */
.page-keypad .key.key-shift {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-keypad .key.key-shift > * + * {
  margin-left: 6px;
}
.page-keypad .key.key-shift svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.page-keypad .key:focus {
  outline: none;
  box-shadow: var(--focus-ring-inset);
}
.page-keypad.shift .key[data-key="SHIFT"] {
  color: var(--accent-text);
  border-color: var(--accent);
}
/* A keypad laid into a page's own column, in flow, rather than floating over the field: the search
   page's typing column and the first-run wizard's own field both anchor one here. */
.page-keypad.inline {
  position: static;
  z-index: auto;
  width: 100%;
  box-sizing: border-box;
}
/* One key width for every letter key: the row is a grid of the pad's own column count, so a row
   with fewer keys leaves a column empty instead of stretching the keys it has. js/keypad.js sets the
   column count in the panel's own class (cols-7 for the gate's own rows, cols-10 for a keypad that
   matches the fixed panel's ten). */
.page-keypad.inline .row {
  display: grid;
  gap: 3px;
}
.page-keypad.inline.cols-7 .row {
  grid-template-columns: repeat(7, 1fr);
}
.page-keypad.inline.cols-10 .row {
  grid-template-columns: repeat(10, 1fr);
}
/* Seven columns: the action row is sized by what it holds, so a field that asks for three words
   gets three keys across the card. */
.page-keypad.inline.cols-7 .row.actions {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-columns: none;
}
/* Ten columns: the action row spans the same grid the character rows use, SHIFT/DELETE/DONE two of
   the ten columns and SPACE the middle four - the fixed panel's own rule (above), carried into a
   page's column. */
.page-keypad.inline.cols-10 .row.actions .key {
  grid-column: span 2;
}
.page-keypad.inline.cols-10 .row.actions .key[data-key="SPACE"] {
  grid-column: span 4;
}
/* A key here is a D-pad key, not a pointer target, so the control minimum height (44) does not hold
   it at a television's 960 viewport; the wide screens below grow the keys. js/layout-search.test.mjs
   holds the arithmetic a page's own column has to leave room for. */
.page-keypad.inline .key {
  min-width: 0;
  min-height: 0;
  height: 36px;
  padding: 0;
  font-size: var(--type-keypad-digit);
}
.page-keypad.inline > * + * {
  margin-top: 2px;
}
.page-keypad.inline .key.wide {
  min-width: 0;
  padding: 0 6px;
  font-size: var(--type-micro);
}
@media screen and (min-width: 1280px) {
  .page-keypad.inline .key {
    height: 44px;
    font-size: var(--type-heading);
  }
  .page-keypad.inline .key.wide {
    font-size: var(--type-label);
  }
}