body {
  font-family: Arial, sans-serif;
  background: #fff;
  margin: 0;
  padding: 20px;
}
.calculator {
  max-width: 800px;
  margin: auto;
  background: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  color: #333;
}
.calculator label {
  display: block;
  margin-top: 10px;
}
.calculator input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.calculator button {
  width: 100%;
  padding: 10px;
  background-color: #518429;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.results {
  margin-top: 20px;
}
.results table {
  width: 100%;
  border-collapse: collapse;
}
.results th, .results td {
  border: 1px solid #ccc;
  padding: 10px;
}
.results th {
  background: #518429;
  color: #fff;
}
.toggle-group {
  display: flex;
  margin-bottom: 10px;
}
.toggle-group button {
  flex: 1;
  padding: 10px;
  border: none;
  background: #ddd;
  cursor: pointer;
}
.toggle-group button.active {
  background-color: #518429;
  color: #fff;
}
#feetSection, #metersSection {
  padding: 10px;
  border-radius: 5px;
}
#feetSection {
  background: #e6f7e6;
  border: 1px solid #518429;
}
#metersSection {
  background: #f7e6e6;
  border: 1px solid #ff6666;
}


/* Layout and keyboard accessibility */
*, *::before, *::after { box-sizing: border-box; }
.project-intro, .project-notes { max-width: 980px; margin: 24px auto; padding: 16px; font-family: Arial, sans-serif; line-height: 1.6; }
img { max-width: 100%; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #1662aa; outline-offset: 3px; }
.flex-group > * { min-width: 0; }
.toggle-group button { color: #222; }
@media (max-width: 600px) {
  body { padding: 8px; }
  #wp-concrete-calculator { padding: 8px; }
  .calculator-container { padding: 20px 12px; }
  .flex-group, .radio-group { flex-direction: column; align-items: stretch; }
  .table-results th, .table-results td { padding: 8px 4px; overflow-wrap: anywhere; }
  .results-container { padding: 12px; }
}