body {
  font-family: var(--e-global-typography-primary-font-family, Montserrat);
}

/* Calculator theme tokens and layout primitives */
:root {
    --space-xs: 0.5rem;  /* 8px */
    --space-s: 1rem;     /* 16px */
    --space-m: 1.5rem;   /* 24px */
    --space-l: 2rem;     /* 32px */
    
    /* Chart dimensions */
    --chart-width: 460px;
    --chart-height: 360px;
    
    /* Chart colors */
    --chart-drip-color: #006644;
    --chart-non-drip-color: #004C84;
    
    /* Input colors */
--input-text-color: var(--e-global-color-text);
--border-light: var(--e-global-color-secondary);
}

/* Root container */
.drip-calculator-container {
  margin: 2rem auto;
  padding: 0;     /* use dark grey for borders */
  font-family: var(--e-global-typography-primary-font-family, Montserrat), inherit;           /* inherit the site's body font */
  color: var(--e-global-color-secondary);                 /* use dark grey for all text */
}

/* Heading */
.drip-calculator-container h2 {
  margin: 0 0 1rem;
  font-size: var(--e-global-typography-secondary-font-size, 1.75rem);
  font-weight: var(--e-global-typography-secondary-font-weight, 600);
  font-family: var(--e-global-typography-secondary-font-family, Montserrat);
  color: var(--e-global-color-secondary, inherit);                 /* match the site's heading color */
}

/* Labels & Inputs */
.drip-calculator-container label {
  display: block;
  margin: 0.75rem 0 0.25rem;
  font-weight: var(--e-global-typography-accent-font-weight, 500);
  font-family: var(--e-global-typography-accent-font-family, Montserrat);
  font-size: var(--e-global-typography-accent-font-size, 14px);
  color: var(--e-global-color-secondary);
}
.drip-calculator-container input {
  width: 100%;
  padding: 0.5rem;
  font-size: var(--e-global-typography-text-font-size, 1rem);
  border: 1px solid #C0C0C0 !important;     /* add dark grey border */
  border-radius: 0 !important;
  box-sizing: border-box;
  font-family: var(--e-global-typography-text-font-family, Montserrat);
  color: var(--e-global-color-secondary);
}
.drip-calculator-container input:focus {
  border-radius: 0 !important;
  outline: none !important;
  border: 1px solid #FFE1E1 !important;
}

.chart-container {
  width: var(--chart-width);
  height: var(--chart-height);
  margin: 0 auto;
}

.chart-wrapper {
  position: relative;
  /* fixed width and height for consistent size */
  width: var(--chart-width);
  height: var(--chart-height);
  margin: 0 auto; /* center the chart */
  transform-origin: left top;
}

/* Responsive chart scaling with dynamic sizing */
@media only screen and (max-width: 520px) {
  .chart-wrapper {
    transform: scale(clamp(0.4, calc(0.25 + 100vw * 0.001), 0.85));
    margin: 0;
    transform-origin: center top;
  }
  
  .chart-container {
    width: calc(var(--chart-width) * clamp(0.4, calc(0.25 + 100vw * 0.001), 0.85));
    height: calc(var(--chart-height) * clamp(0.4, calc(0.25 + 100vw * 0.001), 0.85));
  }
  
  .drip-calculator-container {
    margin: 1rem auto;
    padding: 0;
    font-family: var(--e-global-typography-primary-font-family, Montserrat), inherit;
    color: var(--e-global-color-secondary);
  }
}

/* Responsive sizing for smaller calculator containers */
@media only screen and (max-width: 500px) {
  
  .chart-container {
    width: 100%;
    max-width: 400px;
    height: auto;
    aspect-ratio: 460/360;
  }
  
  .chart-wrapper {
    width: 100%;
    height: 100%;
    transform: none;
  }
  
  .drip-calculator-container .mf-drip-chart {
    width: 100%;
    height: 100%;
  }
}

@media only screen and (max-width: 400px) {
  
  .chart-container {
    max-width: 350px;
  }
}

@media only screen and (max-width: 350px) {
  
  .chart-container {
    max-width: 300px;
  }
}


/* Results summary table */
.drip-calculator-container .mf-drip-results {
  line-height: 1.5;
  font-family: Montserrat, sans-serif;
  border: none !important;
  border-top: none !important;
}

.results-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Montserrat, sans-serif;
  margin: var(--space-s) 0;
  border: none !important;
}

.results-summary-table,
.results-summary-table *,
.results-summary-table thead,
.results-summary-table tbody,
.results-summary-table tr,
.results-summary-table th,
.results-summary-table td {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  outline: none !important;
}

