/* ==========================================================================
   MGT2E DATAPAD — On-screen keyboard (code/keyboard.js)
   A panel floating over the page. Its top bar drags it and the bar's ends resize it. keyboard.js sets its place
   and size, and --kbd-scale, which scales the lettering with the size.
   ========================================================================== */

@layer components {

  .kbd {
    position: fixed;
    z-index: 960;               /* over card panels (21), sign-in (900) and tips (950); under the portrait lock (1000) */
    display: flex;
    flex-direction: column;
    background: var(--surface-solid);
    border: 1px solid var(--glass-border-hi);
    box-shadow: var(--shadow-drop), var(--glow-ice);
    touch-action: none;         /* no scrolling or zooming from the panel */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  /* Top bar to drag by: tall enough for a finger, with three grip lines in the middle */
  .kbd__handle {
    flex: 0 0 30px;
    position: relative;
    background: var(--wash-ice);
    border-bottom: 1px solid var(--glass-border);
    cursor: grab;
  }

  .kbd__handle::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 56px;
    height: 9px;
    transform: translateX(-50%);
    border-top: 1px solid var(--c-ice-dim);
    border-bottom: 1px solid var(--c-ice-dim);
    background: linear-gradient(var(--c-ice-dim), var(--c-ice-dim)) center / 100% 1px no-repeat;
  }

  /* The bar's ends resize the panel: a corner mark in each */
  .kbd__grip {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    cursor: nwse-resize;
  }

  .kbd__grip--left  { left: 0; }
  .kbd__grip--right { right: 0; cursor: nesw-resize; }

  .kbd__grip::after {
    content: "";
    position: absolute;
    top: 7px;
    width: 14px;
    height: 14px;
    border-top: 2px solid var(--c-ice);
  }

  .kbd__grip--left::after  { left: 8px;  border-left: 2px solid var(--c-ice); }
  .kbd__grip--right::after { right: 8px; border-right: 2px solid var(--c-ice); }

  .kbd.is-dragging .kbd__grip::after { border-color: var(--c-orange); }

  .kbd.is-dragging {
    border-color: var(--c-orange);
    box-shadow: var(--shadow-drop), var(--glow-orange);
  }

  .kbd.is-dragging .kbd__handle { cursor: grabbing; }

  .kbd.is-dragging .kbd__handle::after {
    border-color: var(--c-orange);
    background-image: linear-gradient(var(--c-orange), var(--c-orange));
  }

  .kbd__keys {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
  }

  .kbd__row {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
  }

  .kbd__key {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: calc(1.2rem * var(--kbd-scale, 1));
    color: var(--c-text);
    background: var(--wash-ice);
    border: 1px solid var(--glass-border);
    -webkit-tap-highlight-color: transparent;
  }

  .kbd__key.is-down {
    color: var(--c-void);
    background: var(--c-ice);
    border-color: var(--c-ice-bright);
    box-shadow: var(--glow-ice);
  }

  /* Letters with variants when held: a small tick in the corner */
  .kbd__key--alts::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 4px;
    height: 4px;
    border-top: 1px solid var(--c-text-muted);
    border-right: 1px solid var(--c-text-muted);
  }

  /* Number row: what the key gives with Shift, small in the corner */
  .kbd__key--digit::after {
    content: attr(data-hint);
    position: absolute;
    top: 3px;
    right: 6px;
    font-size: calc(var(--fs-xs) * var(--kbd-scale, 1));
    color: var(--c-text-muted);
  }

  .kbd__key--digit.is-down::after { color: var(--c-void); }

  .kbd__key--fn {
    font-family: var(--font-ui);
    font-size: calc(var(--fs-sm) * var(--kbd-scale, 1));
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--c-ice);
    background: var(--well);
  }

  .kbd__key--icon  { font-size: calc(1.5rem * var(--kbd-scale, 1)); letter-spacing: 0; }
  .kbd__key--wide  { flex-grow: 1.5; }

  /* Number pad: 0 spans two columns, gap included, so the columns line up with the rows above */
  .kbd--pad .kbd__row:last-child .kbd__key:first-child { flex: 2 1 6px; }

  .kbd__key--space { flex-grow: 6; font-size: calc(var(--fs-xs) * var(--kbd-scale, 1)); color: var(--c-text-muted); }

  .kbd__key--fn.is-on {
    color: var(--c-orange);
    border-color: var(--c-orange);
  }

  .kbd__key--fn.is-locked {
    color: var(--c-void);
    background: var(--c-orange);
    box-shadow: var(--glow-orange);
  }

  /* The variants of a held letter, above its key */
  .kbd__alts {
    position: absolute;
    z-index: 1;
    display: flex;
    gap: 2px;
    padding: 4px;
    background: var(--surface-solid);
    border: 1px solid var(--glass-border-hi);
    box-shadow: var(--shadow-drop), inset 2px 0 0 var(--c-orange);
  }

  .kbd__alt {
    min-width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: calc(1.2rem * var(--kbd-scale, 1));
    color: var(--c-text);
  }

  .kbd__alt.is-on {
    color: var(--c-void);
    background: var(--c-orange);
  }

  /* After two taps on the top bar, laid over it. Touches pass through to the bar, so the third tap still lands. */
  .kbd__hint {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    overflow: hidden;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    line-height: 30px;
    letter-spacing: var(--tracking);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-orange);
    background: var(--surface-solid);
    pointer-events: none;
  }
}