/* Sample execution log (ECOSYSTEM_REDESIGN.md §9.2 c), templates/marketing/showcase/exec_log.html.
   Below the fold on home, so it loads without blocking first paint (§9.4 budget). */

@layer page {

/* ---------- sample execution log ---------- */

.xl {
  --xl-row: var(--space-12);
  --xl-head: var(--space-9);
  container: xl / inline-size;
  color: var(--ink-2); font-family: var(--font-body);
}
.xl__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.xl__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semi); line-height: var(--leading-heading); letter-spacing: -0.01em; color: var(--ink); }
.xl__pause {
  -webkit-appearance: none; appearance: none; cursor: pointer; margin: 0 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-lg); padding: 0 var(--space-4);
  font: var(--weight-medium) var(--text-base) / 1 var(--font-body); color: var(--ink);
  background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  transition: background-color var(--dur-instant) var(--ease-out);
}
.xl__pause::before { content: ""; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.xl__pause[aria-pressed="true"]::before { width: 0; height: 0; border-inline: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
.xl__pause:hover { background: var(--surface-hover); }
.xl__pause:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.xl__view { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.xl__table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-sm); }
.xl__table thead { position: relative; z-index: 1; }
.xl__table th {
  height: var(--xl-head); padding: 0 var(--space-3); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: var(--weight-medium) var(--text-xs) / 1 var(--font-body); color: var(--ink-3);
  background: var(--raised); border-bottom: 1px solid var(--border);
}
.xl__table td {
  height: var(--xl-row); padding: 0 var(--space-3); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink-2); background: none; border-bottom: 1px solid var(--border);
}
.xl__table tbody tr:hover td { background: none; }
.xl__table tr[data-extra] { display: none; }
.xl.is-live .xl__table tr[data-extra] { display: table-row; }
.xl__table th:nth-child(1) { width: 6.5rem; }
.xl__table th:nth-child(2) { width: 18%; }
.xl__table th:nth-child(3) { width: 7.5rem; }
.xl__table th:nth-child(4) { width: 4.5rem; }
.xl__table th:nth-child(5) { width: 3.5rem; }
.xl__table th:nth-child(8) { width: 5.5rem; }
.xl__mono { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.xl__sym { color: var(--ink); font-weight: var(--weight-medium); }
.xl__num { text-align: right; }
.xl__table th.xl__num { text-align: right; }
.xl__side { font: var(--weight-semi) var(--text-2xs) / 1 var(--font-mono); padding: 3px 6px; border-radius: var(--radius-xs); }
.xl__side--buy { color: var(--buy); background: var(--buy-soft); }
.xl__side--sell { color: var(--sell); background: var(--sell-soft); }
.xl__st {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--space-2); border-radius: var(--radius-pill);
  font: var(--weight-semi) var(--text-2xs) / 1.2 var(--font-body); color: var(--neutral); background: var(--neutral-soft);
}
.xl__st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.xl__st[data-tone="success"] { color: var(--ok); background: var(--ok-soft); }
.xl__st[data-tone="warning"] { color: var(--warn); background: var(--warn-soft); }
.xl__st[data-tone="danger"] { color: var(--danger); background: var(--danger-soft); }
.xl__st[data-tone="info"] { color: var(--info); background: var(--info-soft); }
.xl__st[data-tone="pending"] { color: var(--ink-2); background: var(--neutral-soft); }
.xl__why { margin-left: 6px; font-size: var(--text-xs); color: var(--ink-3); }
.xl__fine { margin: var(--space-2) 0 0; max-width: 75ch; font-size: var(--text-xs); line-height: var(--leading-relaxed); color: var(--ink-3); }

@container xl (max-width: 560px) {
  .xl__table .xl__opt { display: none; }
  .xl__table th:nth-child(1) { width: 6rem; }
  .xl__table th:nth-child(3) { width: 6.5rem; }
}

} /* @layer page */