body {
    margin: 2em auto 0 auto;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    max-width: 80ch;
}

[contenteditable="true"] {
  caret-color: red;
}

option {
    font-family: inherit;
}


#clinical-narrative {
    background: #eeeeee;
    border-radius: 5px;
    margin: 16px 0;
}

#clinical-narrative > p {
  padding: 15px;
}


.check-button {
    background: linear-gradient(135deg, #005eb8, #0a74d6);
    border: 1px solid #004a93;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 94, 184, 0.25);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font: inherit;
    font-weight: 700;
    margin-top: 0.8rem;
    padding: 0.55rem 1.1rem;
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.check-button:hover {
    box-shadow: 0 4px 10px rgba(0, 94, 184, 0.35);
    filter: brightness(1.03);
    transform: translateY(-1px);
}

.check-button:active {
    transform: translateY(0);
}

.check-button:focus-visible {
    outline: 3px solid #98c5f0;
    outline-offset: 2px;
}

.misspelled {
    background: #fff1c2;
    border-bottom: 2px solid #d97706;
    padding: 0 2px;
    cursor: pointer;
}

.suggestion-select {
    display: none;
    font-size: 0.9rem;
}

.suggestion-select.open {
    display: inline-block;
}

.word-editor {
    display: inline;
}

.word-editor .misspelled.hidden {
    display: none;
}

.corrected {
    border-bottom: 2px solid #16a34a;
    padding: 0 2px;
}