/* ============================================================
   SEO Task 17D -- page-specific styles for the Keto Macros Calculator
   (/keto-macros-calculator/, 2026-08-04).

   Loaded only by keto-macros-calculator/index.html, in addition to the
   shared article-visuals.css. Scope: the calculator form (fieldsets,
   radio groups, unit-conditional fields, error summary, results panel)
   and the "See the formulas and assumptions" <details> block. No CSS
   framework, no animation.
   ============================================================ */

.calc-box{
  background:#E7E6D5;
  border:1px solid rgba(34,29,23,0.18);
  border-radius:12px;
  padding:30px 20px 20px;
  margin:22px 0 16px;
}
.calc-box legend{
  font-weight:700;
  font-size:15.5px;
  line-height:1.3;
  padding:2px 10px;
  margin:0 0 0 8px;
  background:#E7E6D5;
  border-radius:6px;
}
.calc-box > .calc-fieldset:first-of-type{
  margin-top:8px;
}
.calc-fieldset{
  border:none;
  padding:0;
  margin:0 0 18px;
}
.calc-fieldset legend{
  font-weight:700;
  font-size:14.5px;
  padding:0 0 8px;
}
.calc-field{
  margin-bottom:14px;
}
.calc-field label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  margin-bottom:4px;
}
.calc-field .field-help{
  font-size:12.5px;
  font-weight:400;
  color:rgba(34,29,23,0.62);
  margin-top:2px;
}
.calc-field input, .calc-field select{
  width:100%;
  max-width:100%;
  font:inherit;
  font-size:15px;
  padding:9px 10px;
  border:1px solid rgba(34,29,23,0.18);
  border-radius:8px;
  background:#fff;
  color:#221D17;
  box-sizing:border-box;
  min-height:44px;
}
.calc-field input:focus-visible, .calc-field select:focus-visible{
  outline:2px solid #4F6B45;
  outline-offset:1px;
}
.calc-field[aria-invalid="true"] input,
.calc-field input[aria-invalid="true"],
.calc-field select[aria-invalid="true"]{
  border-color:#8A3B2B;
}

.radio-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:6px;
}
.radio-row label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14.5px;
  font-weight:600;
  min-height:44px;
}
.radio-row input[type="radio"]{
  width:18px;
  height:18px;
}

.two-col{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.two-col > div{
  flex:1 1 100px;
}

.calc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
}
.calc-actions button{
  font:inherit;
  font-size:14.5px;
  font-weight:700;
  padding:10px 18px;
  border-radius:50px;
  border:none;
  cursor:pointer;
  min-height:44px;
}
.calc-actions button[type="submit"]{
  background:#4F6B45;
  color:#fff;
}
.calc-actions button[type="submit"]:hover{filter:brightness(1.08);}
.calc-actions button[type="reset"]{
  background:transparent;
  color:#221D17;
  border:1px solid rgba(34,29,23,0.18);
}

.privacy-note{
  font-size:13px;
  color:rgba(34,29,23,0.62);
  margin:10px 0 4px;
}

#calcErrorSummary{
  background:#fdecea;
  color:#8a1f11;
  border-radius:8px;
  padding:12px 14px;
  margin-top:14px;
  font-size:13.5px;
}
#calcErrorSummary ul{margin:6px 0 0;padding-left:18px;}
#calcErrorSummary p{margin:0;font-weight:700;}

#calcResult{
  background:#fff;
  border-radius:8px;
  padding:14px 16px;
  margin-top:14px;
  border:1px solid rgba(34,29,23,0.18);
}
#calcResult h2{margin-top:0;font-size:18px;}
#calcResult h3{font-size:14.5px;margin:14px 0 6px;}
#calcResult p{margin:0 0 8px;font-size:14.5px;}
#calcResult ul{margin:0 0 8px;padding-left:20px;font-size:13.5px;}
#calcResult ul li{margin-bottom:4px;}

.formula-details{
  background:#fff;
  border:1px solid rgba(34,29,23,0.18);
  border-radius:12px;
  padding:14px 18px;
  margin:18px 0;
}
.formula-details summary{
  cursor:pointer;
  font-weight:700;
  font-size:15px;
  padding:6px 0;
}
.formula-details summary:focus-visible{
  outline:2px solid #4F6B45;
  outline-offset:2px;
}
.formula-details ul{padding-left:20px;}
.formula-details li{margin-bottom:8px;font-size:14px;}
.formula-details code{
  background:#F6F1E1;
  border-radius:4px;
  padding:1px 5px;
  font-size:13px;
}

@media(max-width:480px){
  .calc-box{padding:16px;}
}