/* ============================================================
   chart.css — D3 SVG chart styles for life expectancy calculator
   ============================================================ */

/* --- Axes -------------------------------------------------- */
.axis path,
.axis line {
    fill: none;
    stroke: none;
    shape-rendering: crispEdges;
}

.x.axis path {
    display: inline;
    fill: none;
    stroke: black;
    stroke-width: 0;
}

.axis text {
    font-weight: normal;
    font-size: 1.1em;
    fill: #323132;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.tick text {
    font-size: 16px;
    fill: #323132;
}

/* y-axis horizontal gridlines */
.axis.y .tick line {
    stroke-width: 1px;
    stroke: #ccc;
    stroke-opacity: 0.33;
}

.axis.x .tick line {
    stroke-width: 1px;
    stroke: #323132;
    stroke-opacity: 1;
}

/* --- Probability curve and area --------------------------- */
#probabilityLine {
    fill: none;
    stroke-width: 4px;
}

.area {
    stroke-width: 0;
}

/* --- Reference lines -------------------------------------- */
#LELine,
#LegendLELine {
    stroke: #236092;
    fill: #236092;
    stroke-width: 3px;
}

#centreline {
    stroke: #323132;
    stroke-width: 1px;
}

.vertLines,
.horiLines {
    stroke-width: 3px;
}

/* --- Chart labels ----------------------------------------- */
#xAxisTitle,
#yAxisTitle {
    font-size: 16px;
}

.graphText,
.legendText {
    font-size: 16px;
    fill: #0581c9;
}

.graphSubText {
    font-size: 16px;
    fill: #236092;
}

.graphSubText1 {
    font-size: 16px;
    fill: #121212;
}

.labels {
    text-anchor: middle;
    font-size: 18px;
}