@import url("./keyboard-physical.css?v=3.2.0");
@import url("./keyboard-virtual-device.css?v=3.2.0");
.keyboard-tool{max-width:1200px}.keyboard-toolbar{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:1rem}.keyboard-editor{font-size:1.55rem;line-height:1.8}.keyboard-info{min-height:2.5rem;padding:.7rem 0;color:#607069}.keyboard-levels{display:none}.keyboard-virtual{--keyboard-columns:11;padding:1rem;background:#eef5f1;border:1px solid #dce8e1;border-radius:1.2rem;overflow-x:auto;overflow-y:hidden}.keyboard-grid-header,.keyboard-row{display:grid;grid-template-columns:2.25rem repeat(var(--keyboard-columns),minmax(0,1fr));gap:.45rem;min-width:820px}.keyboard-grid-header{margin-bottom:.35rem;align-items:end}.keyboard-row+.keyboard-row{margin-top:.45rem}.keyboard-grid-corner,.keyboard-col-label,.keyboard-row-label{display:grid;place-items:center;color:#738179;font-size:.68rem;font-weight:700;line-height:1;user-select:none}.keyboard-col-label{min-height:1.35rem}.keyboard-row-label{grid-column:1;min-height:68px;border-radius:.55rem;background:#e4eee8;color:#53645b}.keyboard-key{min-width:0;min-height:68px;border:1px solid #cbded3;background:#fff;border-radius:.7rem;padding:.38rem .3rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;line-height:1.05;box-shadow:0 2px 5px rgba(0,0,0,.045);overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.keyboard-key:not(:disabled):hover,.keyboard-key:not(:disabled):focus-visible{border-color:#16734a;outline:none;box-shadow:0 0 0 3px rgba(22,115,74,.14);transform:translateY(-1px)}.keyboard-key .glyph{font-size:1.65rem;line-height:1.15;white-space:nowrap}.keyboard-key .key-label{display:block;max-width:100%;min-height:.72rem;color:#697970;font-size:.64rem;line-height:1.05;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.keyboard-key--function{background:#f8fbf9;border-color:#bdd5c7}.keyboard-key--function .glyph{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.18rem;font-weight:700}.keyboard-key--function .key-label{color:#365747;font-size:.7rem;font-weight:700}.keyboard-key--space .key-label{font-size:.76rem}.keyboard-key--combining .glyph{font-size:1.75rem}.keyboard-key--invisible .glyph{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.78rem;font-weight:800;letter-spacing:.04em}.keyboard-key--empty{background:rgba(255,255,255,.48);border-color:#d9e5de;box-shadow:none;cursor:default}.keyboard-key:disabled{opacity:1}.page-hero.compact{padding:3.5rem 0}@media(max-width:991px){.keyboard-tool{max-width:100%}.keyboard-virtual{padding:.8rem}.keyboard-grid-header,.keyboard-row{min-width:780px}.keyboard-key{min-height:64px}}@media(max-width:767px){.keyboard-virtual{padding:.65rem}.keyboard-grid-header,.keyboard-row{min-width:740px;gap:.38rem}.keyboard-toolbar{align-items:flex-start;flex-direction:column}.keyboard-editor{font-size:1.3rem}.keyboard-row-label{min-height:60px}.keyboard-key{min-height:60px;border-radius:.6rem}.keyboard-key .glyph{font-size:1.45rem}.keyboard-key .key-label{font-size:.6rem}}
/* keyboard-virtual-modern: visual keyboard skin; SNI row/column geometry remains driven by presentation.js */
.keyboard-virtual.keyboard-virtual-modern,.keyboard-virtual{background:#505552;border:3px solid #737b77;border-radius:1rem;padding:.8rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 28px rgba(18,35,27,.10)}
.keyboard-grid-header{display:none!important}
.keyboard-row{grid-template-columns:0 repeat(var(--keyboard-columns),minmax(58px,1fr));gap:.5rem;min-width:900px;align-items:stretch}
.keyboard-row+.keyboard-row{margin-top:.5rem}
.keyboard-row-label{display:none!important}
.keyboard-key{min-height:72px;border:0;border-bottom:2px solid #d1d3d2;border-radius:.85rem;background:#f7f8f7;padding:.35rem .3rem;box-shadow:0 2px 0 rgba(0,0,0,.22),0 4px 9px rgba(0,0,0,.10);color:#0d100f;overflow:visible}
.keyboard-key:not(:disabled):hover,.keyboard-key:not(:disabled):focus-visible{border-color:transparent;outline:none;box-shadow:0 0 0 3px rgba(198,235,216,.72),0 3px 0 rgba(0,0,0,.24);transform:translateY(-1px);background:#fff}
.keyboard-key:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.20)}
.keyboard-key .glyph{font-size:2rem;line-height:1.05;color:#080b09;font-weight:500;white-space:nowrap}
.keyboard-key .key-label{display:none}
.keyboard-key--function{background:#d6d8d7;border-bottom-color:#afb4b1;color:#737976}
.keyboard-key--function .glyph{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.8rem;font-weight:700;color:#747a77}
.keyboard-key--function .key-label{display:block;min-height:0;margin-top:.1rem;color:#686f6b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.62rem;font-weight:700;line-height:1;text-transform:none}
.keyboard-key--space{background:#eceeed}
.keyboard-key--space .glyph{display:none}
.keyboard-key--space .key-label{font-size:.72rem;letter-spacing:.03em}
.keyboard-key--combining .glyph{font-size:2rem}
.keyboard-key--invisible .glyph{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.05em}
.keyboard-key--empty{background:#626864;border:1px solid rgba(255,255,255,.08);border-bottom-color:rgba(0,0,0,.18);box-shadow:none;cursor:default}
.keyboard-key--empty .glyph,.keyboard-key--empty .key-label{display:none}
.keyboard-key:disabled{opacity:1}
@media(max-width:991px){.keyboard-virtual{padding:.7rem}.keyboard-row{min-width:820px;gap:.44rem}.keyboard-key{min-height:66px}.keyboard-key .glyph{font-size:1.75rem}}
@media(max-width:767px){.keyboard-virtual{padding:.55rem;border-width:2px;border-radius:.8rem}.keyboard-row{min-width:760px;gap:.38rem}.keyboard-row+.keyboard-row{margin-top:.38rem}.keyboard-key{min-height:60px;border-radius:.7rem}.keyboard-key .glyph{font-size:1.55rem}.keyboard-key--function .glyph{font-size:1.45rem}.keyboard-key--function .key-label{font-size:.56rem}}

/* RSNI 9048:2026 extra scripts */
[data-keyboard-tool][data-script="pegon"] .keyboard-editor,
[data-keyboard-virtual-tool][data-script="pegon"] .virtual-device-editor{direction:rtl;text-align:right}
[data-keyboard-tool][data-script="pegon"] .glyph,
[data-keyboard-tool][data-script="bugis"] .glyph,
[data-keyboard-tool][data-script="batak"] .glyph{unicode-bidi:isolate}

/* Rejang reference keyboard */
[data-keyboard-tool][data-script="rejang"] .glyph,
[data-keyboard-virtual-tool][data-script="rejang"] .glyph,
[data-keyboard-tool][data-script="rejang"] .keyboard-editor,
[data-keyboard-virtual-tool][data-script="rejang"] .virtual-device-editor{font-family:"Noto Sans Rejang","Segoe UI Historic","Noto Sans Symbols 2",sans-serif}


/* v2.8: Pegon Arabic Pepet U+0897 needs a modern Arabic shaping font.
   Font is installed separately from SIL's official v4.500 package. */
@font-face {
  font-family: 'Merajut Pegon Web';
  src: url('../fonts/pegon/ScheherazadeNew-Regular.woff2') format('woff2'),
       url('../fonts/pegon/ScheherazadeNew-Regular.woff') format('woff'),
       url('../fonts/pegon/ScheherazadeNew-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
[data-keyboard-tool][data-script='pegon'] .keyboard-key:not(.keyboard-key--function) .glyph,
[data-keyboard-tool][data-script='pegon'] .keyboard-editor,
[data-keyboard-tool][data-script='pegon'] .virtual-device-editor {
  font-family: 'Merajut Pegon Web','Scheherazade New','Amiri','Noto Naskh Arabic',serif;
}

/* v3.0: fallback label until a U+0897-capable Scheherazade font is loaded. */
[data-keyboard-tool][data-script='pegon'] .keyboard-key--pepet-fallback .glyph {
  font: 800 11px/1.15 Inter, ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: .025em; direction: ltr;
}