@layer unconfirmed, new;

@layer new {
    :root {
        --death-red: #bd4a27;;
        --vaccine-teal: #3092a2;
        --pale-teal: #69b3a2;
        --palegreen: #98fb98;
        --orange: #f5b041;
    }

    .health-scare .title {
        font-size: var(--svg-title);
        fill: var(--text);
        text-anchor: middle;
    }

    .health-scare .tick text, .health-scare .axis-title {
        font-size: var(--svg-label);
    }

    .health-scare .x-axis-title {
        text-anchor: middle;
    }

    .fields li + li {
        padding-top: 0.8rem;
    }

    .cost-line-A, .diff-line-A {
        stroke: var(--palegreen);
        stroke-width: 3;
    }

    .cost-line-B, .diff-line-B {
        stroke: var(--orange);
        stroke-width: 3;
    }

    .legend {
        stroke: var(--plot-text);
        stroke-width: 3;
    }

    .diff-line-A, .diff-line-B, .dashed {
        stroke-dasharray: 16 10;
        stroke-width: 3;
    }

    .fields-wrapper {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 1rem;
        gap: 4rem;
    }

    .fields {
        width: 100%;
    }

    .fields ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .fields li {
        display: flex;
        flex-direction: column;
    }

    .field-header-A {
        color: #98fb98;
    }
    .field-header-B {
        color: #f5b041;
    }

    .field-header-cell {
        text-align: center;
    }

    h2.field-header-cell {
        padding: 0;
    }

    li:has(ul) + li:has(ul) {
        padding-top: 1rem;
    }

    text {
        fill: var(--plot-text);
    }

    input[type="checkbox"] {
        margin-top: 0.2rem;
        width: var(--checkbox-size);
        height: var(--checkbox-size);
    }

}



@layer unconfirmed {

    .health-scare .title {
        font-size: var(--h3);
        fill: var(--text);
        text-anchor: middle;
    }
    .health-scare rect {
        fill: var(--text-accent);
    }

    /* health-scare */

    .health-scare .area {
        fill: var(--death-red); /* #69b3a2; */
        stroke: var(--plot-bg);
        stroke-width: 1;
    }

    .health-scare .y-name text {
        fill: var(--death-red);
    }

    .health-scare .y-name text.black  {
        fill: var(--plot-bg);
    }

    .health-scare .y-name path,
    .health-scare .x-axis path,
    .health-scare .x-axis line,
    .health-scare .y-tick line {
        stroke-width: 3;
    }

    #plot.health-scare .comments .arrow {
        stroke-width: 2;
        stroke: var(--vaccine-teal);
        fill: var(--vaccine-teal);
    }

    #plot.health-scare .comments .label {
        fill: var(--vaccine-teal);
    }

    text {
        font-size: 1.4rem;
        fill: #7e8586;
    }

    .svg-title {
        font-size: 2.2rem;
        fill: #e5e7e9;
    }

    .clear-float {
        clear: both;
    }

    /* LINES **********************************************************************/
    #plot line, #plot path {
        stroke-width: 1px;
        fill: none;
        stroke: #3b414a;
    }

    #plot .line-main {
        stroke-width: 3px;
        fill: none;
    }

    #plot .line-house-A {
        stroke: #98fb98; 
    }

    #plot .line-house-B {
        stroke: #f5b041; 
    }



    .field {
        height: 1.2rem;
    }

    .note {
        display: block;
        padding: 0.2rem;
        text-align: right;
        margin: 0;
        font-size: 0.7rem;
        color: #697173;
    }

    #mortgage-payment-A, #mortgage-payment-B, #total-paid-A, #total-paid-B {
        float: right;
        padding-left: 1rem;
    }

    hr.sums {
        margin: 1rem 0 2rem;
        border: 1px solid var(--border);
        height: 0;
    }

    h3.sums {
        padding: 0 0 1rem 0;
    }

    h3.total {
        padding-bottom: 0;
    }

    /* BLURB **********************************************************************/

    .definitions {
        list-style: none;
    }

    .definitions li strong {
        padding-right: 0.5rem;
    }
}