/* Site-owned styles for Percentage Calculator, loaded after /ui/counter-ui.css (see shell.ts §
   stylesheets) — this file only adds rules, it never needs to fight counter-ui.css's cascade. */

.mode-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

.mode-toggle label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.pct-readout {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

.pct-result {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}