.measurement-controls {
  margin: 1.5rem auto;
  padding: 1rem;
  width: calc(100% - 32px);
  max-width: 72rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--ui-radius);
  font: inherit;
}
.measurement-controls p {
  margin: 0 0 0.75rem;
}
.measurement-controls div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--theme-gap);
}
.measurement-controls button {
  min-height: var(--theme-control);
  padding: 8px 16px;
  border: 1px solid currentColor;
  border-radius: var(--ui-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.measurement-controls button[aria-pressed="true"] {
  background: var(--workspace-action);
  color: var(--workspace-on-action);
}
.measurement-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
.measurement-controls :focus-visible {
  outline: 2px solid var(--theme-focus);
  outline-offset: 4px;
}
body:has(.workspace) > .measurement-controls {
  margin-block-end: calc(
    var(--theme-touch) +
    2 *
    var(--theme-edge) +
    env(safe-area-inset-bottom)
  );
}

@media (min-width: 851px) {
  body:has(.workspace) > .measurement-controls {
    width: calc(100% - var(--workspace-rail) - var(--space-6) * 2);
    max-width: none;
    margin-left: calc(var(--workspace-rail) + var(--space-6));
    margin-right: var(--space-6);
  }
}