/* ---------- Customizable variables ---------- */
.experience-calculator {
  /* backgrounds for rounded rectangles */
  --ec-container-bg: transparent;      /* outer big rectangle */
  --ec-summary-bg: rgba(0, 0, 0, 0.04);
  --ec-box-bg: #f5f6fa;
  --ec-button-bg: #e0e3ec;

  /* borders / strokes */
  --ec-outer-border-color: transparent;  /* outer border */
  --ec-inner-border-color: #ffffff;  /* inner card + small boxes */


  /* typography */
  --ec-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --ec-title-size: 12px;
  --ec-label-size: 11px;
  --ec-number-size: 22px;
  --ec-button-size: 11px;

  /* text colors */
  --ec-title-color: #7a7f90;
  --ec-main-text-color: #262a3a;
  --ec-muted-text-color: #7a7f90;

  /* radii */
  --ec-radius-lg: 10px;
  --ec-radius-md: 8px;
  --ec-radius-sm: 6px;

  /* spacing */
  --ec-padding: 10px 12px;
}

/* ---------- Layout ---------- */

.experience-calculator {
  font-family: var(--ec-font-family);
  border-radius: var(--ec-radius-lg);
  /*border: 1px solid var(--ec-border-color);*/
  border: 1px solid var(--ec-outer-border-color);
  background-color: var(--ec-container-bg); /* transparent by default */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--ec-padding);
  width: 100%;
  max-width: 260px; /* adjust to taste */
  box-sizing: border-box;
  
}

/* Header row: title, summary, calendar icon */
.ec-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ec-title {
  flex: 1 1 auto;
  font-size: var(--ec-title-size);
  color: var(--ec-title-color);
  font-weight: 500;
}

.ec-summary {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: var(--ec-radius-md);
  background-color: var(--ec-summary-bg);
  border: 1px solid var(--ec-inner-border-color);
  font-size: 11px;
  color: var(--ec-main-text-color);
}

.ec-summary-part {
  font-weight: 600;
}

