/* Scoped styles for the standalone keyboard trial page. */
.keyboard-section{padding-block:34px 64px}
.keyboard-panel{max-width:960px;margin-inline:auto;background:#fff;border:1px solid #dce3e9;border-radius:16px;padding:clamp(16px,3vw,30px);box-shadow:0 8px 24px rgba(20,37,58,.05)}
.keyboard-editor-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;font-weight:700;color:#14253a}
#keyboard-count{font-size:.83rem;font-weight:500;color:#5d6c79;font-variant-numeric:tabular-nums}
#arabic-editor{display:block;width:100%;min-height:140px;box-sizing:border-box;padding:15px 18px;border:1px solid #b8c6d1;border-radius:10px;background:#fbfcfd;color:#14253a;font-family:'Noto Naskh Arabic',serif;font-size:clamp(1.6rem,3vw,2rem);line-height:1.8;resize:vertical;text-align:right}
#arabic-editor:focus-visible,.keyboard-panel button:focus-visible{outline:3px solid #d8a744;outline-offset:2px}
.keyboard-help{font-size:.88rem;color:#596b78;margin:9px 0 24px}
.keyboard-keys,.keyboard-diacritics{display:grid;gap:9px}
.keyboard-row{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.keyboard-key{min-width:0;flex:1 1 44px;max-width:70px;min-height:47px;padding:4px 3px;border:1px solid #c6d1da;border-radius:8px;background:#f7f9fb;color:#14253a;font-family:'Noto Naskh Arabic',serif;font-size:1.55rem;line-height:1.25;cursor:pointer;touch-action:manipulation}
.keyboard-key:hover{background:#e8eff4;border-color:#8fa6b7}
.keyboard-key:active{background:#dce8f0}
.keyboard-subheading{font-size:.84rem;font-weight:700;color:#536473;margin:18px 0 4px}
.keyboard-diacritic-row .keyboard-key{background:#fff9ec;border-color:#e2d3b0}
.keyboard-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.keyboard-action{border:1px solid #b9c7d2;border-radius:8px;padding:11px 17px;background:#fff;color:#14253a;font:inherit;font-size:.92rem;font-weight:650;cursor:pointer;touch-action:manipulation}
.keyboard-action:hover{background:#eef3f7}
.keyboard-space{flex:1 1 130px}
.keyboard-copy{background:#14253a;color:white;border-color:#14253a;margin-left:auto}
.keyboard-copy:hover{background:#29415a}
.keyboard-action:disabled{opacity:.5;cursor:not-allowed}
.keyboard-status{min-height:1.4em;margin:10px 0 0;color:#426244;font-size:.88rem}
@media(max-width:600px){.keyboard-section{padding-block:18px 42px}.keyboard-panel{padding:13px;border-radius:12px}.keyboard-row{gap:4px}.keyboard-key{flex:1 1 calc((100% - 36px)/10);min-height:37px;max-width:none;padding:2px 0;font-size:1.25rem;border-radius:6px}.keyboard-diacritic-row .keyboard-key{flex:1 1 calc((100% - 20px)/6)}#arabic-editor{min-height:120px}.keyboard-help{margin-bottom:16px}.keyboard-actions{gap:7px}.keyboard-action{padding:9px 12px;font-size:.83rem}.keyboard-copy{margin-left:0}}

/* Mobile: flow all letter keys into one ten-column grid, regardless of desktop row grouping. */
@media (max-width:600px){
  .keyboard-keys{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
  .keyboard-keys .keyboard-row{display:contents}
  .keyboard-keys .keyboard-key{width:100%;min-width:0;max-width:none;box-sizing:border-box;flex:none}
  .keyboard-diacritic-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
  .keyboard-diacritic-row .keyboard-key{width:100%;min-width:0;max-width:none;box-sizing:border-box;flex:none}
}

/* Numbers and punctuation use the same key styling as the Arabic letters. */
.keyboard-numbers,.keyboard-punctuation{display:grid;gap:9px}
@media(max-width:600px){
  .keyboard-number-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
  .keyboard-punctuation-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .keyboard-number-row .keyboard-key,.keyboard-punctuation-row .keyboard-key{width:100%;min-width:0;max-width:none;box-sizing:border-box;flex:none}
}