/* =========================================================
   Extension calculator
   Keeps to the existing site styling, adds tables + report UX.
   ========================================================= */

.calc-hero{ padding-bottom: 24px; }

.calc-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.calc-alert{
  margin-top: 14px;
}


.calc-hero__subtext{
  max-width: 980px;
  margin: 10px 0 0;
  color: rgba(30,30,30,.86);
}

.calc-layout{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items: start;
}

.calc-col--sticky{
  position: sticky;
  top: calc(var(--header-h) + 16px);
}

.calc-panel{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
}

.calc-panel + .calc-panel{ margin-top: 12px; }

.calc-panel summary{
  list-style: none;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: rgba(245,246,244,.70);
}

.calc-panel summary::-webkit-details-marker{ display: none; }

.calc-panel__body{ padding: 14px 16px 16px; }

.calc-summary{ font-weight: 500; color: rgba(95,95,95,.92); font-size: 13px; }

.calc-table-wrap{
  width: 100%;
  overflow: auto;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
}

.calc-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.calc-table th,
.calc-table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  vertical-align: middle;
}

.calc-table thead th{
  text-align: left;
  font-size: 13px;
  color: rgba(30,30,30,.92);
  background: rgba(31,79,59,.06);
  border-bottom: 1px solid rgba(0,0,0,.12);
  position: sticky;
  top: 0;
}

.calc-table tfoot th,
.calc-table tfoot td{
  font-weight: 800;
  background: rgba(0,0,0,.02);
  border-top: 1px solid rgba(0,0,0,.12);
}

.calc-divider td{
  font-weight: 800;
  background: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.calc-input{
  width: 100%;
  height: 40px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.14);
  padding: 10px;
  font: inherit;
}

.calc-input:focus{
  outline: none;
  border-color: rgba(136,191,117,.85);
  box-shadow: 0 0 0 4px rgba(136,191,117,.18);
}

.calc-input.is-error{
  border-color: rgba(255,0,0,.40);
  box-shadow: 0 0 0 4px rgba(255,0,0,.10);
}

.calc-out{ font-variant-numeric: tabular-nums; text-align: right; }

.calc-el-title{ font-weight: 700; }
.calc-el-meta{ font-size: 12px; color: rgba(95,95,95,.92); margin-top: 2px; }

.calc-results{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
  padding: 16px;
}

.calc-results__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calc-results__line{
  height: 1px;
  background: rgba(0,0,0,.10);
  margin: 14px 0;
}

.calc-kpis{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.kpi{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(245,246,244,.60);
}

.kpi__label{ font-size: 12px; color: rgba(95,95,95,.92); }
.kpi__value{ font-size: 20px; font-weight: 800; letter-spacing: -.2px; }
.kpi__unit{ font-size: 12px; color: rgba(95,95,95,.92); font-weight: 700; }

.badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
}

.badge--pass{
  background: rgba(136,191,117,.22);
  border-color: rgba(136,191,117,.45);
  color: #0f3b2b;
}

.badge--fail{
  background: rgba(255,0,0,.10);
  border-color: rgba(255,0,0,.25);
  color: #7a1010;
}

.badge--muted{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.14);
  color: rgba(30,30,30,.85);
}

.calc-mini{
  display: grid;
  gap: 10px;
}

.calc-mini__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.calc-backstops{
  display: grid;
  gap: 10px;
}


.calc-guidance{
  border: 1px solid rgba(31,79,59,.2);
  background: rgba(31,79,59,.06);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 13px;
  color: rgba(30,30,30,.9);
}

.backstop-item{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
}

.backstop-item__meta{
  font-size: 12px;
  color: rgba(95,95,95,.92);
}

@media (max-width: 980px){
  .calc-layout{ grid-template-columns: 1fr; }
  .calc-col--sticky{ position: static; }
  .calc-kpis{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .calc-hero{ padding-bottom: 16px; }

  .calc-actions{ gap: 8px; }
  .calc-actions .btn{
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
  }

  .calc-panel summary{
    padding: 12px;
    flex-wrap: wrap;
  }

  .calc-panel__body{
    padding: 12px;
  }

  .calc-summary{
    width: 100%;
    font-size: 12px;
  }

  .calc-table th,
  .calc-table td{
    padding: 9px 8px;
    font-size: 13px;
  }

  .calc-table .calc-el-meta{ font-size: 11px; }
  .calc-input{ height: 38px; padding: 8px; }

  .calc-results{ padding: 12px; }
  .kpi__value{ font-size: 18px; }
  .backstop-item{ padding: 9px 10px; }
}