/* Keep CSS minimal; rely on cg-ui global styles */
#aft-results-card .aft-output-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border:1px solid var(--cg-border,#e2e8f0);
  border-radius:12px;
  margin-bottom:10px;
  position:relative;
  background:#fff;
}

/* Optional: colored left bar per output row (Ideal Weight style) */
#aft-results-card .aft-output-row::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background: var(--cg-success,#22c55e);
  opacity:.9;
}

#aft-results-card .aft-output-left{
  flex:1 1 auto;
  min-width:0;
}

#aft-results-card .aft-output-label{
  font-size:.8125rem;
  color: var(--cg-text-muted,#64748b);
  font-weight:600;
  margin-bottom:4px;
}

#aft-results-card .aft-output-value{
  font-size:.95rem;
  font-weight:700;
  color: var(--cg-text-main,#0f172a);
  word-break:break-word;
  overflow-wrap:anywhere;
}


/* ✅ Equal spacing between Performance and Results sections (matches section spacing pattern) */
#aft-results-card{
  margin-top: 18px;
}

/* If a cg-ui collapsible body clips dynamic content, ensure overflow visible in our wrapper */
#aft-sec-performance .cg-section-body,
#aft-sec-results .cg-section-body{
  overflow: hidden; /* cg-ui uses max-height transitions; keep hidden */
}



/* ✅ Results: overall + status box */
#aft-results-card .aft-overall-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--cg-border,#e2e8f0);
  border-radius:12px;
  background:#fff;
  margin-top:14px;
}
#aft-results-card .aft-overall-label{ font-weight:700; color:var(--cg-text-main,#0f172a); }
#aft-results-card .aft-overall-value{ font-weight:800; }
#aft-results-card .aft-overall-value.aft-fail{ color:#b91c1c; }
#aft-results-card .aft-overall-value.aft-pass{ color:#15803d; }

#aft-results-card .aft-status-box{
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.08);
  color:#991b1b;
  font-weight:600;
}
#aft-results-card .aft-status-box--pass{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
  color:#166534;
}
#aft-results-card .aft-status-box--hidden{ display:none; }

/* ✅ Table styling + colored bars per row */
#aft-results-card .aft-table-wrap{ margin-top:12px; overflow:auto; }
#aft-results-card .aft-table{
  width:100%;
  border-collapse:collapse;
  min-width: 520px;
}
#aft-results-card .aft-table th{
  padding:10px 12px;
  border-bottom:1px solid var(--cg-border,#e2e8f0);
  font-size:.85rem;
  color:var(--cg-text-muted,#64748b);
  font-weight:800;
}
#aft-results-card .aft-table td{
  padding:12px 12px;
  border-bottom:1px solid var(--cg-border,#e2e8f0);
  font-size:.92rem;
  color:var(--cg-text-main,#0f172a);
}
#aft-results-card .aft-table tr[data-aft-pass="1"]{ background: rgba(34,197,94,.04); }
#aft-results-card .aft-table tr[data-aft-pass="0"]{ background: rgba(239,68,68,.04); }

#aft-results-card .aft-table tr td:first-child{
  position:relative;
  padding-left:18px;
}
#aft-results-card .aft-table tr td:first-child::before{
  content:"";
  position:absolute;
  left:8px;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background: var(--cg-success,#22c55e);
  opacity:.95;
}
#aft-results-card .aft-table tr[data-aft-pass="0"] td:first-child::before{
  background: #ef4444;
}

#aft-results-card .aft-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
}
#aft-results-card .aft-badge--pass{ color:#15803d; }
#aft-results-card .aft-badge--fail{ color:#b91c1c; }

#aft-results-card .aft-copy-row{ margin-top:12px; }


/* ✅ Fix select width truncation (ONLY non-unit selects) */
#aft-age,
#aft-standard,
#aft-sex,
#aft-alt-event{
  width:100%;
}


/* ✅ Wider dropdown fields (ONLY non-unit selects shown in screenshot) */
#aft-age,
#aft-standard,
#aft-sex,
#aft-alt-event{
  width: 100%;
  max-width: none;
  min-width: 260px;
  display: block;
}


/* ✅ Move "Copy all outputs" to the right */
#aft-results-card .aft-copy-row{
  display:flex;
  justify-content:flex-end;
}


