/* fd practice shell */
[data-fd-playground] { margin: 1.5rem 0; }
[data-fd-playground] .fdwp-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
[data-fd-playground] .fdwp-actions button { font: inherit; padding: 0.4rem 0.9rem; cursor: pointer; }
[data-fd-playground] .fdwp-progress { display: block; width: 100%; max-width: 44rem; }
[data-fd-playground] .fdwp-preview { font: 14px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #000; color: #eee; padding: 0.25rem; overflow-x: auto; }
[data-fd-playground] .fdwp-screen { overflow-x: auto; }
[data-fd-playground] .fdwp-term { display: inline-block; background: #000; padding: 0.25rem; border-radius: 4px; }
[data-fd-playground] .fdwp-screen:focus-within .fdwp-term { outline: 2px solid #4a90d9; outline-offset: 2px; }
[data-fd-playground] .fdwp-hint { margin: 0.25rem 0 0; font-size: 0.85rem; }
[data-fd-playground] .fdwp-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-fd-playground] .fdwp-keybar { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.25rem 0 0; }
[data-fd-playground] .fdwp-keybar button { font: inherit; min-width: 44px; min-height: 44px; padding: 0 0.6rem; cursor: pointer; touch-action: manipulation; }
/* Fit mode (the standalone page): the root fills its box; the terminal takes
   all of it but one row of status, actions, and keys (stacked when narrow).
   The grid is measured before Ready and when the window resizes, never when
   the status changes, so that row keeps its height as Leave and Reset
   appear. */
[data-fd-playground][data-playground-fit] { margin: 0; flex: 1; min-height: 0; display: grid; grid-template: "term term term" minmax(0, 1fr) "status actions keys" auto / minmax(0, 1fr) auto auto; column-gap: 0.5rem; align-items: center; padding: 0 0.25rem; font-size: 0.875rem; }
[data-fd-playground][data-playground-fit] .fdwp-preview { grid-area: term; align-self: stretch; margin: 0; overflow: hidden; }
[data-fd-playground][data-playground-fit] .fdwp-progress { grid-area: term; justify-self: center; }
[data-fd-playground][data-playground-fit] .fdwp-status { grid-area: status; margin: 0; }
[data-fd-playground][data-playground-fit] .fdwp-actions { grid-area: actions; margin: 0; min-height: 44px; }
[data-fd-playground][data-playground-fit] .fdwp-actions button { min-height: 44px; }
[data-fd-playground][data-playground-fit] .fdwp-screen:not([hidden]) { display: contents; }
[data-fd-playground][data-playground-fit] .fdwp-hint { display: none; }
[data-fd-playground][data-playground-fit] .fdwp-term { grid-area: term; align-self: stretch; display: block; position: relative; min-height: 0; padding: 0; border-radius: 0; overflow: hidden; }
[data-fd-playground][data-playground-fit] .fdwp-keybar { grid-area: keys; margin: 0; flex-wrap: nowrap; }
[data-fd-playground] .fdwp-probe { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 48rem) {
  [data-fd-playground][data-playground-fit] { grid-template: "term" minmax(0, 1fr) "status" auto "actions" auto "keys" auto / minmax(0, 1fr); row-gap: 0.25rem; }
  [data-fd-playground][data-playground-fit] .fdwp-status { min-height: 3em; }
  [data-fd-playground][data-playground-fit] .fdwp-keybar { flex-wrap: wrap; }
}