/*
  My work demo (my-work.js and my-work-compact.js). Website controls that sit
  outside the product frame; almost everything inside the frame reuses the
  screens.css app- classes untouched.
*/

.demo-controls__time .range {
  max-width: 26rem;
}

.my-work-tabs {
  display: flex;
  gap: var(--s2);
}

[data-arithmetic] {
  outline-offset: 2px;
}

[data-arithmetic]:focus-visible {
  outline: 2px solid var(--ink);
  border-radius: 4px;
}

/* Compact frame for the homepage slot: a narrower column, smaller type. */
.my-work-compact {
  display: grid;
  gap: var(--s3);
}

.my-work-compact .demo-controls {
  padding: var(--s3);
}

.my-work-compact__list {
  display: grid;
  gap: var(--s2);
}

.my-work-compact__row {
  display: grid;
  gap: 0.35rem;
  padding: var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--ground);
}

.my-work-compact__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  font-size: var(--t-small);
  color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
  .my-work-compact__row {
    transition: none;
  }
}