/**
 *  VISUALISATION CSS
 */

:root {
    /* ---------------------------------------------------------- */
    /* Avril 14th — colour palette                                */
    /* 12 palettes × 4 vars (outer muted, inner muted, outer hi, inner hi) */
    /* Usage: muted = default ring colour, hi = highlighted/active ring   */
    /* ---------------------------------------------------------- */

    /* 01 — Rose ash: faded terracotta, dusty warmth */
    --color-palette-01a: #C4A99A;
    --color-palette-01b: #9E7B6E;
    --color-palette-01a-hi: #D4614A;
    --color-palette-01b-hi: #7A2E1E;

    /* 02 — Winter glass: pale teal and slate */
    --color-palette-02a: #9AAFB5;
    --color-palette-02b: #6B8A8F;
    --color-palette-02a-hi: #2E7D88;
    --color-palette-02b-hi: #1A4D56;

    /* 03 — Dried amber: warm parchment and ochre */
    --color-palette-03a: #C0B49A;
    --color-palette-03b: #8C7D62;
    --color-palette-03a-hi: #A07828;
    --color-palette-03b-hi: #5C4210;

    /* 04 — Pale violet: dusty lavender and grey-blue */
    --color-palette-04a: #ACA8C0;
    --color-palette-04b: #72727A;
    --color-palette-04a-hi: #5A4FA0;
    --color-palette-04b-hi: #2E2560;

    /* 05 — Lichen: muted sage and forest */
    --color-palette-05a: #A8B5A2;
    --color-palette-05b: #728C6A;
    --color-palette-05a-hi: #3A7232;
    --color-palette-05b-hi: #1A4016;

    /* 06 — Deep rose: dusky mauve and wine */
    --color-palette-06a: #B5A0A8;
    --color-palette-06b: #8A6370;
    --color-palette-06a-hi: #8D2E54;
    --color-palette-06b-hi: #4A1230;

    /* 07 — Overcast: grey-blue mist */
    --color-palette-07a: #A4AEBB;
    --color-palette-07b: #6E7D8C;
    --color-palette-07a-hi: #2E5070;
    --color-palette-07b-hi: #142638;

    /* 08 — Straw light: pale gold and linen */
    --color-palette-08a: #C8BD9A;
    --color-palette-08b: #A09068;
    --color-palette-08a-hi: #B8920A;
    --color-palette-08b-hi: #6A5004;

    /* 09 — Damp stone: slate green and moss */
    --color-palette-09a: #96A89C;
    --color-palette-09b: #627068;
    --color-palette-09a-hi: #2A5C44;
    --color-palette-09b-hi: #103020;

    /* 10 — Bare skin: nude blush, very quiet */
    --color-palette-10a: #C8B8AD;
    --color-palette-10b: #A08878;
    --color-palette-10a-hi: #B86848;
    --color-palette-10b-hi: #6E3420;

    /* 11 — Evening indigo: blue-grey into near-black */
    --color-palette-11a: #A0A8C0;
    --color-palette-11b: #686E90;
    --color-palette-11a-hi: #3040A0;
    --color-palette-11b-hi: #141A50;

    /* 12 — Patina: copper-brown and tarnish */
    --color-palette-12a: #B8A490;
    --color-palette-12b: #887060;
    --color-palette-12a-hi: #8C4E20;
    --color-palette-12b-hi: #4A2408;
}

svg.svg-chart {
    overflow: visible;
    pointer-events: all;
    max-width: 100%;
    height: auto;

    rect {
        &.cell-bg {
            fill: transparent;
        }
    }

    circle {
        fill: transparent;
    }

    circle,
    path {
        &.active {
            opacity: 1;
        }
    }

    path {

        /* filter:     url(#handdrawn); */
        &.ring-bg {
            fill: var(--color-fg);
            opacity: 0.5;
            cursor: pointer;
            transition: 800ms all;

            &.P01,
            &.P13 {
                &.ring-inner {
                    fill: var(--color-palette-01a);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-01a-hi);
                    }
                }

                &.ring-outer {
                    fill: var(--color-palette-01b);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-01b-hi);
                    }
                }
            }


            &.P02,
            &.P14 {
                &.ring-inner {
                    fill: var(--color-palette-02a);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-02a-hi);
                    }
                }

                &.ring-outer {
                    fill: var(--color-palette-02b);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-02b-hi);
                    }
                }
            }

            &.P03,
            &.P15 {
                &.ring-inner {
                    fill: var(--color-palette-03a);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-03a-hi);
                    }
                }

                &.ring-outer {
                    fill: var(--color-palette-03b);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-03b-hi);
                    }
                }
            }

            &.P04,
            &.P16 {
                &.ring-inner {
                    fill: var(--color-palette-04a);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-04a-hi);
                    }
                }

                &.ring-outer {
                    fill: var(--color-palette-04b);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-04b-hi);
                    }
                }
            }

            &.P05,
            &.P17 {
                &.ring-inner {
                    fill: var(--color-palette-05a);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-05a-hi);
                    }
                }

                &.ring-outer {
                    fill: var(--color-palette-05b);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-05b-hi);
                    }
                }
            }


            &.P06,
            &.P18 {
                &.ring-inner {
                    fill: var(--color-palette-06a);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-06a-hi);
                    }
                }

                &.ring-outer {
                    fill: var(--color-palette-06b);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-06b-hi);
                    }
                }
            }

            &.P07 {
                &.ring-inner {
                    fill: var(--color-palette-07a);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-07a-hi);
                    }
                }

                &.ring-outer {
                    fill: var(--color-palette-07b);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-07b-hi);
                    }
                }
            }

            &.P08 {
                &.ring-inner {
                    fill: var(--color-palette-08a);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-08a-hi);
                    }
                }

                &.ring-outer {
                    fill: var(--color-palette-08b);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-08b-hi);
                    }
                }
            }

            &.P09 {
                &.ring-inner {
                    fill: var(--color-palette-09a);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-09a-hi);
                    }
                }

                &.ring-outer {
                    fill: var(--color-palette-09b);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-09b-hi);
                    }
                }
            }

            &.P10 {
                &.ring-inner {
                    fill: var(--color-palette-10a);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-10a-hi);
                    }
                }

                &.ring-outer {
                    fill: var(--color-palette-10b);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-10b-hi);
                    }
                }
            }


            &.P11 {
                &.ring-inner {
                    fill: var(--color-palette-11a);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-11a-hi);
                    }
                }

                &.ring-outer {
                    fill: var(--color-palette-11b);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-11b-hi);
                    }
                }
            }

            &.P12 {
                &.ring-inner {
                    fill: var(--color-palette-12a);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-12a-hi);
                    }
                }

                &.ring-outer {
                    fill: var(--color-palette-12b);

                    &.active,
                    &:hover {
                        fill: var(--color-palette-12b-hi);
                    }
                }
            }
        }

        &.note-arc {
            pointer-events: none;
            fill: var(--color-bg);
            opacity:        0.25;
        }
    }
}

svg {
    pointer-events: none;
    overflow: visible;

    circle.clock-ring {
        fill: none;
        stroke: var(--color-bg);
        stroke-width: 0.75;
        pointer-events: none;
    }
}