.results-summary-table th {
  padding: var(--space-xs) var(--space-s);
  text-align: center;
  font-weight: normal;
  font-size: var(--e-global-typography-accent-font-size, 14px);
  border: none;
  color: var(--e-global-color-secondary, #333);
}

.results-summary-table th:nth-child(3) {
  font-weight: 600; /* Only With DRIP header is bold */
}

.results-summary-table th:first-child {
  background-color: transparent;
  border: none;
}

.results-summary-table th:nth-child(2) {
  background-color: hsl(217, 46%, 88%); /* #A8BDD6 made 20% brighter */
}

.results-summary-table th:nth-child(3) {
  background-color: hsl(158, 33%, 82%); /* #9CC7B8 made 20% brighter */
}

.results-summary-table td {
  padding: var(--space-xs) var(--space-s);
  text-align: center;
  border: none;
  font-family: Montserrat, sans-serif;
}

.results-summary-table .row-label {
  background-color: var(--e-global-color-fbbe184, #f5f5f5);
  font-weight: normal;
  font-size: var(--e-global-typography-accent-font-size, 14px);
  color: var(--e-global-color-secondary);
  text-align: left;
  padding-left: var(--space-s);
}

.results-summary-table .result-value {
  font-weight: normal;
  font-family: Montserrat, sans-serif;
}

.results-summary-table td:nth-child(2) {
  background-color: hsl(217, 46%, 95%); /* #A8BDD6 made 20% brighter */
}

.results-summary-table td:nth-child(3) {
  background-color: hsl(158, 33%, 89%); /* #9CC7B8 made 20% brighter */
  font-weight: 600; /* Only With DRIP data is bold */
}

.results-summary-table tbody tr:first-child td {
  border: none;
}

/* Legacy result-row styles for backwards compatibility */
.result-row .light-text {
    margin-right: 0.5em;
    font-weight: var(--e-global-typography-accent-font-weight, 500);
    font-family: var(--e-global-typography-accent-font-family, Montserrat);
    font-size: var(--e-global-typography-accent-font-size, 14px);
    color: var(--e-global-color-secondary);
}
.result-row .result-value {
    font-weight: 600;
    font-family: Montserrat, sans-serif;
}
.result-row .tooltip-placeholder {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.25em;
}
.result-row span {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.drip-detail-table tbody tr:nth-child(odd) {
  background-color: var(--e-global-color-fbbe184);
}

.drip-detail-table tbody tr:nth-child(even) {
  background-color: var(--e-global-color-accent);
}

/* Chart canvas */
.drip-calculator-container .mf-drip-chart {
  width: 100%;
  height: 100%;
  margin-top: 1.5rem;
  margin-bottom: -1.5rem;
  display: block;
}

.drip-table-wrapper {
  display: grid;
  container-type: inline-size;
  container-name: table-wrapper;
  justify-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Remove borders from table container and its children */
.mf-drip-table-container,
.mf-drip-table-container table,
.mf-drip-table-container th,
.mf-drip-table-container td {
  border: none !important;
}

/* hide scrollbar in WebKit browsers */
.drip-table-wrapper::-webkit-scrollbar {
  display: none;
}


@container drip-table-wrapper (max-width: 460px) {
  .drip-detail-table { justify-self: start; }
}

/* First column: abbreviated width */
.drip-detail-table th:first-child,
.drip-detail-table td:first-child {
  width: 0;
  text-align: center;
  padding: 4px 0; /* Reduced vertical padding, no horizontal padding */
}
.drip-detail-table td {
  padding: 0 .125rem; /* Removed vertical padding */
  font-size: 12px;
  width: 0;
  text-align: center;
  vertical-align: middle;
  line-height: 1;
  font-family: Montserrat, sans-serif;
}
.drip-detail-table th {
    padding: 4px 5px; /* Reduced vertical, 5px horizontal */
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    font-family: Montserrat, sans-serif;
}
.drip-detail-table th,
.drip-detail-table td {
  white-space: nowrap;
  font-size: 12px;
  min-width: 50px;
}

/* 1. Override and Constrain Width */
body .drip-calculator-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    box-sizing: border-box; 
}

/* 2. Form Element Spacing */
.drip-calculator-container label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: var(--e-global-typography-accent-font-weight, 500);
    font-family: var(--e-global-typography-accent-font-family, Montserrat);
    font-size: var(--e-global-typography-accent-font-size, 14px);
    color: var(--e-global-color-text, inherit);
}

.drip-calculator-container input,
.drip-calculator-container select {
    width: 100%;
    padding: var(--space-xs) var(--space-s);
    margin-bottom: var(--space-s);
    box-sizing: border-box;
    border: none;
    font-family: var(--e-global-typography-text-font-family, Montserrat);
    font-size: var(--e-global-typography-text-font-size, 16px);
    color: var(--e-global-color-secondary);
}

/* 3. Button Padding & Margins */
.drip-calculator-container button {
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    font-family: Montserrat, sans-serif;
    /* Applying the horizontal padding rule */
    padding: var(--space-xs) var(--space-m);
    transition: all 0.2s ease-in-out;
}

.drip-calculator-container .mf-calculate-drip, .btn-green {
    margin-bottom: var(--space-l);
    background-color: var(--e-global-color-primary, #285026);
    color: var(--e-global-color-163165d, white);
    transition: all 0.2s ease-in-out;
}

.drip-calculator-container .mf-toggle-view {
    margin-bottom: 0.75rem;
    background-color: var(--e-global-color-primary, #285026);
    color: var(--e-global-color-163165d, white);
    transition: all 0.2s ease-in-out;
}

.drip-calculator-container .mf-calculate-drip {
  width: 100%;
}

.drip-calculator-container .mf-calculate-drip:hover,
.drip-calculator-container .mf-calculate-drip:active,
.drip-calculator-container .mf-toggle-view:hover,
.drip-calculator-container .mf-toggle-view:active,
.btn-green:hover,
.btn-green:active {
    background-color: var(--e-global-color-163165d, white);
    color: var(--e-global-color-primary, #285026);
    border: 1px solid var(--e-global-color-primary, #285026);
}

/* 4. Section & Group Spacing */
.drip-calculator-container .mf-drip-results,
.drip-calculator-container .chart-container,
.drip-calculator-container .drip-table-wrapper {
    margin-bottom: var(--space-m);
}

.drip-calculator-container .table-controls {
    text-align: center;
}

.drip-calculator-container .drip-actions {
    margin-top: var(--space-l);
    display: flex;
    justify-content: center;
    gap: var(--space-s);
    flex-wrap: wrap;
}

/* Remove margin bottom from first button when buttons stack */
@media only screen and (max-width: 500px) {
    .drip-calculator-container .drip-actions .btn-green:first-child {
        margin-bottom: 0;
    }
}