/********************************************************** L A Y O U T **********************************************************/
[h-layout~="page"] *, [h-layout~="page"] ::before, [h-layout~="page"] ::after {
    position: relative;
    box-sizing: border-box;
}
[h-layout~="page"] {
    --negative-space: 5px;
    --border-color: rgba(24, 32, 36, 0.125);
    --shadow-size: 15px;
    display: block !important;
    background-color: #cbbcf32b;
    box-shadow: 0 5px 15px #2631322b, 0 0 0 1px #578e932b inset;
    padding: calc(var(--negative-space)*4);
    margin-bottom: calc(var(--negative-space)*4);
    background-image: linear-gradient(135deg, transparent, rgb(255 255 255 / 50%));
}
[h-layout~="page"] header, [h-layout~="page"] footer, [h-layout~="page"] section {
    margin-left: calc(-4 * var(--negative-space,0));
    margin-right: calc(-4 * var(--negative-space,0));
}
[h-layout~="page"] footer, [h-layout~="page"] section {
    padding: calc(4 * var(--negative-space,0));
}
[h-layout~="page"] header, [h-layout~="page"] footer {
    background: linear-gradient(var(--border-color) 1px,transparent 1px, transparent calc(100% - 1px - var(--shadow-size,0)), var(--border-color) calc(100% - 1px - var(--shadow-size,0)), transparent),
                linear-gradient(90deg, var(--border-color) 1px,transparent 1px, transparent calc(100% - 1px), var(--border-color) calc(100% - 1px)) center top / 100% calc(100% - var(--shadow-size,0)) no-repeat,
                linear-gradient(var(--bg-color,white),var(--bg-color,white)) center top / 100% calc(100% - var(--shadow-size,0px)) no-repeat;
    padding: calc(4 * var(--negative-space,0)) calc(6 * var(--negative-space,0)) calc(4 * var(--negative-space,0) + var(--shadow-size,0))  calc(6 * var(--negative-space,0));
}
[h-layout~="page"] header, [h-layout~="page"] section:first-child {
    margin-top: calc(-4 * var(--negative-space,0));
}
[h-layout~="page"] footer, [h-layout~="page"] section:last-child {
    margin-bottom: calc(-4 * var(--negative-space,0));
    box-shadow: 0 -1px 0 0 var(--border-color,silver);
}

