.chart-target{
  /* Sträcker sig över hela diagramrutan, inklusive y-axelns marginal. */
  left:-40px!important;
  right:-10px!important;
  z-index:5;
}

/* Linjen går bakom axelns text så att enheten och skalan förblir tydliga. */
.chart-axis-title,.chart-scale{z-index:6}
.chart-axis-title{background:#fff}
/* En sammanhängande axelmarginal döljer linjen bakom skalan utan små streckbitar. */
.chart-scale{left:0;width:37px;padding-left:7px;box-sizing:border-box;background:#fff}
.chart-scale span{background:transparent;padding-right:3px}
.chart-bar{z-index:2}
.chart-bar .bar-value{z-index:6}

/* Samma mått och visuella rytm för flikar och diagramval. */
.result-tabs{gap:7px;padding-bottom:8px}
.result-tab,.chart-mode{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:108px;
  height:38px;
  padding:0 13px;
  border:1px solid #d6dde4;
  font-weight:600;
}
.result-tab.active{border-color:#0a1a2f;background:#0a1a2f;color:#fff}

/* Den generella knapphovringen får inte färga hela stapelns klickyta. */
.chart-bar:hover,.chart-bar:focus-visible{background:transparent}
.chart-bar:hover .bar-fill,.chart-bar:focus-visible .bar-fill{
  filter:brightness(.88);
  outline:2px solid #0a1a2f;
  outline-offset:2px;
}

.chart-target{border-top-width:1px;border-top-color:#0a1a2f}
.chart-target span{z-index:7;right:7px;bottom:5px;color:#0a1a2f}

/* Samma färgkodning som i diagrammet: jämförelser gult, valt resultat grönt. */
#resultTable tbody tr{background:#fff8e7}
#resultTable tbody tr:hover{background:#f8e7ba}
#resultTable tbody tr.green,#resultTable tbody tr.green:hover{background:#e4f2ec}

/* En gemensam, lugn valstil för alla klickbara kontrollrutor. */
.result-tab.active,.chart-mode.active{
  border-color:#6f94aa!important;
  background:#d8e7ef!important;
  color:#12344b!important;
}
.shape-option,.mode-option,.rect-side-option{
  border-color:#d6dde4;
  background:#fff;
  transition:background .16s ease,border-color .16s ease;
}
.shape-option:hover,.mode-option:hover,.rect-side-option:hover{background:#f4f7f9}
.shape-option:has(input:checked),.mode-option:has(input:checked),.rect-side-option:has(input:checked){
  border-color:#6f94aa;
  background:#d8e7ef;
}
.shape-option input:checked+.switch,.mode-option input:checked+.switch,.rect-side-option input:checked+.switch{background:#557b91}

/* Valen markeras av rutans färg i stället för separata reglage. */
.shape-option .switch,.mode-option .switch,.rect-side-option .switch{display:none}
.optional-label{color:#718093;font-weight:500}
.material-length-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.material-length-row{grid-template-columns:1fr}}

/* Rektangulära dimensioner kan bli långa – etiketten bryts i stället för att överlappa nästa stapel. */
.chart-bar .bar-fill+.bar-label{
  width:100%;
  white-space:normal!important;
  overflow-wrap:anywhere;
  text-align:center;
  line-height:1.15;
}
.recommend ul{margin:0;padding-left:18px}
.recommend li+li{margin-top:7px;padding-top:7px;border-top:1px solid currentColor}
.bar-chart.is-empty{background:#fff}