/*
  The figure first, the controls under it.

  A reader dragging a slider must not have to look away from what they are changing to see what it
  costs, so the readout is above and large enough to read from where the hand is.
*/

atomics-premium-calculator {
  display: block;
  width: 100%;
}

atomics-premium-calculator [calculator] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

atomics-premium-calculator [readout] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

atomics-premium-calculator [amount] {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  /* Tabular figures, so the price does not jitter sideways as the digits change under a drag. */
  font-variant-numeric: tabular-nums;
}

atomics-premium-calculator [cadence],
atomics-premium-calculator [allowance] {
  margin: 0;
  color: var(--color-text-muted, #6b7280);
  font-size: 0.9375rem;
}

atomics-premium-calculator [controls] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

atomics-premium-calculator [control] {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'name value' 'input input';
  gap: 0.375rem 1rem;
  align-items: center;
}

atomics-premium-calculator [name] {
  grid-area: name;
  font-weight: 600;
}

atomics-premium-calculator output {
  grid-area: value;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #6b7280);
}

atomics-premium-calculator input[type='range'] {
  grid-area: input;
  width: 100%;
}

atomics-premium-calculator [billing] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

atomics-premium-calculator [cycle] {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-small, 0.5rem);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

atomics-premium-calculator [cycle][aria-pressed='true'] {
  border-color: var(--color-accent, #111827);
  background: var(--color-accent, #111827);
  color: var(--color-accent-contrast, #ffffff);
  font-weight: 600;
}

atomics-premium-calculator [action] {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-small, 0.5rem);
  background: var(--color-accent, #111827);
  color: var(--color-accent-contrast, #ffffff);
  text-decoration: none;
  font-weight: 600;
}

atomics-premium-calculator [action][hidden] {
  display: none;
}

atomics-premium-calculator [beyond] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--color-border, #e5e7eb);
  border-radius: var(--radius-medium, 0.75rem);
}

atomics-premium-calculator [footnote] {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #6b7280);
}