/* A compact, explicit choice between transliteration and direct typing. */
.input-mode-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    color: #53665c;
    font-size: .75rem;
}
.input-mode-title {
    margin-right: 2px;
    color: #40564a;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.input-mode-option {
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid #cbdcd1;
    border-radius: 7px;
    color: #29483a;
    background: #fff;
    font: 700 .72rem/1.2 "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}
.input-mode-option:hover,
.input-mode-option:focus-visible {
    border-color: #75ae89;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(23, 114, 69, .12);
}
.input-mode-option.is-active,
.input-mode-option[aria-pressed="true"] {
    border-color: #177245;
    color: #fff;
    background: #177245;
}
.input-mode-note {
    flex: 1 1 100%;
    color: #718279;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.4;
}
.input-mode-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 100%;
    gap: 10px;
    margin-top: 3px;
    padding: 7px 9px;
    border: 1px solid #e5c875;
    border-radius: 7px;
    color: #684d08;
    background: #fff8df;
    font-size: .73rem;
    font-weight: 700;
    line-height: 1.35;
}
.input-mode-alert[hidden] { display: none !important; }
.input-mode-alert-action {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid #177245;
    border-radius: 6px;
    color: #fff;
    background: #177245;
    font: 700 .7rem/1.2 "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}
.input-mode-alert-action:hover,
.input-mode-alert-action:focus-visible { background: #0d5331; outline: 0; box-shadow: 0 0 0 2px rgba(23,114,69,.15); }
.editor-chrome .input-mode-control {
    flex: 1 1 auto;
    min-width: 250px;
}
.input-mode-control-rich {
    margin: 8px 0 9px;
    padding: 8px 10px;
    border: 1px solid #dce7e0;
    border-radius: 10px;
    background: #f7faf8;
}
.input-mode-control-card {
    margin-top: 7px;
    padding: 7px 8px;
    border: 1px solid #dce7e0;
    border-radius: 8px;
    background: #f7faf8;
}
.batch-transliteration-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    margin: 8px 0 12px;
    padding: 11px 13px;
    border: 1px solid #b9dfc6;
    border-radius: 10px;
    background: #effaf3;
    color: #29483a;
    font-size: .78rem;
}
.batch-transliteration-panel[hidden] { display: none !important; }
.batch-transliteration-panel [data-batch-title],
.batch-transliteration-panel [data-batch-guide],
.batch-transliteration-panel [data-batch-note],
.batch-transliteration-panel [data-batch-prompt],
.batch-transliteration-panel [data-batch-status] { grid-column: 1; }
.batch-transliteration-panel [data-batch-title],
.batch-transliteration-panel [data-batch-prompt] { color: #145f38; line-height: 1.4; }
.batch-transliteration-panel [data-batch-title] { font-size: .84rem; }
.batch-transliteration-panel [data-batch-guide] { color: #29483a; line-height: 1.45; }
.batch-transliteration-panel small { color: #61746a; line-height: 1.4; }
.batch-transliteration-panel button {
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: center;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #177245;
    border-radius: 8px;
    color: #fff;
    background: #177245;
    font: 700 .76rem/1.2 "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}
.batch-transliteration-panel button:hover,
.batch-transliteration-panel button:focus-visible { background: #0d5331; outline: 0; }
.batch-transliteration-panel button:disabled { cursor: wait; opacity: .65; }
.batch-transliteration-panel [data-batch-status] { color: #177245; font-size: .74rem; }
@media (max-width: 767px) {
    .editor-chrome .input-mode-control {
        flex-basis: 100%;
        min-width: 0;
        order: 10;
    }
    .input-mode-option {
        min-height: 34px;
    }
    .input-mode-alert { align-items: flex-start; flex-direction: column; }
    .input-mode-alert-action { width: 100%; }
    .batch-transliteration-panel { grid-template-columns: 1fr; }
    .batch-transliteration-panel button { grid-column: 1; grid-row: auto; width: 100%; }
}