/*
 * English page — loaded after ../assets/css/styles.css. Overrides only what differs for
 * left-to-right English text and styles the parts the Arabic page does not have. The header
 * layout and the language link are shared and live in styles.css.
 */

:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  line-height: 1.65;
}

/* Left-to-right versions of the three rules that the shared stylesheet fixes to the right. */

.skip-link {
  right: auto;
  left: var(--gutter);
}

.field select {
  background-position: right 17px center, right 12px center;
}

.steps li::before {
  right: auto;
  left: 0;
}

/* US date order: month, day, year. The month is the widest field. */

.date-fields {
  grid-template-columns: minmax(0, 1fr) 5.25rem;
}

@media (min-width: 480px) {
  .date-fields {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 1fr);
  }
}

.age-form .target-fieldset {
  margin-block-start: 28px;
}

.button-link {
  margin-block-start: 10px;
  padding: 4px 0;
  background: none;
  border: 0;
  color: var(--color-accent);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Result: totals and next birthday as label/value rows. */

.result-totals {
  margin: 0 0 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

.result-totals > div {
  display: grid;
  gap: 2px 16px;
  padding: 10px 14px;
}

.result-totals > div + div {
  border-block-start: 1px solid var(--color-border);
}

@media (min-width: 480px) {
  .result-totals > div {
    grid-template-columns: 8.5rem minmax(0, 1fr);
  }
}

.result-totals dt {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.result-totals dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
  .button-link:hover {
    color: var(--color-accent-hover);
  }
}