/* /vim.css - presentation for the modal-editing demo at /vim.
   Lives here rather than in a <style> block so the demo needs no inline
   styles. Loaded only by /vim, so the bare kbd rule is not a site-wide leak. */

/* The vim furniture on /vim arrives carrying the hidden attribute, and is only
   revealed by /vim.js once the keys are actually wired. The display rules
   below would otherwise outrank the UA stylesheet's [hidden] rule and show it
   before the script has had a chance to succeed or fail. */

[data-vim-only][hidden] { display: none; }

.vim-status {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    box-sizing: border-box;
    padding: 0.25rem 0.5rem;
    border: 1px solid currentColor;
    border-top: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
}

.vim-status [data-vim-buffer] { color: #b45309; font-weight: 700; }
.vim-status [data-vim-position] { opacity: 0.6; }

.vim-editor { border: 1px solid currentColor; }
.vim-editor fieldset { border: 0; margin: 0; padding: 0; }
.vim-editor legend { padding: 0.25rem 0.5rem 0; }

.vim-editor textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    padding: 0.5rem;
    background: transparent;
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9375rem;
    line-height: 1.5;
    resize: vertical;
    tab-size: 4;
}

.vim-editor textarea:focus { outline: 2px solid currentColor; outline-offset: -2px; }
.vim-editor button { margin: 0.5rem; }

kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0 0.25em;
    white-space: nowrap;
}

/* Command reference */

.vim-docs h3 { margin-block: 1.5rem 0.25rem; font-size: 1rem; }

.vim-keys {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.4rem 1rem;
    align-items: baseline;
    margin-block: 0.5rem 1rem;
}

.vim-keys dt { text-align: right; }
.vim-keys dd { margin: 0; opacity: 0.9; }

@media (max-width: 34rem) {
    .vim-keys { grid-template-columns: 1fr; gap: 0.15rem; }
    .vim-keys dt { text-align: left; margin-top: 0.5rem; }
}
/* The switch that turns the editor off, and the line that says it is off. Both
   arrive hidden: the choice is made in the browser, from storage and the pointer
   query, so the page cannot know which way the box should be ticked and would
   otherwise flash the wrong answer. */

[data-vim-option][hidden] { display: none; }
[data-vim-off-only][hidden] { display: none; }

.vim-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: baseline;
    box-sizing: border-box;
    padding: 0.25rem 0.5rem;
    border: 1px solid currentColor;
    border-top: 0;
    font-size: 0.875rem;
}

.vim-choice label {
    display: inline-flex;
    gap: 0.4rem;
    align-items: baseline;
    cursor: pointer;
}

.vim-choice input { margin: 0; align-self: center; }
.vim-choice-note { opacity: 0.7; }

/* Still to do */
/* Still to do */

.vim-todo li { margin-block: 0.5rem; }
.vim-todo li strong { display: block; font-weight: 600; }
.vim-todo li span.cost { font-size: 0.8125rem; opacity: 0.7; }