/* Styles for Scripts/graphs/LineChart.d3.v7.js. Matches HorizontalStackedBarChart.d3.v7.css; override the variables to theme a chart. */
.lc {
    --lc-ink: #1f1f1f;
    --lc-muted: #555555;
    --lc-grid: #e8e8e8;
    --lc-axis: #9a9a9a;
    --lc-surface: #ffffff;
    --lc-accent: #006DA0;
    position: relative;
    width: 100%;
    font-size: 12px;
    color: var(--lc-ink);
}

.lc .lc-title {
    margin: 0 0 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--lc-grid);
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--lc-ink);
}

.lc .lc-description {
    margin: 0 0 10px;
    text-align: center;
    font-size: 13px;
    color: var(--lc-muted);
}

/* Plot and legend side by side; stacked in compact mode. */
.lc-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.lc-plot {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.lc-compact .lc-main {
    flex-direction: column;
    align-items: stretch;
}

.lc-svg {
    display: block;
    overflow: visible;
    outline: none;
}

.lc-svg:focus-visible {
    outline: 2px solid var(--lc-accent);
    outline-offset: 2px;
}

.lc-grid line {
    stroke: var(--lc-grid);
    shape-rendering: crispEdges;
}

.lc-axis path.domain {
    stroke: var(--lc-axis);
}

.lc-axis-y path.domain {
    display: none;
}

.lc-axis line {
    stroke: var(--lc-axis);
}

.lc-axis text {
    fill: var(--lc-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.lc-overlay {
    fill: transparent;
    cursor: crosshair;
}

.lc-crosshair {
    stroke: var(--lc-axis);
    stroke-dasharray: 3 3;
    pointer-events: none;
}

.lc-line {
    fill: none;
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.lc-points {
    pointer-events: none;
}

.lc-point {
    stroke-width: 2px;
    transition: r 0.1s ease;
}

/* Ranged values: a hollow circle at the midpoint. */
.lc-point.is-range {
    fill: var(--lc-surface);
}

.lc-point.is-hot {
    r: 6px;
}

.lc-point.is-range.is-hot {
    r: 7px;
}

.lc-series {
    transition: opacity 0.15s ease;
}

/* Hovering a legend item spotlights its line. */
.lc-svg.lc-highlighting .lc-line:not(.is-highlight),
.lc-svg.lc-highlighting .lc-series:not(.is-highlight) {
    opacity: 0.15;
}

.lc-whiskers {
    pointer-events: none;
}

.lc-whisker line {
    stroke-width: 2px;
    stroke-linecap: round;
}

.lc-whisker-bar {
    stroke-opacity: 0.55;
    stroke-width: 6px !important;
}

/* Tooltip: same look as the bar chart's. */
.lc-tooltip {
    position: absolute;
    display: none;
    z-index: 20;
    pointer-events: none;
    min-width: 180px;
    padding: 8px 10px;
    background: var(--lc-surface);
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    font-size: 12px;
    color: var(--lc-ink);
}

.lc-tooltip-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.lc-tooltip table {
    width: 100%;
    border-collapse: collapse;
}

.lc-tooltip td {
    padding: 2px 0;
}

.lc-tip-value {
    text-align: right;
    padding-left: 14px !important;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.lc-tip-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: -1px;
}

.lc-tip-empty {
    color: var(--lc-muted);
}

/* Legend: a column beside the plot; under it (collapsed behind a button) in compact mode. */
/* Grows to fit every entry; no inner scrollbar. */
.lc-legend {
    flex: 0 0 190px;
}

.lc-compact .lc-legend {
    flex: none;
}

.lc-legend-toggle {
    display: none;
    width: 100%;
    padding: 7px 12px;
    border: 1px solid #b9c3cc;
    border-radius: 999px;
    background: var(--lc-surface);
    color: var(--lc-ink);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.lc-legend-toggle::after {
    content: " \25BE";
}

.lc-legend-toggle[aria-expanded="true"]::after {
    content: " \25B4";
}

.lc-compact .lc-legend-toggle {
    display: block;
}

.lc-legend-body[hidden] {
    display: none;
}

.lc-compact .lc-legend-body {
    margin-top: 8px;
}

.lc-legend-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
}

.lc-legend-actions button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--lc-accent);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.lc-legend-list,
.lc-legend-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lc-legend-list ul {
    padding-left: 18px;
}

/* Compact: items wrap as chips instead of a long column. */
.lc-compact .lc-legend-list,
.lc-compact .lc-legend-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    padding-left: 0;
}

.lc-compact .lc-legend-group {
    flex-basis: 100%;
}

.lc-compact .lc-legend-group ul {
    padding-left: 18px;
}

.lc-legend-item {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 1px 4px;
    border: 0;
    line-height: 1.35;
    border-radius: 4px;
    background: none;
    color: var(--lc-ink);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.lc-legend-item:hover {
    background: #f1f4f7;
}

.lc-legend-item:focus-visible {
    outline: 2px solid var(--lc-accent);
    outline-offset: 1px;
}

.lc-legend-head {
    font-weight: 700;
}

.lc-legend-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Series swatch: a short line with a dot, in the series color (set as `color`). */
.lc-swatch {
    position: relative;
    flex: none;
    width: 18px;
    height: 10px;
    margin-right: 6px;
}

.lc-swatch::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 4px;
    height: 2px;
    background: currentColor;
}

.lc-swatch::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Hidden series: hollow, muted swatch and struck-through name. */
.lc-legend-item[aria-pressed="false"] .lc-legend-text {
    color: var(--lc-muted);
    text-decoration: line-through;
}

.lc-legend-item[aria-pressed="false"] .lc-swatch {
    opacity: 0.35;
}

/* Group header checkbox: checked, partly checked (mixed) or empty. */
.lc-check {
    flex: none;
    width: 13px;
    height: 13px;
    margin-right: 6px;
    border: 1.5px solid var(--lc-ink);
    border-radius: 3px;
    background: var(--lc-surface);
}

.lc-legend-head[aria-pressed="true"] .lc-check {
    border-color: var(--lc-accent);
    background: var(--lc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.lc-legend-head[aria-pressed="mixed"] .lc-check {
    border-color: var(--lc-accent);
    background: var(--lc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.lc-legend-note {
    display: flex;
    align-items: center;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--lc-grid);
    color: var(--lc-muted);
}

.lc-ring {
    flex: none;
    width: 10px;
    height: 10px;
    margin: 0 10px 0 4px;
    border: 2px solid var(--lc-muted);
    border-radius: 50%;
}

.lc-empty {
    padding: 32px 0;
    text-align: center;
    color: var(--lc-muted);
}

.lc-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (forced-colors: active) {
    .lc-line,
    .lc-point {
        forced-color-adjust: none;
    }
}
