/* ========== ACTION BUTTONS IN ONE ROW ========== */
#angleCalculator .calc-actions.items {
  display: flex !important;
  gap: 0.75rem !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap; /* wrap on small screens only */
}
#angleCalculator .calc-actions .item { flex: 0 0 auto !important; }
#angleCalculator .calc-actions .button,
#angleCalculator .calc-actions .button-secondary{
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
}

/* ========== RESULTS CONTAINER & CHIPS ========== */
#angleCalculator .calc-results{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}

#angleCalculator .calc-chip{
  border-radius: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid transparent !important;
  background: #f8fafc !important;
  color: #0f172a !important;
}

#angleCalculator .calc-chip.calc-ok{
  background: #ECFDF5 !important;
  border-color: #86EFAC !important;
  color: #065F46 !important;
}

#angleCalculator .calc-chip.calc-warn{
  background: #FFFBEB !important;
  border-color: #FDE68A !important;
  color: #92400E !important;
}

#angleCalculator .calc-chip.calc-bad{
  background: #FEF2F2 !important;
  border-color: #FCA5A5 !important;
  color: #991B1B !important;
}

/* ========== RESULT STATUS COLORS (HARD OVERRIDES) ========== */
/* Many themes lock input backgrounds. We color via:
   1) a background-image layer (rarely overridden)
   2) an explicit outline ring
   3) keep it on focus too (theme “cream” focus won’t win) */

#angleCalculator input[type="text"].calc-ok{
  background-image: linear-gradient(0deg, #DCFCE7, #DCFCE7) !important;
  background-color: #DCFCE7 !important;
  outline: 3px solid rgba(134,239,172,0.9) !important;
  outline-offset: 2px !important;
  border-color: #86EFAC !important;
  color: #14532D !important;
  -webkit-text-fill-color: #14532D !important;
}
#angleCalculator input[type="text"].calc-warn{
  background-image: linear-gradient(0deg, #FEF3C7, #FEF3C7) !important;
  background-color: #FEF3C7 !important;
  outline: 3px solid rgba(252,211,77,0.9) !important;
  outline-offset: 2px !important;
  border-color: #FCD34D !important;
  color: #92400E !important;
  -webkit-text-fill-color: #92400E !important;
}
#angleCalculator input[type="text"].calc-bad{
  background-image: linear-gradient(0deg, #FEE2E2, #FEE2E2) !important;
  background-color: #FEE2E2 !important;
  outline: 3px solid rgba(252,165,165,0.95) !important;
  outline-offset: 2px !important;
  border-color: #FCA5A5 !important;
  color: #991B1B !important;
  -webkit-text-fill-color: #991B1B !important;
}

/* Keep status colors when focused (theme ‘cream’ focus won’t override) */
#angleCalculator input[type="text"].calc-ok:focus,
#angleCalculator input[type="text"].calc-ok:focus-visible{
  background-image: linear-gradient(0deg, #DCFCE7, #DCFCE7) !important;
}
#angleCalculator input[type="text"].calc-warn:focus,
#angleCalculator input[type="text"].calc-warn:focus-visible{
  background-image: linear-gradient(0deg, #FEF3C7, #FEF3C7) !important;
}
#angleCalculator input[type="text"].calc-bad:focus,
#angleCalculator input[type="text"].calc-bad:focus-visible{
  background-image: linear-gradient(0deg, #FEE2E2, #FEE2E2) !important;
}

/* Readonly results shouldn’t look faded */
#angleCalculator input[readonly]{
  opacity: 1 !important;
}