/* The compare chart (data-chart="compare" in js/v2/charts.js) and its list
   of toggles - on the pension funds lists, under the table.

     .v2cmp_card        the card; hidden in the markup, charts.js shows it
     .v2cmp_periods     period buttons (data-chart-period), dressed as the
                        period links of issue.css
     .v2cmp             the chart box
     .v2cmp_list        the toggles - a checkbox, the line's swatch, the name
                        and the value at the cursor per series; also the
                        chart's readout, as the legend of the other charts

   The chart's own styles (.v2chart, .v2dot, .v2chart_msg) are in base.css. */

body.v2 .v2cmp_card[hidden] { display: none; }

body.v2 .market_card > .heading h2 {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #1e4280;
    font-family: var(--font-text);
    font-size: 21px;
    line-height: 27px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.v2 .v2cmp_card .card_note { margin-bottom: 12px; }

body.v2 .v2cmp_periods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

body.v2 .v2cmp_periods button {
    margin: 0;
    padding: 7px 14px;
    border: 1px solid #dfe7f0;
    border-radius: 999px;
    background: #fff;
    color: #1e4280;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

body.v2 .v2cmp_periods button:hover { background: #f0f3f6; border-color: #b9c9de; }
body.v2 .v2cmp_periods button.is_on,
body.v2 .v2cmp_periods button.is_on:hover { background: #1e4280; border-color: #1e4280; color: #fff; }
body.v2 .v2cmp_periods button:focus-visible,
body.v2 .v2cmp_btn:focus-visible { outline: 2px solid #1e4280; outline-offset: 2px; }

/* the chart keeps its height while it loads and while no line is ticked */
body.v2 .v2cmp { min-height: 260px; }
body.v2 .v2cmp.v2chart_empty { min-height: 0; }
/* a finger moving sideways over the plot reads it; up and down scrolls the page */
body.v2 .v2cmp .u-over { touch-action: pan-y; }
body.v2 .v2cmp .v2cmp_none {
    display: none;
    position: absolute; left: 64px; right: 18px; top: 40%;
    padding: 0;
}
body.v2 .v2cmp.v2cmp_empty .v2cmp_none { display: block; }

body.v2 .v2cmp_list {
    margin: 14px 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

body.v2 .v2cmp_legend {
    float: left;
    margin: 0 14px 0 0;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1f2733;
    line-height: 32px;
}

body.v2 .v2cmp_tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    min-height: 32px;
}

body.v2 .v2cmp_at {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    color: #5b6675;
}

body.v2 .v2cmp_all { display: inline-flex; gap: 6px; margin-left: auto; }

body.v2 .v2cmp_btn {
    margin: 0;
    padding: 5px 12px;
    border: 1px solid #dfe7f0;
    border-radius: 6px;
    background: #fff;
    color: #1e4280;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

body.v2 .v2cmp_btn:hover { background: #f0f3f6; border-color: #b9c9de; }

body.v2 .v2cmp_items {
    clear: both;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    min-width: 0;
    gap: 2px 18px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

body.v2 .v2cmp_item { min-width: 0; margin: 0; padding: 0; list-style: none; }

body.v2 .v2cmp_lbl {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 15px;
    color: #1f2733;
    cursor: pointer;
}

body.v2 .v2cmp_lbl:hover { background: #f5f7fa; }
body.v2 .v2cmp_lbl input { margin: 0; flex: none; width: 16px; height: 16px; }
body.v2 .v2cmp_lbl .v2dot { width: 14px; height: 4px; margin: 0; border-radius: 2px; }
body.v2 .v2cmp_name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.v2 .v2cmp_val {
    flex: none;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 62px;
    font-weight: 600;
}

/* a line taken off the chart, and a fund with no figures for the period */
body.v2 .v2cmp_item.is_off .v2cmp_name { color: #6b7688; }
body.v2 .v2cmp_item.is_off .v2dot { opacity: .35; }
body.v2 .v2cmp_item.is_nodata .v2cmp_lbl { cursor: default; color: #8894a6; }
body.v2 .v2cmp_item.is_nodata .v2dot { visibility: hidden; }
body.v2 .v2cmp_item.is_nodata .v2cmp_val::before { content: attr(data-nodata); font-weight: 400; font-size: 13px; }

@media (max-width: 700px) {
    body.v2 .v2cmp_periods { gap: 5px; }
    body.v2 .v2cmp_periods button { padding: 8px 12px; }
    body.v2 .v2cmp_legend { float: none; display: block; line-height: 1.4; margin-bottom: 4px; }
    body.v2 .v2cmp_items { grid-template-columns: minmax(0, 1fr); }
    body.v2 .v2cmp_lbl { min-height: 40px; }
}