[data-part="sheet"] {
  font-family: Almarai, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-window);
  width: 100%;
}
[data-part="sheet"] > * {
  font-family: inherit;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
}
/* the buttons stacked at full width, each a tap target of at least 44 px (FR-085, FR-092) */
[data-part="sheet"] > [data-part="button"] {
  min-height: 48px;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  background-color: var(--color-brand);
  color: var(--color-on-brand);
  font-size: var(--font-size-sm);
  font-weight: 800;
  cursor: pointer;
}
/* one primary action (FR-091): the first button is filled, the ones after it are outlined */
[data-part="sheet"] > [data-part="button"] ~ [data-part="button"] {
  background-color: transparent;
  color: inherit; /* the sheet's own text colour, which reads on its background in both schemes */
}
[data-part="sheet"] > [data-part="button"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
[data-part="sheet"] > [data-part="button"][data-tone="danger"] {
  border-color: var(--app-danger);
  background-color: transparent;
  color: var(--app-danger);
}
[data-part="sheet"] > [data-part="field"] {
  min-height: 44px;
}
/* tokens/ carries one scheme today: dark reads the same two tokens swapped, until the tokens gain a dark set. It comes
   after the base rule: the same specificity, so the later one wins. */
@media (prefers-color-scheme: dark) {
  [data-part="sheet"] {
    background: var(--color-text);
    color: var(--color-bg);
  }
}