/* spark.css · P39, Spark: the layout of the playground, the page against
   test262 and the page inside the engine on the design system's tokens. The
   buttons, segmented controls, cards, stats, banners and tables are the
   design system's; this file places them and draws what an engine's pages
   add: the code editor with its highlighting and marks, the console, the
   call stack and scopes, the squares of the live test run, the syntax tree,
   the instructions and the environment records. Every class starts with sk-. */

.sk { flex: 1; min-height: 0; overflow: auto; background: var(--paper); }
.sk-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 1320px; margin: 0 auto; padding: 28px 32px 80px; box-sizing: border-box; }
.sk-head { display: flex; flex-direction: column; gap: 6px; max-width: 820px; }
.sk-head > h1 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
.sk-head > p { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.sk-h { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
.sk-h3 { margin: 0 0 6px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-550); color: var(--ink); }
.sk-note { margin: 0; color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); text-wrap: pretty; }
.sk-dim { color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.sk-red { color: var(--danger-ink); font-weight: var(--fw-550); }
.sk-green { color: var(--success-ink); }
.sk-spacer { flex: 1; }
.sk-nowrap { white-space: nowrap; }
.sk-bar, .sk-acts { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.sk-bar [data-r="segmented"] { flex-wrap: wrap; max-width: 100%; }
.sk-wrap [data-r="card"] { min-width: 0; }
.sk-wrap [data-r="card"] > [data-part="body"] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sk-wrap [data-part="table"] { overflow-x: auto; }
.sk-path, .sk-wrap code { font-family: inherit; font-size: var(--fs-12); font-variant-numeric: tabular-nums slashed-zero; overflow-wrap: anywhere; }

/* the playground: the editor beside the console, the result and the stepper */
.sk-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sk-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sk-pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk-pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sk-status { margin: 0; color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); }

/* the editor: a transparent textarea over the highlighted copy, both in the same monospace metrics */
.sk-ed { --ed-font: ui-monospace, "SF Mono", Menlo, Consolas, monospace; position: relative; height: 520px; border-radius: var(--r-contain); background: var(--well); box-shadow: inset 0 0 0 var(--px) var(--line-2); overflow: hidden; }
.sk-ed > pre, .sk-ed > textarea { position: absolute; inset: 0; box-sizing: border-box; margin: 0; padding: 12px 14px; border: 0; font-family: var(--ed-font); font-size: var(--fs-13); line-height: 20px; tab-size: 2; white-space: pre; overflow: auto; letter-spacing: 0; font-variant-ligatures: none; }
.sk-ed > pre { color: var(--ink); pointer-events: none; }
.sk-ed > pre > code { font: inherit; }
.sk-ed > textarea { resize: none; background: transparent; color: transparent; caret-color: var(--ink); outline: none; }
.sk-ed > textarea::selection { background: var(--accent-tint); color: transparent; }
.sk-ed:focus-within { box-shadow: inset 0 0 0 var(--px) var(--line-2), 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
.sk-k { color: var(--accent-ink); font-weight: var(--fw-550); }
.sk-v { color: var(--info-ink); }
.sk-s { color: var(--success-ink); }
.sk-n { color: var(--warning-ink); }
.sk-r { color: var(--danger-ink); }
.sk-p { color: var(--info-ink); }
.sk-c { color: var(--ink-3); font-style: italic; }
.sk-ed mark { color: inherit; border-radius: 2px; }
.sk-mark-node { background: var(--accent-tint); box-shadow: 0 0 0 1px var(--accent-line); }
.sk-mark-error { background: var(--danger-tint); text-decoration: underline wavy var(--danger); text-decoration-skip-ink: none; text-underline-offset: 3px; }

/* the console and the result */
.sk-console { margin: 0; padding: 0; list-style: none; max-height: 260px; overflow: auto; font-size: var(--fs-12); line-height: 18px; font-variant-numeric: tabular-nums slashed-zero; }
.sk-line { padding: 3px 0; border-bottom: var(--px) solid var(--line-1, var(--line-2)); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.sk-line:last-child { border-bottom: 0; }
.sk-line[data-level="error"] { color: var(--danger-ink); }
.sk-line[data-level="warn"] { color: var(--warning-ink); }
.sk-empty { margin: 0; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.sk-empty[hidden] { display: none; }
.sk-result { min-width: 0; }
.sk-value { display: block; padding: 8px 10px; border-radius: var(--r-value); background: var(--well); font-size: var(--fs-12); line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }

/* the stepper: the call stack and the scopes with their bindings */
.sk-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; }
.sk-stack { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sk-frame { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: var(--r-press); background: var(--ground); box-shadow: inset 0 0 0 var(--px) var(--line-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.sk-frame:first-child { box-shadow: inset 0 0 0 var(--px) var(--accent-line); background: var(--accent-tint); }
.sk-frame b { font-weight: var(--fw-550); color: var(--ink); overflow-wrap: anywhere; }
.sk-scopes, .sk-envs { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk-scope h4, .sk-env h4 { margin: 0 0 4px; font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-550); color: var(--ink-3); text-transform: none; }
.sk-scope dl, .sk-env dl { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.sk-binding { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 2px 10px; font-size: var(--fs-12); line-height: var(--lh-12); }
.sk-binding dt { color: var(--ink); font-weight: var(--fw-500); overflow-wrap: anywhere; }
.sk-binding dd { margin: 0; color: var(--ink-2); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-11); overflow-wrap: anywhere; }
.sk-env { padding: 8px 10px; border-radius: var(--r-value); background: var(--ground); box-shadow: inset 0 0 0 var(--px) var(--line-2); }
.sk-env p { margin: 0 0 4px; }

/* against test262 */
.sk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.sk-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.sk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sk-share { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-share-bar { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--well); box-shadow: inset 0 0 0 var(--px) var(--line-2); overflow: hidden; }
.sk-share-bar > span { display: block; height: 100%; background: var(--success-dot); }
.sk-grid-cells { display: flex; flex-wrap: wrap; gap: 2px; }
.sk-grid-cells:empty { display: none; }
.sk-cell { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 2px; background: var(--line-2); cursor: pointer; }
.sk-cell[data-result="pass"] { background: var(--success-dot); }
.sk-cell[data-result="fail"] { background: var(--danger-dot); }
.sk-cell[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 1px; }
.sk-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sk-subset-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sk-subset-split [data-part="table"] { max-height: 420px; overflow: auto; }
.sk-detail { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sk-detail .sk-h3 { overflow-wrap: anywhere; }
.sk-src { margin: 0; max-height: 380px; overflow: auto; padding: 10px 12px; border-radius: var(--r-value); background: var(--well); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-11); line-height: 16px; white-space: pre; color: var(--ink); }
.sk-src:empty { display: none; }

/* inside the engine */
.sk-inside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sk-inside .sk-ed { height: 360px; }
.sk-ast, .sk-ins, .sk-envs, .sk-jobs { max-height: 360px; overflow: auto; }
.sk-ast { padding: 8px 10px; border-radius: var(--r-value); background: var(--ground); box-shadow: inset 0 0 0 var(--px) var(--line-2); font-size: var(--fs-12); line-height: 20px; }
.sk-ast details > div { padding-left: 14px; border-left: var(--px) solid var(--line-2); margin-left: 4px; }
.sk-ast summary, .sk-ast-leaf { display: flex; align-items: baseline; gap: 6px; cursor: pointer; border-radius: var(--r-press); padding: 0 4px; min-width: 0; }
.sk-ast-leaf { padding-left: 18px; }
.sk-ast summary:hover, .sk-ast-leaf:hover { background: var(--paper-hover); }
.sk-ast [aria-selected="true"] > summary, .sk-ast .sk-ast-leaf[aria-selected="true"] { background: var(--accent-tint); }
.sk-ast-key { color: var(--ink-3); font-size: var(--fs-11); }
.sk-ast-type { color: var(--ink); font-weight: var(--fw-550); }
.sk-ast-info { color: var(--accent-ink); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-11); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sk-ins { margin: 0; padding: 6px 0; list-style: none; border-radius: var(--r-value); background: var(--ground); box-shadow: inset 0 0 0 var(--px) var(--line-2); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-11); line-height: 18px; }
.sk-ins li { display: flex; gap: 8px; padding: 0 10px; white-space: nowrap; }
.sk-ins li[aria-current] { background: var(--accent-tint); }
.sk-ins b { font-weight: var(--fw-550); color: var(--ink); }
.sk-pc { min-width: 3ch; text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sk-jobs { margin: 0 0 8px; padding: 0 0 0 22px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.sk-ran { color: var(--ink-2); max-height: 180px; }

@media (max-width: 960px) {
  .sk-grid, .sk-two, .sk-inside, .sk-subset-split { grid-template-columns: minmax(0, 1fr); }
  .sk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sk-wrap { padding: 20px 16px 64px; }
  .sk-ed { height: 380px; }
  .sk-step { grid-template-columns: minmax(0, 1fr); }
  .sk-bar .sk-spacer { display: none; }
}