/* Neovim practice editor */
[data-neovim-playground] { margin: 1.5rem 0; }
[data-neovim-playground] .nvwp-actions { display: flex; gap: 0.5rem; margin: 0.5rem 0; }
[data-neovim-playground] .nvwp-actions button { font: inherit; padding: 0.4rem 0.9rem; cursor: pointer; }
[data-neovim-playground] .nvwp-screen { position: relative; overflow-x: auto; border-radius: 4px; }
[data-neovim-playground] .nvwp-grid { font: 14px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; padding: 0.25rem; }
[data-neovim-playground] .nvwp-row { display: block; min-height: 1.35em; }
[data-neovim-playground] .nvwp-cursor { outline: 2px solid currentColor; outline-offset: -2px; }
/* paint() rebuilds the grid on every redraw, which restarts the animation: the
   cursor stays solid while keys arrive and blinks once they stop (blinkwait).
   Only a focused editor blinks, and never for readers who ask for less motion. */
[data-neovim-playground] .nvwp-screen:focus-within .nvwp-cursor { animation: nvwp-blink 1s step-end 0.7s infinite; }
@keyframes nvwp-blink { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  [data-neovim-playground] .nvwp-screen:focus-within .nvwp-cursor { animation: none; }
}
[data-neovim-playground] .nvwp-keys { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; resize: none; border: 0; padding: 0; font-size: 16px; caret-color: transparent; cursor: text; }
[data-neovim-playground] .nvwp-screen:focus-within { outline: 2px solid #4a90d9; outline-offset: 2px; }
[data-neovim-playground] .nvwp-mode { margin: 0; padding: 0.2rem 0.5rem; font: 600 0.85rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border-top: 1px solid currentColor; }
[data-neovim-playground] .nvwp-hint { margin: 0; padding: 0.2rem 0.5rem; font-size: 0.85rem; }
[data-neovim-playground] .nvwp-keybar { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem 0.5rem; }
[data-neovim-playground] .nvwp-keybar button { font: inherit; min-width: 44px; min-height: 44px; padding: 0 0.75rem; cursor: pointer; touch-action: manipulation; }
[data-neovim-playground] .nvwp-keybar button[aria-pressed="true"] { font-weight: 700; outline: 3px solid #4a90d9; outline-offset: 1px; }
[data-neovim-playground] .nvwp-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Fit mode (the standalone page): the root fills its box; the grid takes all
   of it but one row of mode line, status, actions, and keys (stacked when
   narrow). The grid is measured at attach and when the window resizes, never
   when the status changes, so that row keeps its height as Leave and Reset
   appear. The invisible textarea
   shares the grid's cell instead of covering the whole screen. */
[data-neovim-playground][data-playground-fit] { margin: 0; flex: 1; min-height: 0; position: relative; display: grid; grid-template: "grid grid grid grid" minmax(0, 1fr) "mode status actions keys" auto / auto minmax(0, 1fr) auto auto; column-gap: 0.5rem; align-items: center; padding: 0 0.25rem; font-size: 0.875rem; }
[data-neovim-playground][data-playground-fit] .nvwp-preview { grid-area: grid; align-self: stretch; margin: 0; overflow: hidden; font: 14px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
[data-neovim-playground][data-playground-fit] .nvwp-status { grid-area: status; margin: 0; }
[data-neovim-playground][data-playground-fit] .nvwp-actions { grid-area: actions; margin: 0; min-height: 44px; align-items: center; }
[data-neovim-playground][data-playground-fit] .nvwp-actions button { min-height: 44px; }
[data-neovim-playground][data-playground-fit] .nvwp-screen:not([hidden]) { display: contents; }
[data-neovim-playground][data-playground-fit] .nvwp-grid { grid-area: grid; align-self: stretch; min-height: 0; padding: 0; overflow: hidden; }
[data-neovim-playground][data-playground-fit] .nvwp-keys { grid-area: grid; position: relative; inset: auto; z-index: 1; align-self: stretch; height: 100%; min-height: 0; }
[data-neovim-playground][data-playground-fit] .nvwp-mode { grid-area: mode; border-top: 0; }
[data-neovim-playground][data-playground-fit] .nvwp-hint { display: none; }
[data-neovim-playground][data-playground-fit] .nvwp-keybar { grid-area: keys; padding: 0; flex-wrap: nowrap; }
@media (max-width: 48rem) {
  [data-neovim-playground][data-playground-fit] { grid-template: "grid" minmax(0, 1fr) "mode" auto "status" auto "actions" auto "keys" auto / minmax(0, 1fr); row-gap: 0.25rem; }
  [data-neovim-playground][data-playground-fit] .nvwp-status { min-height: 3em; }
  [data-neovim-playground][data-playground-fit] .nvwp-keybar { flex-wrap: wrap; }
}