/* Character Map: a grid of characters, a magnified preview and a copy box */
.charmap-window { min-width: 300px; }
.cm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #ece9d8; font: 11px Tahoma, sans-serif; }
.cm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cm-row select, .cm-row input { font: 11px Tahoma, sans-serif; border: 1px solid #7f9db9; background: #fff; padding: 1px 3px; height: 21px; box-sizing: border-box; }
.cm-row input { flex: 1; min-width: 80px; }
.cm-row button { font: 11px Tahoma, sans-serif; padding: 1px 10px; border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(#fff, #ece9d8 85%, #d6d0c0); cursor: pointer; }
.cm-row button:hover { border-color: #e5a02a; }
.cm-grid { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); grid-auto-rows: 24px; background: #fff; border: 2px inset #d4d0c8; font-size: 15px; }
.cm-cell { display: grid; place-items: center; border: 1px solid #c8c4b4; margin: 0 -1px -1px 0; background: #fff; padding: 0; font: inherit; color: #000; cursor: default; }
.cm-cell:hover { background: #c1d2ee; }
.cm-cell:focus-visible, .cm-cell.sel { outline: 2px solid #316ac5; outline-offset: -2px; background: #316ac5; color: #fff; }
.cm-zoom { position: fixed; z-index: 100000; width: 56px; height: 56px; display: grid; place-items: center; background: #ffffe1; border: 1px solid #000; font-size: 36px; pointer-events: none; box-shadow: 2px 2px 3px rgba(0,0,0,.4); }
.cm-zoom[hidden] { display: none; }
.cm-row[hidden] { display: none; }
.cm-adv-toggle { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.cm-row input[type="checkbox"] { flex: none; min-width: 0; height: auto; padding: 0; }
#cm-goto { flex: 0 1 90px; text-transform: uppercase; }