/* Floating Arabic keyboard (K2), shared by the board and the worksheet studio. It floats on wide screens and docks at
   the bottom on phones: inside the board layout there, fixed to the screen elsewhere (.kbd-fixed). */
.kbd { position: fixed; z-index: 30; inline-size: min(600px, calc(100vw - 16px)); background: var(--surface); border: 1px solid var(--control-line); border-radius: var(--radius); box-shadow: var(--shadow); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.kbd[hidden] { display: none; }
.kbd .icon-btn { display: inline-grid; place-items: center; inline-size: var(--tap, 44px); block-size: var(--tap, 44px); padding: 0; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--ink-2); cursor: pointer; }
.kbd .icon-btn svg { inline-size: 20px; block-size: 20px; }
.kbd-bar { display: flex; align-items: center; gap: 8px; padding-block: 4px; padding-inline: 12px 4px; border-block-end: 1px solid var(--line); cursor: grab; }
.kbd-title { flex: 1; margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbd-ctrls { display: flex; align-items: center; gap: 4px; }
.kbd-body { display: grid; gap: 6px; padding: 8px; }
.kbd-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
/* K3: the floating panel scales as a whole from its top-left corner (left/top place it). The transformed area is
   also the hit area, so nothing invisible blocks the board. Docked on phones it is never scaled. */
.kbd { transform: scale(var(--kbd-scale, 1)); transform-origin: 0 0; }
.kbd-size { display: flex; align-items: center; gap: 6px; }
.kbd-size-label { font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.kbd-hint { margin: 0; padding: 6px 10px; border-radius: var(--radius-s); background: var(--blue-tint); color: var(--ink); font-size: 14px; }
.kbd-key { min-block-size: 38px; min-inline-size: 0; padding: 0 2px; border: 1px solid var(--control-line); border-radius: 6px; background: var(--surface); color: var(--ink); font-family: var(--font-model); font-size: 20px; line-height: 1.1; cursor: pointer; }
.kbd-key:hover:not(:disabled) { border-color: var(--blue); }
.kbd-key:active:not(:disabled), .kbd-key[aria-pressed="true"] { background: var(--blue-tint); border-color: var(--blue); }
.kbd-key:disabled { opacity: .45; cursor: default; }
.kbd-rows { display: grid; gap: 4px; }
.kbd-row { display: flex; justify-content: center; gap: 4px; }
.kbd-row .kbd-key { flex: 0 0 calc((100% - 48px) / 13); }
.kbd-grid, .kbd-marks { display: grid; grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)); gap: 4px; }
.kbd-fn { display: flex; gap: 4px; }
.kbd-wide { padding-inline: 10px; font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.kbd-space { flex: 1; }
#kbd-page { display: none; }
.kbd-short { display: none; }
#kbd-min > span { display: contents; }
#kbd-min[aria-pressed="true"] .ico-min, #kbd-min[aria-pressed="false"] .ico-expand { display: none; }
.kbd[data-min="true"] .kbd-body, .kbd[data-min="true"] .kbd-credit { display: none; }
.kbd-credit { margin: 0; padding-block: 0 6px; padding-inline: 12px; font-size: 12px; color: var(--ink-3); text-align: end; }
.kbd-credit a { color: var(--blue); }
@media (max-width: 760px) {
  .kbd { position: static; inline-size: auto; min-inline-size: 0; overflow: hidden; border-inline: 0; border-block-end: 0; border-radius: 0; box-shadow: var(--shadow-up); }
  .kbd-bar { cursor: default; padding-inline-start: 10px; }
  .kbd-layouts, #kbd-shift, .kbd-size { display: none; }
  .kbd { transform: none; }
  .kbd-tools { display: none; }
  .kbd-device { padding-inline: 8px; font-size: 13px; white-space: normal; line-height: 1.15; max-inline-size: 150px; }
  #kbd-page { display: inline-flex; align-items: center; justify-content: center; }
  .kbd .icon-btn, .kbd .btn { min-block-size: var(--tap); min-inline-size: var(--tap); }
  .kbd-body { padding: 6px 8px; }
  .kbd-keys { max-block-size: max(96px, calc(26svh - 56px)); overflow-y: auto; }
  .kbd-keys { scroll-snap-type: y mandatory; scroll-padding-block: 0; }
  .kbd-keys .kbd-key { scroll-snap-align: start; }  /* rows stop whole, never half cut */  /* the keys scroll, the space/delete row stays; the board keeps most of the screen */
  .kbd-long { display: none; }
  .kbd-short { display: inline; }
  .kbd-wide { min-inline-size: 44px; font-size: 20px; }
  .kbd-credit { padding-block-end: 4px; font-size: 11px; }
  .kbd-key { min-block-size: 44px; font-size: 22px; }
  .kbd-grid, .kbd-marks { grid-template-columns: repeat(var(--cols, 6), minmax(44px, 1fr)); }
  .kbd[data-page="letters"] .kbd-marks { display: none; }
}
@media (max-width: 760px) {
  .kbd.kbd-fixed { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; }
  body[data-kbd="open"] .kbd-pad { padding-block-end: 40svh; }  /* the page scrolls clear of the docked keys */
}