[h-layout~="page"] header > h1, [h-layout~="page"] header > h2, [h-layout~="page"] header > h3, [h-layout~="page"] header > h4, [h-layout~="page"] header > p,
[h-layout~="page"] footer > h1, [h-layout~="page"] footer > h2, [h-layout~="page"] footer > h3, [h-layout~="page"] footer > h4, [h-layout~="page"] footer > p {
    margin:0;
    border: none;
}
[h-layout~="page"] header > h1 + p, [h-layout~="page"] header > h2 + p, [h-layout~="page"] header > h3 + p, [h-layout~="page"] header > h4 + p,
[h-layout~="page"] footer > h1 + p, [h-layout~="page"] footer > h2 + p, [h-layout~="page"] footer > h3 + p, [h-layout~="page"] footer > h4 + p {
    padding-top:calc(var(--negative-space,0)*2);
}
[h-layout~="columns"] {
    --col-min-width:300px;
    --minicol-min-width: 150px;
    --minicol-max-width: 200px;
    --gap:calc(var(--negative-space,0)*4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}
[h-layout~="columns"] > header, [h-layout~="columns"] > footer {
    min-width:100%;
    }
[h-layout~="columns"] > [h-layout~="column"] {
    flex: 1 1 0;
    min-width: min(100%, var(--col-min-width,unset));
}
[h-layout~="columns"] > [h-layout~="placeholder"] {
    padding: 0;
    max-height: 0;
    visibility: hidden;
}
[h-layout="columns 1|1"] > [h-layout~="column"] {
    min-width: min(100%, max(calc(50% - var(--gap,0)/2), var(--col-min-width,0)));
}
[h-layout="columns 1|1|1"] > [h-layout~="column"] {
    min-width: min(100%, max(calc(100%/3 - var(--gap,0)*2/3), var(--col-min-width,0)));
}
[h-layout="columns 1|2"] > [h-layout~="column"]:nth-of-type(odd),
[h-layout="columns 2|1"] > [h-layout~="column"]:nth-of-type(even) {
    flex-grow: 1;
    flex-basis: min(var(--minicol-max-width,100%), calc(100%/3 - var(--gap)/2));
    min-width: min(100%, var(--minicol-min-width, calc(var(--col-min-width,0)/3)));
}
[h-layout="columns 1|2"] > [h-layout~="column"]:nth-of-type(even),
[h-layout="columns 2|1"] > [h-layout~="column"]:nth-of-type(odd) {
    flex-grow: 2;
    flex-basis: max(calc(100% - var(--minicol-max-width,100%) - var(--gap)), calc(200%/3 - var(--gap)/2));
}
[h-layout~="rows"] {
    display: flex;
    flex-direction: column;
    gap:var(--gap,calc(var(--negative-space,0)*4));
}
[h-layout~="rows"] > [h-layout~="row"] {
    flex: 1;
}
[h-layout~="row"][h-layout~="canvas"] {
    flex: 100;
    border-bottom: var(--caption-buffer, 0px) solid transparent;
}
[h-layout~="row"][h-layout~="canvas"]::before,
[h-layout~="row"][h-layout~="canvas"] [h-layout~="caption"]::before {
    content: "";
    position: absolute;
    top: calc(0px + var(--top-shift,0px));
    right: calc(0px + var(--right-shift,0px));
    bottom: calc(0px + var(--bottom-shift,0px));
    left: calc(0px + var(--leeft-shift,0px));
    background: var(--bg, var(--bg-img,none) center / var(--bg-size,cover) no-repeat);
}
[h-layout~="column"]:nth-of-type(odd) [h-layout~="row"][h-layout~="canvas"]::before,
[h-layout~="column"]:nth-of-type(odd) [h-layout~="row"][h-layout~="canvas"] [h-layout~="caption"] {
    margin-left: calc(-4 * var(--negative-space,0));
}
[h-layout~="column"]:nth-of-type(even) [h-layout~="row"][h-layout~="canvas"]::before,
[h-layout~="column"]:nth-of-type(even) [h-layout~="row"][h-layout~="canvas"] [h-layout~="caption"] {
    margin-right: calc(-4 * var(--negative-space,0));
}
[h-layout~="columns"]:first-child [h-layout~="row"][h-layout~="canvas"]:first-child::before,
[h-layout~="columns"]:first-child [h-layout~="row"][h-layout~="canvas"]:first-child [h-layout~="caption"]  {
    margin-top: calc(-4 * var(--negative-space,0)); 
}
[h-layout~="columns"]:last-child [h-layout~="row"][h-layout~="canvas"]:last-child::before,
[h-layout~="columns"]:last-child [h-layout~="row"][h-layout~="canvas"]:last-child [h-layout~="caption"]  {
    margin-bottom: calc(-4 * var(--negative-space,0)); 
}
[h-layout="caption"] {
    position: absolute;
    right: 0;
    bottom: calc(-1 * var(--caption-buffer,0px));
    left: 0;
    font-size: 85%;
    background: var(--bg, var(--bg-img,none) center / var(--bg-size,cover) no-repeat);
    padding: 10px;
    color: white;
    z-index: 1;
    overflow: hidden;
}
[h-layout="caption"]::before {
    z-index: -1;
    filter: blur(10px) brightness(0.67);
    transform: scale(1.5) translate(0, 13px);
    transform-origin: bottom;
}
.flexTable {
    display: flex;
    gap: 10px;
    font-size: 14px;
}
p + .flexTable {
    margin-top: -6px;
}
/********************************************************** G R A P H S **********************************************************/
[graph-set] {
    --graph-height:300px;
    --top-buffer: 0px;
    --y-axis-buffer: 40px;
    --bottom-label-buffer: 60px;
    --y-axis-color: silver;
    --y-axis-offset: 7px;
    --negative-space: 5px;
    --connector-dotsize: 11px;
    --connector-length: 16px;
    --connector-color: white;
    --y-axis-max: 100;
    --y-axis-step: 10;
    --y-axis-unit: "%";
    --contrast-fx: invert(100%) grayscale(100%) contrast(1000);
    --shadow-fx: drop-shadow(0 3px 4px rgba(34, 40, 53, 0.5));
    --guide-color: #009688;
    font-size: 14px;
    display: flex !important;
    flex-wrap: wrap;
    background-color: #91dde32b;
    box-shadow: 0 5px 15px #2631322b, 0 0 0 1px #578e932b inset;
}
[graph-set] *, [graph-set] ::before, [graph-set] ::after {
    position: relative;
    box-sizing: border-box;
    /*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
}
[graph-set] sup {
    vertical-align: text-top;
    font-size: 80%;
}
[graph-set] label small {
    display: block;
    margin-top: 7px;
    opacity: .8;
}
[graph-set] .contrasted {
    color: var(--bg-color, inherit);
    filter: var(--contrast-fx);
    opacity: .75;
}

[graph-window] {
    width: calc(50% - var(--y-axis-buffer,0) - 5px);
    margin: 0 0  var(--bottom-label-buffer,0) var(--y-axis-buffer,0);
    display: inline-block;
    padding-top: var(--graph-height);
    vertical-align: text-top;
}
[graph-window].topBuffer {--top-buffer:25%;}

[y-axis] {
    position: absolute;
    top: var(--top-buffer,0px);
    right: 0;
    height: calc(var(--graph-height) - var(--top-buffer));
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 1px 0 0 var(--y-axis-color) inset;
    counter-reset: y-axis calc(var(--y-axis-max) + var(--y-axis-step));
}
[y-axis] hr{
    overflow: visible;
    height: 1px;
    width: 100%;
    margin: 0;
    border: none;
    background-color: var(--y-axis-color);
    counter-increment: y-axis calc(-1 * var(--y-axis-step));
}
[y-axis] hr::before {
    content: counter(y-axis) var(--y-axis-unit,"");
    position: absolute;
    right: 100%;
    top: 0;
    transform: translateY(-50%) scaleX(.75);
    font-size: 80%;
    padding-right: var(--y-axis-offset);
    transform-origin: right;
    font-weight: bold;
    opacity: .67;
}
[y-axis] hr::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: calc(var(--y-axis-offset) / -2);
    background-color: var(--y-axis-color);
}
[graph-guide] {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--guide-color);
    margin: 0;
    overflow: visible;
    border: none;
    pointer-events: none;
    top: calc(var(--graph-height) - (var(--graph-height) - var(--top-buffer,0))/100 * var(--val,0) - 2px);
}
[graph-guide]::before, [graph-guide]::after {
    content: attr(graph-guide);
    position: absolute;
    right: 0;
    padding: calc(var(--negative-space)/2) var(--negative-space);
    transform: translate(25%, -50%);
    font-size: 75%;
    font-weight: bold;
    border-radius: 7px;
}
[graph-guide]::before {
    background-color: var(--guide-color);
    color: transparent;
    filter: var(--shadow-fx);
}
[graph-guide]::after {
    color: var(--guide-color);
    filter: var(--contrast-fx);
    opacity: .8;
}
[graph-footer] {
    top: calc(var(--bottom-label-buffer) - 3*var(--negative-space));
    font-size: 75%;
    padding-bottom: var(--negative-space);
}
[graph-board] {
    position: absolute;
    top: 0;
    display: flex;
    align-items: flex-end;
    padding: 0 var(--padding,0);
    counter-reset: label-index;
    height: var(--graph-height);
}
[graph-board].narrowColumns {--padding:calc(var(--negative-space)*3);}

[graph-board]::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(135deg, rgb(255 255 255 / 75%), transparent), var(--board-color,transparent);
    mix-blend-mode: multiply;
}
[graph-board].translucent::before {
    opacity: 0;
}
[graph-board~="left"], [graph-board~="full"] {
    left: 0;
}
[graph-board~="right"], [graph-board~="full"] {
    right: 0;
}
[graph-board~="half"] {
    width: 50%;
}
[graph-column] {
    flex: 1;
    height: calc((100% - var(--top-buffer,0px)) * var(--val)/100);
    margin: 0 var(--negative-space,0);
    border-radius: 7px 7px 0 0;
    transition: height 1s;
    counter-increment: label-index;
}
[graph-column]::before, [graph-column]::after { /*Shadow and fill*/
    content:"";
    position: absolute;
    top:0; right:0; bottom:0; left:0;
    border-radius: inherit;
}
[graph-column]::before {
    box-shadow: 0 0 10px #17192259;
    clip-path: polygon(-100vw -100vh, 100vw -100vh, 100vw 100%, -100vw 100%);
}
[graph-column]::after {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent) left 0 top calc(var(--has-connector,0) * 3px) / 100% 100%, var(--column-color,red);
    opacity: var(--opacity,1);
}
.masked [graph-column] {
    height: 0;
}
.translucent [graph-column] {
    --opacity: .75;
}
.connector [graph-column] {
    background: linear-gradient(var(--column-color), var(--column-color)) center top / 100% 3px no-repeat;
}
[graph-window] label {
    margin: 0;}