/* ✅ Prevent bottom clipping inside nested Formula + logic section */


/* ✅ Ensure Formula content doesn't clip internally */

#aft-sec-formula .cg-section-body{padding-bottom:14px;}


/* ✅ Prevent Formula+Logic body from peeking when collapsed */
#aft-sec-formula .cg-section-header[aria-expanded="false"] + .cg-section-body{
  max-height: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}


/* ✅ Reduce Formula+Logic header height (calculator-specific only) */
#aft-sec-formula .cg-section-header{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: 44px;
}
#aft-sec-formula .cg-section-title{
  font-size: 0.95rem;
}


/* ✅ Move "Copy formula + logic" to the right */
#aft-sec-formula .aft-formula-copy-row{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* ✅ Reduce thickness of the Formula+Logic field (header row) */
#aft-sec-formula .cg-section-header{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  min-height: 38px;
  border-radius: 12px;
}


/* ✅ Even thinner Formula+Logic header when CLOSED only */
#aft-sec-formula .cg-section-header[aria-expanded="false"]{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 32px;
}


/* ✅ Force toggle arrow direction (Closed = ▲, Open = ▼) — overrides cg-ui transforms */
.cg-wrapper .cg-section-toggle-icon{
  font-size: 0 !important;   /* hide inline ▲/▼ text to avoid CSS transforms affecting it */
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  transform: none !important;
}
.cg-wrapper .cg-section-toggle-icon::before{
  font-size: 14px;
  line-height: 1;
  content: "▲";
}
.cg-wrapper .cg-section-header[aria-expanded="true"] .cg-section-toggle-icon::before{
  content: "▼";
}
.cg-wrapper .cg-section-header[aria-expanded="false"] .cg-section-toggle-icon::before{
  content: "▲";
}


/* ✅ Make Formula section responsive on mobile */
#aft-sec-formula .cg-result-message{
  overflow-wrap: anywhere;
  word-break: break-word;
}
#aft-sec-formula code{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 520px){
  #aft-sec-formula .cg-section-body{
    padding-left: 12px;
    padding-right: 12px;
  }
  #aft-sec-formula ul{
    margin-left: 16px !important;
  }
  #aft-sec-formula .cg-result-message{
    padding: 12px;
  }
  /* Table responsiveness (if visible on small screens) */
  #aft-results-card .aft-table{
    min-width: 0 !important;
  }
}


/* ✅ Mobile: prevent Formula text from stacking letters vertically */
@media (max-width: 520px){
  #aft-sec-formula, #aft-sec-formula *{
    box-sizing: border-box;
  }
  #aft-sec-formula .cg-section-body{
    width: 100%;
    max-width: 100%;
  }
  #aft-sec-formula .cg-result-message{
    width: 100%;
    max-width: 100%;
    display: block;
  }
  #aft-sec-formula ul, 
  #aft-sec-formula li{
    width: 100%;
    max-width: 100%;
  }
  /* Use normal wrapping (avoid per-letter breaks) */
  #aft-sec-formula .cg-result-message,
  #aft-sec-formula li{
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }
  #aft-sec-formula code{
    word-break: break-word;
    overflow-wrap: break-word;
  }
}


/* ✅ Mobile: keep Formula list content inside container (fix bullet/indent overflow) */
@media (max-width: 520px){
  #aft-sec-formula .cg-result-message{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #aft-sec-formula ul{
    margin-left: 0 !important;
    padding-left: 18px !important;     /* controlled indent */
    list-style-position: inside;       /* bullets inside box */
  }
  #aft-sec-formula li{
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
  }
  /* Nested UL */
  #aft-sec-formula ul ul{
    padding-left: 16px !important;
  }
}


/* ✅ Mobile: prevent Results card clipping when Formula expands (keep Share/Feedback visible) */
@media (max-width: 520px){
  /* When Results is OPEN, allow full height (no max-height clipping) */
  #aft-sec-results .cg-section-header[aria-expanded="true"] + .cg-section-body{
    max-height: none !important;
    overflow: visible !important;
  }
  /* When Formula is OPEN, allow full height too */
  #aft-sec-formula .cg-section-header[aria-expanded="true"] + .cg-section-body{
    max-height: none !important;
    overflow: visible !important;
  }
}