/*
  Maps the Radzen theme onto Scripture Journey design tokens.

  Radzen supplies the complex productivity controls (grids, dropdowns, dialogs, steps) that the
  parent and admin surfaces need. Rather than restyling those controls case by case, point
  Radzen's own variables at our tokens here — a single seam, so pages never carry raw Radzen
  styling decisions (spec 22.4, ADR-0005).
*/

:root {
  --rz-text-font-family: var(--sj-font-body);
  --rz-body-background-color: var(--sj-color-canvas);
  --rz-body-color: var(--sj-color-ink);

  --rz-primary: var(--sj-color-primary);
  --rz-primary-dark: var(--sj-color-primary-hover);
  --rz-primary-light: var(--sj-color-primary-soft);
  --rz-secondary: var(--sj-color-secondary);
  --rz-success: var(--sj-color-success);
  --rz-warning: var(--sj-color-warning);
  --rz-danger: var(--sj-color-danger);
  --rz-info: var(--sj-color-primary);

  --rz-base-background-color: var(--sj-color-surface);
  --rz-panel-background-color: var(--sj-color-surface);
  --rz-border-radius: var(--sj-radius-md);
  --rz-input-border-radius: var(--sj-radius-md);
  --rz-button-border-radius: var(--sj-radius-pill);

  --rz-input-height: var(--sj-touch-comfortable);
  --rz-button-vertical-padding: 0;
}

/*
  The Standard theme paints a decorative pastel gradient onto <body>. Illustrations carry the
  visual richness in this product and the chrome stays quiet, so the canvas is a flat token
  colour. A background-color declaration alone would not remove an inherited background-image.
*/
body {
  background-image: none;
}

/* Radzen dropdowns and inputs must still clear the 44px touch floor on phones. */
.rz-dropdown,
.rz-textbox,
.rz-numeric {
  min-height: var(--sj-touch-min);
}

/*
  Radzen's numeric spinners default to roughly 6px tall, well under any usable target. They are a
  supplementary affordance beside a full-size input that accepts typing, so they are held to the
  24px WCAG minimum rather than the 44px touch floor.
*/
.rz-numeric .rz-spinner-up,
.rz-numeric .rz-spinner-down,
.rz-numeric .rz-numeric-button {
  min-width: 1.5rem;
  min-height: 1.5rem;
}

/*
  Header language switcher. The closed control shows a two-letter code, so it needs only enough
  width for that plus the caret; the open list is free to be as wide as the language names.
*/
.sj-language-selector {
  width: auto;
  min-width: 4.5rem;
  max-width: 6rem;
}

@media (max-width: 30rem) {
  .sj-language-selector {
    min-width: 3.5rem;
    max-width: 4.5rem;
  }
}

.sj-language-selector__code {
  font-weight: var(--sj-weight-medium);
  letter-spacing: 0.02em;
}

/* Radzen sets its own focus ring; keep ours so focus is uniform across the app. */
.rz-state-focused:focus-visible,
.rz-button:focus-visible {
  outline: 3px solid var(--sj-color-focus);
  outline-offset: 2px;
}

/*
  Badges say what they are given, in the case they were given it.

  Radzen's theme uppercases badge text. That is fine for a word somebody wrote and wrong for
  everything this product puts in one: a pipeline stage is a lowercase identifier with underscores
  (`story_review`, `awaiting_human`), and shouting it turns a name the database uses into something
  that looks like a constant being yelled at the reader. It is worse for a duration — "14h" became
  "14H", which reads as a unit nobody uses.

  Set here rather than in the studio's own stylesheet because it is a fact about how this product
  uses badges, and both applications use them.
*/
.rz-badge {
  text-transform: none;
}