[graph-window] > label {
    z-index: 1;
    background-color: rgb(255 255 255 / 80%);
    position: absolute;
    top: var(--negative-space);
    left: var(--negative-space);
    padding: var(--negative-space);
    backdrop-filter: blur(1px);
    box-shadow: 0 5px 10px rgba(34, 40, 53, 0.125);
    border-radius: 7px;
    max-width: calc(100% - var(--negative-space)*2);
}
[graph-board] > label {
    --bg-color: var(--board-color,white);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: var(--negative-space);
    display: flex;
    align-items: center;
    padding: calc(var(--negative-space)/2) var(--negative-space);
    line-height: 1;
    min-height: 28px;
    justify-content: center;
    background-color: var(--bg-color);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 1px 5px rgb(34 40 53 / 13%);
    border-radius: 7px;
    font-size: 75%;
    transition: all .3s;
}
[graph-board] > label::before { /*Mouse buffer*/
    content:"";
    position: absolute;
    top: calc(-1 * var(--negative-space));
    right:calc(-1 * var(--negative-space));
    bottom:0;
    left:calc(-1 * var(--negative-space));
}

[graph-board]:hover > label {
    --bg-color: var(--column-color, silver);
}

[graph-column] > label {
    position: absolute;
    bottom: var(--negative-space);
    left: 50%;
    transform: translate(-50%, calc(-1 * (var(--has-connector,0) * var(--connector-length) + var(--cascade-index,0) * (var(--negative-space)/2 + 100%))));
    white-space: nowrap;
    text-align: center;
    background-color: white;
    z-index: calc(4 - var(--cascade-index,3));
    font-size: 80%;
    padding: calc(var(--negative-space)/2) var(--negative-space);
    filter: var(--shadow-fx);
    border-radius: 7px;
    pointer-events: none;
    transition: all 1s .5s;
}
.countedLabels [graph-column] > label::before {
    content: counter(label-index,upper-roman) ": ";
    font-weight: bold;
    opacity: .5;
}
.masked [graph-column] > label {
    opacity: 0;
    --connector-length: 0px}

