/* tmux practice terminal */
[data-tmux-playground] { margin: 1.5rem 0; }
[data-tmux-playground] .tmwp-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
[data-tmux-playground] .tmwp-actions button { font: inherit; padding: 0.4rem 0.9rem; cursor: pointer; }
/* Open full screen (the article's shortcode renders it; the standalone page
   does not): a link that sits with the buttons, shown only while ready. */
[data-tmux-playground] .playground-fullscreen:not([hidden]) { display: block; align-self: center; min-width: 0; padding: 0.4rem 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-tmux-playground] .tmwp-progress { display: block; width: 100%; max-width: 44rem; }
[data-tmux-playground] .tmwp-preview { font: 14px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #000; color: #eee; padding: 0.25rem; overflow-x: auto; }
[data-tmux-playground] .tmwp-screen { overflow-x: auto; }
[data-tmux-playground] .tmwp-term { display: inline-block; background: #000; padding: 0.25rem; border-radius: 4px; }
[data-tmux-playground] .tmwp-screen:focus-within .tmwp-term { outline: 2px solid #4a90d9; outline-offset: 2px; }
[data-tmux-playground] .tmwp-hint { margin: 0.25rem 0 0; font-size: 0.85rem; }
[data-tmux-playground] .tmwp-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-tmux-playground] .tmwp-keybar { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.25rem 0 0; }
[data-tmux-playground] .tmwp-keybar button { font: inherit; min-width: 44px; min-height: 44px; padding: 0 0.6rem; cursor: pointer; touch-action: manipulation; }
[data-tmux-playground] .tmwp-keybar button[aria-pressed="true"] { font-weight: 700; outline: 3px solid #4a90d9; outline-offset: 1px; }
/* 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-tmux-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-tmux-playground][data-playground-fit] .tmwp-preview { grid-area: term; align-self: stretch; margin: 0; overflow: hidden; }
[data-tmux-playground][data-playground-fit] .tmwp-progress { grid-area: term; justify-self: center; }
[data-tmux-playground][data-playground-fit] .tmwp-status { grid-area: status; margin: 0; }
[data-tmux-playground][data-playground-fit] .tmwp-actions { grid-area: actions; margin: 0; min-height: 44px; }
[data-tmux-playground][data-playground-fit] .tmwp-actions button { min-height: 44px; }
[data-tmux-playground][data-playground-fit] .tmwp-screen:not([hidden]) { display: contents; }
[data-tmux-playground][data-playground-fit] .tmwp-term { grid-area: term; align-self: stretch; display: block; position: relative; min-height: 0; padding: 0; border-radius: 0; overflow: hidden; }
[data-tmux-playground][data-playground-fit] .tmwp-hint { display: none; }
[data-tmux-playground][data-playground-fit] .tmwp-keybar { grid-area: keys; margin: 0; flex-wrap: nowrap; }
[data-tmux-playground] .tmwp-probe { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 48rem) {
  [data-tmux-playground][data-playground-fit] { grid-template: "term" minmax(0, 1fr) "status" auto "actions" auto "keys" auto / minmax(0, 1fr); row-gap: 0.25rem; }
  [data-tmux-playground][data-playground-fit] .tmwp-status { min-height: 3em; }
  [data-tmux-playground][data-playground-fit] .tmwp-keybar { flex-wrap: wrap; }
}