/* CSS variables for easy theming */
:root{
  --bg: #f4f7f9;
  --card: #fff;
  --accent: #2a72b6;
  --accent-dark: #1a4a75;
  --muted: #666;
  --focus: 3px rgba(42,114,182,0.18);
  --radius: 8px;
  --max-width: 900px;
  --gap: 16px;
  --ui-font: "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}

body{
  font-family:var(--ui-font);
  margin:16px;
  background:var(--bg);
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}

/* Centered card */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  background:var(--card);
  padding:20px;
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(15,30,45,0.06);
}

/* Headings */
h1,h2{color:var(--accent-dark); text-align:center; margin:0 0 12px 0}

/* Form layout: responsive grid */
form#calc-form{
  display:block;
}

/* Compact, consistent spacing between sections */
.section{ margin:16px 0 0; }
.section:first-child{ margin-top:0; }

/* Inline layout for area input + unit select */
.inline-fields{ display:flex; gap:8px; align-items:center; }
.inline-fields input[type="number"]{ flex:1; }
.inline-fields select{ width:90px; }

/* Input layout inside sections */
.section .grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.input-group{margin-bottom:8px}
label{display:block; margin-bottom:6px; font-weight:600; font-size:0.95rem}
input[type="number"], input[type="text"], select{
  width:100%;
  padding:10px 12px;
  border:1px solid #d6dbe3;
  border-radius:6px;
  background:white;
  font-size:0.98rem;
  transition:box-shadow .12s ease, border-color .12s ease;
}
input:focus, select:focus{
  outline:none;
  box-shadow:var(--focus);
  border-color:var(--accent);
}

/* Validation states */
input.invalid, select.invalid{ border-color:#b00020; box-shadow:0 0 0 2px rgba(176,0,32,0.08); }
.result .warn{ color:#b00020; font-weight:600; }

/* Notes and disclaimers */
.note{font-size:0.9rem; color:var(--muted); margin-top:6px}

/* Checkbox group layout */
.checkbox-group{display:flex; align-items:center; gap:10px}
.checkbox-group input{transform:scale(1.05)}

/* Buttons */
.primary-btn{
  display:block;
  width:100%;
  padding:14px;
  margin-top:4px;
  background:var(--accent);
  color:white;
  border:none;
  border-radius:8px;
  font-size:1.05rem;
  cursor:pointer;
  transition:background .12s ease, transform .08s ease;
}
.primary-btn:hover{background:var(--accent-dark)}
.primary-btn:active{transform:translateY(1px)}
.primary-btn:focus{box-shadow:var(--focus); outline:none}

/* Actions row (Calculate + Reset) */
.actions{ display:flex; gap:12px; margin-top:12px; align-items:center; }
.primary-btn{ flex:1; }
.secondary-btn{
  width:140px; padding:12px; background:#f3f4f6; color:#222;
  border:1px solid #d6dbe3; border-radius:8px; cursor:pointer; font-size:1rem;
}
.secondary-btn:hover{ background:#e9ecef; }
.secondary-btn:focus{ outline:none; box-shadow:var(--focus); }

/* Results card */
.result{
  margin-top:18px;
  padding:14px;
  background:#eaf6ff;
  border-radius:8px;
  border:1px solid #cfeeff;
  text-align:left;
}
.result p{margin:8px 0; font-size:1rem}

/* Responsive adjustments */
@media (min-width:760px){
  /* keep single column */
  form#calc-form{ display:block; }
}
@media (max-width:759px){
  .section .grid{grid-template-columns:1fr}
}

/* Small accessibility helpers */
input[disabled], select[disabled]{opacity:0.6}