.cascadeLabels [graph-column]:nth-of-type(1) > label {--cascade-index:0;}
.cascadeLabels [graph-column]:nth-of-type(2) > label {--cascade-index:1;}
.cascadeLabels [graph-column]:nth-of-type(3) > label {--cascade-index:2;}
.cascadeLabels [graph-column]:nth-of-type(4) > label {--cascade-index:3;}

.topLabels [graph-column] > label {
    bottom:calc(100% + var(--negative-space));
}
.topLabels.flipped [graph-column] > label {
    bottom: calc(100% - var(--negative-space));
    --label-direction: -1;
    transform: translate(-50%, calc(100% + var(--negative-space)/2 + var(--has-connector,0) * var(--connector-length)));
}
.connector {
    --has-connector:1;
}
.topLabels.connector [graph-column] > label::before {
    content: "";
    position: absolute;
    left: calc(50% - var(--connector-dotsize)/2);
    width: var(--connector-dotsize);
    top: 100%;
    height: calc(var(--connector-dotsize)/2 + var(--connector-length) + var(--negative-space));
    background: radial-gradient(circle closest-side at 50% calc(100% - var(--connector-dotsize)), var(--connector-color) 90%, transparent) left 0px bottom calc(var(--connector-dotsize) / -2) / 100% no-repeat,
                linear-gradient(var(--connector-color), var(--connector-color)) center top / 1px calc(100% - var(--connector-dotsize)/2) no-repeat;
}
.topLabels.flipped.connector [graph-column] > label::before {
    transform: scaleY(-1);
    top:unset;
    bottom: 100%;
}

[graph-set] header {
    --shadow-size: 15px;
    --max-img-width: 300px;
    background: linear-gradient(var(--bg-color,white),var(--bg-color,white)) center top / 100% calc(100% - var(--shadow-size,0px)) no-repeat,
                linear-gradient(#18202426, transparent) center bottom / 100% var(--shadow-size,0) no-repeat;
    padding: calc(4 * var(--negative-space,0)) calc(6 * var(--negative-space,0)) calc(4 * var(--negative-space,0) + var(--shadow-size,0))  calc(6 * var(--negative-space,0) + min(33%, var(--max-img-width)));
    margin-bottom: calc(4 * var(--negative-space,0));
}
[graph-set] header::before {
    content:"";
    position: absolute;
    top:0; left:0;
    bottom:var(--shadow-size,0);
    width: min(33%, var(--max-img-width));
    background: var(--bg-img) center / cover;
}
[graph-set] header::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: var(--shadow-size,0);
    left: 0;
    box-shadow: 0 0 0 1px #d2e5e7 inset;
    mix-blend-mode: multiply;
    pointer-events: none;
}
[graph-set] header > h1, [graph-set] header > h2, [graph-set] header > h3, [graph-set] header > h4, [graph-set] header > p,
[graph-set] footer > h1, [graph-set] footer > h2, [graph-set] footer > h3, [graph-set] footer > h4, [graph-set] footer > p {
    margin:0;
}
[graph-set] header > h1 + p, [graph-set] header > h2 + p, [graph-set] header > h3 + p, [graph-set] header > h4 + p,
[graph-set] footer > h1 + p, [graph-set] footer > h2 + p, [graph-set] footer > h3 + p, [graph-set] footer > h4 + p {
    padding-top:calc(var(--negative-space,0) * 2);
}
[graph-set] header p {font-size: 90%;}