/* AWS CLI practice shell (simulated); fd's, with aws names */
[data-aws-playground] { margin: 1.5rem 0; }
[data-aws-playground] .awwp-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
[data-aws-playground] .awwp-actions button { font: inherit; padding: 0.4rem 0.9rem; cursor: pointer; }
[data-aws-playground] .awwp-progress { display: block; width: 100%; max-width: 44rem; }
[data-aws-playground] .awwp-preview { font: 14px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #000; color: #eee; padding: 0.25rem; overflow-x: auto; }
[data-aws-playground] .awwp-screen { overflow-x: auto; }
[data-aws-playground] .awwp-term { display: inline-block; background: #000; padding: 0.25rem; border-radius: 4px; }
[data-aws-playground] .awwp-screen:focus-within .awwp-term { outline: 2px solid #4a90d9; outline-offset: 2px; }
[data-aws-playground] .awwp-hint { margin: 0.25rem 0 0; font-size: 0.85rem; }
[data-aws-playground] .awwp-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-aws-playground] .awwp-keybar { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.25rem 0 0; }
[data-aws-playground] .awwp-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 18 keys wrap rather than push the page sideways).
   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-aws-playground][data-playground-fit] { margin: 0; flex: 1; min-height: 0; display: grid; grid-template: "label label label" auto "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-aws-playground][data-playground-fit] .awwp-preview { grid-area: term; align-self: stretch; margin: 0; overflow: hidden; }
[data-aws-playground][data-playground-fit] .awwp-progress { grid-area: term; justify-self: center; }
[data-aws-playground][data-playground-fit] .awwp-status { grid-area: status; margin: 0; }
[data-aws-playground][data-playground-fit] .awwp-actions { grid-area: actions; margin: 0; min-height: 44px; }
[data-aws-playground][data-playground-fit] .awwp-actions button { min-height: 44px; }
[data-aws-playground][data-playground-fit] .awwp-screen:not([hidden]) { display: contents; }
[data-aws-playground][data-playground-fit] .awwp-hint { display: none; }
[data-aws-playground][data-playground-fit] .awwp-term { grid-area: term; align-self: stretch; display: block; position: relative; min-height: 0; padding: 0; border-radius: 0; overflow: hidden; }
[data-aws-playground][data-playground-fit] .awwp-keybar { grid-area: keys; margin: 0; justify-content: flex-end; }
/* The "Simulated AWS" label, inside the root on the standalone page and in
   full screen (the host adds it at mount): one compact row above the terminal. */
[data-aws-playground][data-playground-fit] .awwp-label { grid-area: label; display: flex; flex-wrap: wrap; column-gap: 0.5rem; align-items: baseline; padding: 0.25rem 0; }
[data-aws-playground][data-playground-fit] .awwp-label p { margin: 0; }
[data-aws-playground] .awwp-probe { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 48rem) {
  [data-aws-playground][data-playground-fit] { grid-template: "label" auto "term" minmax(0, 1fr) "status" auto "actions" auto "keys" auto / minmax(0, 1fr); row-gap: 0.25rem; }
  [data-aws-playground][data-playground-fit] .awwp-status { min-height: 3em; }
  [data-aws-playground][data-playground-fit] .awwp-keybar { justify-content: flex-start; }
}