/* /Components/Components/FaktoraLoader.razor.rz.scp.css */
/* Faktora loading animation.
   Baked timings = the "Balanced" (O) and "Sweep" (line) presets from /loading-demo:
   O   - top 1.4s forward, bottom 2.8s reverse, eased. The 2:1 ratio locks both arcs to one
         2.8s master cycle, and the eased keyframes have equal first/last segments so the
         rotation speed matches across the loop seam (no jerk on repeat).
   line- 2.4s, drawn in from the left and swept off to the right. Both ends sit off the path,
         so the repeat is invisible. */

.fk-loader[b-rfzt1tvxov] {
    display: block;
    height: auto;
}

.fk-loader .arc[b-rfzt1tvxov] {
    transform-box: view-box;
    animation-name: fk-loader-spin-b-rfzt1tvxov;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* pivot = centre of the O, in each viewBox's own coordinates */
.fk-loader.icon .arc[b-rfzt1tvxov] { transform-origin: 211.91px 212px; }
.fk-loader.logo .arc[b-rfzt1tvxov] { transform-origin: 1817.5px 212px; }

.fk-loader .arc.top[b-rfzt1tvxov] { animation-duration: 1.4s; }
.fk-loader .arc.bot[b-rfzt1tvxov] { animation-duration: 2.8s; animation-direction: reverse; }

/* the wordmark only spins when asked; the icon always does */
.fk-loader.logo:not(.spins) .arc[b-rfzt1tvxov] { animation: none; }

.fk-loader .line[b-rfzt1tvxov] {
    animation: fk-loader-sweep-b-rfzt1tvxov 2.4s linear infinite;
}

/* mono: inherit the surrounding text colour (e.g. white on a primary button).
   The trailing arc is dimmed so the two counter-rotating halves stay readable. */
.fk-loader.mono .arc.top path[b-rfzt1tvxov] { fill: currentColor; }
.fk-loader.mono .arc.bot path[b-rfzt1tvxov] { fill: currentColor; opacity: 0.35; }

@keyframes fk-loader-spin-b-rfzt1tvxov {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(60deg); }
    50%  { transform: rotate(180deg); }
    75%  { transform: rotate(300deg); }
    100% { transform: rotate(360deg); }
}

/* pathLength=1 + dasharray=1: offset 1 = off-path left, 0 = fully drawn, -1 = off-path right */
@keyframes fk-loader-sweep-b-rfzt1tvxov {
    0%   { stroke-dashoffset: 1; }
    50%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1; }
}

/* respect users who ask for less motion: hold the mark still, line fully drawn */
@media (prefers-reduced-motion: reduce) {
    .fk-loader .arc[b-rfzt1tvxov] { animation: none; }
    .fk-loader .line[b-rfzt1tvxov] { animation: none; stroke-dashoffset: 0; }
}
/* /Components/Components/Timeline.razor.rz.scp.css */
/* Only what a utility class cannot express: a container query, a colour mixed from a variable, or
   geometry that has to reach outside the box it is drawn in. Everything else is a utility in the
   markup. Plain CSS - this file is not processed by Tailwind, so no @apply and no --alpha(). */

/* A column and a ruler cell each measure themselves, so their duration and their time can hide when
   there is no room to hold one. */
.tl-col[b-jzsyqxslk4],
.tl-tick[b-jzsyqxslk4] {
    container-type: inline-size;
}

.tl-detail[b-jzsyqxslk4],
.tl-time[b-jzsyqxslk4] {
    display: none;
}

@container (min-width: 160px) {
    .tl-detail[b-jzsyqxslk4] {
        display: block;
    }
}

@container (min-width: 56px) {
    .tl-time[b-jzsyqxslk4] {
        display: block;
    }
}

/* A card reads like the result badges in the table below: the state colour on a tint of itself. */
.tl-card[b-jzsyqxslk4] {
    color: var(--badge-color);
    background-color: color-mix(in srgb, var(--badge-color) 12%, transparent);
    border-color: var(--badge-color);
}

/* The connector, drawn into the seam on an element's left. A wait carries it across its own width as
   well, so the only difference between "these two follow each other" and "the part waited here" is how
   long the line is. Per element rather than one rail behind the row: a card's fill is translucent, so a
   rail showed through every card instead of only between them. */
.tl-link[b-jzsyqxslk4] {
    position: absolute;
    left: -8px;
    width: 8px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background-color: var(--color-border);
}

.tl-link-wait[b-jzsyqxslk4] {
    width: auto;
    right: 0;
}