.ec-summary-plus {
  font-weight: 500;
}
/* Create the inner card (this is the border you’ll see around the 00Y/06M + values): */
.ec-inner {
  position: relative;   /* Make the inner container a positioning context */
  border-radius: var(--ec-radius-lg);
  border: 1px solid var(--ec-inner-border-color);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* And style the outer title that now sits above that inner card:*/
.ec-title-outer {
  font-size: var(--ec-title-size);
  color: var(--ec-title-color);
  font-weight: 500;
  margin-bottom: 4px;
}

/* Calendar button */
.ec-calendar-btn {
  position: absolute;
  top: 8px;     /* adjust as needed */
  right: 16px;   /* adjust as needed */
  border-radius: 50%;
  border: 1px solid var(--ec-inner-border-color);
  background: transparent;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ec-calendar-btn:focus {
  outline: 2px solid var(--ec-inner-border-color);
  outline-offset: 1px;
}

.ec-calendar-icon {
  width: 16px;
  height: 16px;
  stroke: var(--ec-main-text-color);
  fill: none;
  stroke-width: 1.5;
}

/* Body: labels + numeric boxes */
.ec-body {
  display: flex;
  flex-direction: column;
  gap: 4px; /* tighten vertical distance between labels and boxes */
}

.ec-label-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;  /* keep labels at the top edge */
  gap: 40px; /* adjust distance between labels */
  font-size: var(--ec-label-size);
  color: var(--ec-muted-text-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ec-value-row {
  display: flex;
  gap: 10px;
}

.ec-box {
  flex: 1 1 0;
  border-radius: var(--ec-radius-md);
  background-color: var(--ec-box-bg);
  border: 1px solid var(--ec-inner-border-color);
  padding: 8px 0;
  text-align: center;
  font-size: var(--ec-number-size);
  font-weight: 600;
  color: var(--ec-main-text-color);
}

/* Experience button at the bottom */
.ec-experience-btn {
  margin-top: 4px;
  border-radius: var(--ec-radius-md);
  border: 0;
  padding: 8px 6px;
  font-size: var(--ec-button-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ec-muted-text-color);
  background-color: var(--ec-button-bg);
  width: 100%;
  text-align: center;
  cursor: default; /* looks like a label; change to pointer if clickable */
}

/* ---------- Basic responsiveness ---------- */

@media (max-width: 400px) {
  .experience-calculator {
    max-width: 100%;
  }

  .ec-summary {
    font-size: 10px;
  }

  .ec-number {
    font-size: 18px;
  }
}


/* Layout wrapper for chronology + calculator (mobile-first) */
.experience-section {
  display: flex;
  flex-direction: column;      /* stack on mobile by default */
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 1rem;
}

/* mobile: chronology list and calculator both full width */
.experience-section .chronology-list {
  width: 100%;
}

.experience-section .experience-calculator {
  width: 100%;
  max-width: 260px;            /* calculator remains a compact card */
}

/* Larger screens: place calculator beside chronology list */
@media (min-width: 900px) {
  .experience-section {
    flex-direction: row;
  }

  /* Calculator on the left (default row) */
  .experience-section.calculator-left {
    flex-direction: row;
  }

  /* Calculator on the right (reverse row) */
  .experience-section.calculator-right {
    flex-direction: row-reverse;
  }

  /* Let the list be wider than the calculator */
  .experience-section .chronology-list {
    flex: 2 1 0;
  }

  .experience-section .experience-calculator {
    flex: 1 1 220px;
    max-width: 280px;
  }
}

/* Global fix for all Key Outcomes lists */
.payments-note-item ul {
    margin-left: 1.2rem !important;
    padding-left: 1.2rem !important;
}

/* Product management summary block */
      .pm-summary {
        margin: 1.5rem 0 2rem;
        padding: 1.25rem 1.5rem;
        border-radius: 8px;
        background: rgba(0,0,0,0.03);
        font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        line-height: 1.5;
      }
      .pm-summary h2 {
        margin: 0 0 0.5rem;
        font-size: 1.1rem;
        font-weight: 600;
        text-transform: none;
      }
      .pm-summary ul {
        margin: 0.5rem 0 0.75rem 1.25rem;
        padding: 0;
      }
      .pm-summary li {
        margin-bottom: 0.25rem;
      }
      .pm-summary-note {
        font-size: 0.85rem;
        color: #555;
        margin-top: 0.5rem;
      }

      /* Make each experience item stack content and calculator vertically */
      .payments-note-item .experience-calculator {
        margin-top: 0.5rem;
      }

      /* Tweak calculator to be a smaller, supporting element */
      .experience-calculator {
        max-width: 220px;
        padding: 8px 10px;
      }
      .ec-title-outer {
        font-size: 11px;
      }
      .ec-label-row span {
        font-size: 10px;
      }
      .ec-box {
        font-size: 13px;
        padding: 6px 0;
      }
      .ec-experience-btn {
        font-size: 10px;
        padding: 6px 4px;
        text-transform: none;
        letter-spacing: 0.02em;
        background-color: rgba(0,0,0,0.03);
      }
      .ec-caption {
        font-size: 10px;
        color: #555;
        margin-top: 2px;
      }
      /* Local adjustments for Product Management Experience page */
      .pm-summary {
        margin-top: 1.5rem;
        margin-bottom: 2.5rem;
      }

      .pm-summary h2 {
        margin-bottom: 0.5rem;
      }

      .pm-summary p {
        margin-bottom: 0.75rem;
      }

      .experience-section {
        margin-top: 1rem;
      }

      .payments-notes {
        margin-top: 1.25rem;
      }

      .payments-note-item {
        margin-bottom: 1.75rem;
      }

      .payments-note-content p {
        margin: 0;
      }

      /* Make the experience calculator more subtle and supportive */
      .payments-note-item .experience-calculator {
        max-width: 260px;
        margin: 0.75rem 0 0.5rem 0;
        padding: 0.75rem 0.9rem;
        border-radius: 8px;
        background: #f8f8fb;
        border: 1px solid #e2e2ee;
        font-size: 0.8rem;
      }

      .experience-calculator .ec-title-outer {
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 0.35rem;
      }

      .experience-calculator .ec-body .ec-label-row span {
        font-size: 0.7rem;
      }

      .experience-calculator .ec-box {
        font-size: 0.95rem;
        padding: 0.2rem 0.4rem;
      }

      .experience-calculator .ec-caption {
        margin-top: 0.4rem;
        font-size: 0.7rem;
        color: #666666;
      }

      .experience-calculator .ec-experience-btn {
        margin-top: 0.5rem;
        font-size: 0.7rem;
        padding: 0.25rem 0.75rem;
        border-radius: 999px;
        border: 1px solid #cccccc;
        background: #ffffff;
        cursor: default;
      }

@media (min-width: 900px) {
  .payments-note-item .experience-calculator {
    margin-left: 3rem;
  }
}