:root{
  --cc-text:#46474E; --cc-orange:#DB6332; --cc-muted:#f8f9fb; --cc-brd:#ececee;
  --cc-card-radius:8px;
  --cc-card-shadow:0 4px 10px rgba(0,0,0,.1);
  --cc-gutter:16px;

  /* NEW: standard control height for inputs & toggles */
  --cc-control-h:34px;
}

/* ===== CC OrangeCard base ===== */
.cc-card{
  background:#fff;
  border-radius:var(--cc-card-radius);
  box-shadow:var(--cc-card-shadow);
  padding:16px;
  margin:20px auto;
  /* Fill the available post width; parent container controls max width */
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  color:var(--cc-text);
  font-family:system-ui,sans-serif;
  position:relative;
}
.cc-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:10px;background:#DB6332;
  border-top-left-radius:var(--cc-card-radius);border-top-right-radius:var(--cc-card-radius);
}
h2{margin:2px 0 0;text-align:center;color:#000;font-weight:700;font-size:1.18rem}
.cc-subtitle-line{text-align:center;font-size:.96rem;margin:4px 0 10px;color:var(--cc-text)}

.cc-section{
  border:1px solid var(--cc-brd);
  background:var(--cc-muted);
  border-radius:var(--cc-card-radius);
  padding:10px;
  margin:10px 0;
}
h3{margin:0 0 8px;text-align:center;font-weight:600;font-size:1.0rem}
.cc-note{opacity:.75;font-size:.9em}

/* ===== Rows ===== */
.cc-row{
  display:flex; align-items:center; gap:8px; margin:6px 0; flex-wrap:nowrap;
}
.cc-row label{
  flex:1 1 0; min-width:0; line-height:1.25; overflow-wrap:break-word;
}

/* Right column container (width set per-calculator via CSS vars) */
.cc-right, .cc-right-btn, .cc-right-span{
  display:flex; align-items:center; justify-content:flex-end;
}

/* Controls: normalise heights */
.cc-row input[type="text"],
.cc-buttonset button,
.cc-single-toggle button,
.cc-row select{
  min-height:var(--cc-control-h);
}

/* ===== Universal split-pill two-button toggles ===== */
.cc-right-btn .cc-buttonset{
  /* Width supplied by calculator via --toggle-group-width; fallback here */
  width: var(--toggle-group-width, 18rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:0;
}
.cc-buttonset button{
  width:100%;
  box-sizing:border-box;
  margin:0 !important;        /* kill theme margins */
  border:1px solid #e0e1e3;
  background:#fff; color:#333;
  padding:5px 8px; font-size:.95rem; line-height:1.2;
  text-align:center; cursor:pointer;
  border-radius:0;
  display:flex; align-items:center; justify-content:center;
}
.cc-buttonset button:first-child{
  border-radius:8px 0 0 8px; border-right:0;
}
.cc-buttonset button:last-child{
  border-radius:0 8px 8px 0; border-left:0;
}
.cc-buttonset button.active{
  background:#DB6332; color:#fff; border-color:#DB6332;
}

/* ===== Single wide toggle ===== */
.cc-right-btn .cc-single-toggle{
  width: var(--single-toggle-width, 18rem);
  display:flex; justify-content:flex-end;
}
.cc-single-toggle button{
  width:100%; box-sizing:border-box; margin:0 !important;
  border:1px solid #e0e1e3; background:#fff; color:#333;
  padding:6px 10px; border-radius:8px; cursor:pointer; text-align:center;
  display:flex; align-items:center; justify-content:center;
}
.cc-single-toggle button.active{ background:#DB6332; color:#fff; border-color:#DB6332; }

/* ===== Output block defaults ===== */
.cc-output{background:#fff;border:1px solid #e7e8ea;border-radius:8px;padding:10px;margin:12px 0}
.cc-result-line{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;padding:6px 0;border-bottom:1px dashed #e7e8ea}
.cc-result-line:last-child{border-bottom:none}
.cc-result-line .name{text-align:left}
.cc-result-line .score{text-align:center;font-weight:800}
.cc-result-line .interp{text-align:left}
.cc-auc{opacity:.75;margin-left:6px}

/* Refs */
.cc-refwrap{text-align:center;margin-top:8px}
.cc-refbtn{border:1px solid #e0e1e3;background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.cc-refs{margin-top:10px;text-align:left}
.cc-refs ol{margin:0 0 8px 18px}
.cc-refs a{color:#DB6332;text-decoration:none}

/* Diagnostics chip (optional) */
.cc-diag{position:absolute;top:12px;left:12px;padding:2px 6px;border-radius:6px;font-size:12px;font-weight:600}

/* ===== Responsive niceties ===== */
@media (max-width:900px){
  h2{font-size:1.14rem}
}
@media (max-width:600px){
  h2{font-size:1.08rem}
  .cc-result-line{grid-template-columns:1fr 100px 1fr}
}
@media (max-width:420px){
  .cc-card{padding:12px}
  .cc-row{gap:6px}
  .cc-result-line{grid-template-columns:1fr 90px 1fr}
}