/* Bypassed: the line still runs through it, and this arcs around it and back down. Percentages, so one
   rule fits a chip and a whole card - bottom at the middle is where the connector runs. A card is tall
   enough that a chip's clearance would leave the arc on its edge, and wide reach would touch the
   neighbouring card, so it asks for different values. */
.tl-bypass[b-jzsyqxslk4] {
    position: absolute;
    left: calc(-1 * var(--tl-reach, 8px));
    right: calc(-1 * var(--tl-reach, 8px));
    bottom: 50%;
    height: calc(50% + var(--tl-arc, 2px));
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    pointer-events: none;
}

.tl-bypass-card[b-jzsyqxslk4] {
    --tl-arc: 8px;
    --tl-reach: 4px;
}

/* Excluded: the connector runs straight through, over the top of whatever it crosses. */
.tl-through[b-jzsyqxslk4] {
    position: absolute;
    left: -8px;
    right: -8px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background-color: currentColor;
    pointer-events: none;
}

/* Panning is the point of this strip, so the scrollbar stays visible rather than fading out. */
.tl-scroll[b-jzsyqxslk4] {
    scrollbar-color: var(--color-border) transparent;
}
/* /Components/Dashboard/DashboardGrid.razor.rz.scp.css */
/* 12 columns; a widget spans its Width of them (style="--span: n"). Plain CSS rather than Tailwind
   classes: the span is data, and momentum.css only has the classes some .razor file spells out. */
.widget-grid[b-y6hkiyxn8k] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.widget[b-y6hkiyxn8k] {
    grid-column: span var(--span) / span var(--span);
    position: relative;
    min-width: 0;
}

/* Below lg a third of the screen is no chart - everything goes full width, in the same order, and
   there is no width left to drag. */
@media (width < 64rem) {
    .widget[b-y6hkiyxn8k] {
        grid-column: 1 / -1;
    }

    .widget-resize[b-y6hkiyxn8k] {
        display: none;
    }
}

/* Edit mode. A widget with nothing to show still gets a box to grab. */
.editing .widget[b-y6hkiyxn8k] {
    min-height: 8rem;
}

.widget-overlay[b-y6hkiyxn8k] {
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: grab;
    border: 2px dashed var(--color-primary);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--color-background) 45%, transparent);
}

/* Edge handles, straddling the widget's border. Beside the overlay rather than in it: the overlay is
   draggable, and a pointer pressed inside it would move the widget instead of resizing it. */
.widget-resize[b-y6hkiyxn8k] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.75rem;
    z-index: 11;
    cursor: ew-resize;
    touch-action: none;
}

.widget-resize.left[b-y6hkiyxn8k] {
    left: -0.375rem;
}

.widget-resize.right[b-y6hkiyxn8k] {
    right: -0.375rem;
}

.widget-resize[b-y6hkiyxn8k]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 2.5rem;
    translate: -50% -50%;
    border-radius: 9999px;
    background: var(--color-primary);
}

.widget-toolbar[b-y6hkiyxn8k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    background: var(--color-background-light);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
    cursor: default;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-j0nc5kk6pv],
.components-reconnect-repeated-attempt-visible[b-j0nc5kk6pv],
.components-reconnect-failed-visible[b-j0nc5kk6pv],
.components-pause-visible[b-j0nc5kk6pv],
.components-resume-failed-visible[b-j0nc5kk6pv],
.components-rejoining-animation[b-j0nc5kk6pv] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-j0nc5kk6pv],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-j0nc5kk6pv],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-j0nc5kk6pv],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-j0nc5kk6pv],
#components-reconnect-modal.components-reconnect-retrying[b-j0nc5kk6pv],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-j0nc5kk6pv],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-j0nc5kk6pv],
#components-reconnect-modal.components-reconnect-failed[b-j0nc5kk6pv],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-j0nc5kk6pv] {
    display: block;
}


#components-reconnect-modal[b-j0nc5kk6pv] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-j0nc5kk6pv 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-j0nc5kk6pv 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-j0nc5kk6pv 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-j0nc5kk6pv]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-j0nc5kk6pv 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-j0nc5kk6pv {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-j0nc5kk6pv {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-j0nc5kk6pv {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-j0nc5kk6pv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-j0nc5kk6pv] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-j0nc5kk6pv] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-j0nc5kk6pv] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-j0nc5kk6pv] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-j0nc5kk6pv] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-j0nc5kk6pv] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-j0nc5kk6pv 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-j0nc5kk6pv] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-j0nc5kk6pv {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}