/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-h5ywf9u8c9],
.components-reconnect-repeated-attempt-visible[b-h5ywf9u8c9],
.components-reconnect-failed-visible[b-h5ywf9u8c9],
.components-pause-visible[b-h5ywf9u8c9],
.components-resume-failed-visible[b-h5ywf9u8c9],
.components-rejoining-animation[b-h5ywf9u8c9] {
    display: none;
}

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


#components-reconnect-modal[b-h5ywf9u8c9] {
    /* The scroll stops here. Without it a wheel or a swipe that runs past the end of the dialog
       carries on scrolling the screen behind it, which on a dead circuit is a page nobody can use. */
    overscroll-behavior: contain;
    background-color: var(--jru-surface);
    color: var(--jru-text);
    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-h5ywf9u8c9 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-h5ywf9u8c9] {
    border: 0;
    background-color: var(--jru-primary);
    color: var(--jru-on-primary);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-h5ywf9u8c9] {
        background-color: var(--jru-primary-hover);
    }

    #components-reconnect-modal button:active[b-h5ywf9u8c9] {
        background-color: var(--jru-primary);
    }

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

    /* The ring grows by transform and fades by opacity, which the compositor animates on its own.
       Animating top, left, width and height re-laid the dialog out on every frame. */
    .components-rejoining-animation div[b-h5ywf9u8c9] {
        position: absolute;
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        box-sizing: border-box;
        border: 3px solid var(--jru-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-h5ywf9u8c9 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-h5ywf9u8c9 {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    4.9% {
        transform: scale(0);
        opacity: 0;
    }

    5% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Movement is stopped for anybody who has asked for less of it, as it is everywhere else in the
   product: the notice appears without sliding and the ring stands still. */
@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[b-h5ywf9u8c9],
    #components-reconnect-modal[open][b-h5ywf9u8c9],
    #components-reconnect-modal[b-h5ywf9u8c9]::backdrop {
        animation: none;
        opacity: 1;
    }

    .components-rejoining-animation div[b-h5ywf9u8c9] {
        animation: none;
        opacity: 1;
    }

    .components-rejoining-animation div:nth-child(2)[b-h5ywf9u8c9] {
        display: none;
    }
}
/* /Components/Pages/Support/ChangeRequestDetail.razor.rz.scp.css */
/* The quote: what is being agreed to on the left, read whole, and what it costs and who has agreed
   on the right, kept in view while the left is read. Under 1100px the two stack, the reading first,
   because the point of the page is that the price is agreed to after the change is read. The page
   fills the width every other page fills; it carries no cap of its own. */

/* The header's controls wrap under the title on a narrow screen instead of pushing it off the side. */
.jru-crd-page[b-yngt0w241m]  .jru-pageheader { flex-wrap: wrap; }
.jru-crd-page[b-yngt0w241m]  .jru-pageheader__actions { flex-wrap: wrap; align-items: center; }

@media (max-width: 760px) {
    .jru-crd-page[b-yngt0w241m]  .jru-pageheader__actions { flex: 1 1 100%; min-width: 0; }
    .jru-crd__position[b-yngt0w241m] { margin-left: 0; }
}

.jru-crd[b-yngt0w241m] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .jru-crd[b-yngt0w241m] { grid-template-columns: minmax(0, 1fr); }
}

.jru-crd__state[b-yngt0w241m] { padding: 24px 15px; }

.jru-crd__position[b-yngt0w241m] {
    align-self: center;
    font-size: 12px;
    color: var(--jru-text-secondary);
    white-space: nowrap;
    margin-left: 8px;
}

/* ------------------------------------------------------------------ the change, read whole */

.jru-crd__doc[b-yngt0w241m] { min-width: 0; }

.jru-crd__part[b-yngt0w241m] { padding: 18px 24px 20px; }
.jru-crd__part + .jru-crd__part[b-yngt0w241m] { border-top: 1px solid var(--jru-border-soft); }

.jru-crd__heading[b-yngt0w241m] {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--jru-text);
}

/* Reading text: the body size and a longer leading than a grid, filling its card. Line breaks typed
   into the request or the quote are kept. */
.jru-crd__prose[b-yngt0w241m] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--jru-text);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.jru-crd__agree[b-yngt0w241m] {
    margin-top: 14px;
    padding: 10px 14px 12px;
    border: 1px solid var(--jru-badge-warning-bd);
    border-radius: var(--jru-radius-control);
    background: var(--jru-badge-warning-bg);
}

.jru-crd__agree-heading[b-yngt0w241m] {
    margin: 0 0 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--jru-badge-warning-fg);
}

/* The request in the words it was asked in: set off by a rule, never italic, so it reads as the
   asker's own and stays as easy to read as ours. */
.jru-crd__ask[b-yngt0w241m] {
    margin: 0;
    padding: 2px 0 2px 14px;
    border-left: 3px solid var(--jru-border-strong);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--jru-text);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.jru-crd__byline[b-yngt0w241m] {
    margin: 8px 0 0 17px;
    font-size: 12px;
    color: var(--jru-text-muted);
}

.jru-crd__shots[b-yngt0w241m] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    padding-left: 17px;
}

.jru-crd__shot[b-yngt0w241m] { margin: 0; display: grid; gap: 4px; }
.jru-crd__shot a[b-yngt0w241m] {
    display: block;
    border: 1px solid var(--jru-border);
    border-radius: var(--jru-radius-control);
    overflow: hidden;
    background: var(--jru-surface-alt);
}
.jru-crd__shot a:hover[b-yngt0w241m] { border-color: var(--jru-border-strong); }
.jru-crd__shot img[b-yngt0w241m] {
    display: block;
    max-width: min(320px, 100%);
    max-height: 200px;
    object-fit: contain;
}
.jru-crd__shot figcaption[b-yngt0w241m] { font-size: 12px; }

/* --------------------------------------------------------------- the price and the decision */

/* Kept in view while the change is read. The screen is its own scroll box (jru.css .jru-screen),
   so sticky holds against that and not the window. */
.jru-crd__slip[b-yngt0w241m] {
    position: sticky;
    top: 0;
    min-width: 0;
}

@media (max-width: 1100px) {
    .jru-crd__slip[b-yngt0w241m] { position: static; }
}

.jru-crd__block[b-yngt0w241m] { padding: 14px 16px; }
.jru-crd__block + .jru-crd__block[b-yngt0w241m] { border-top: 1px solid var(--jru-border-soft); }

.jru-crd__slip-top[b-yngt0w241m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.jru-crd__label[b-yngt0w241m] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--jru-text-secondary);
}

.jru-crd__count[b-yngt0w241m] {
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    color: var(--jru-text-muted);
}

/* The figure being agreed to, at the metric size: the largest type the console allows. */
.jru-crd__amount[b-yngt0w241m] {
    margin-top: 6px;
    font-family: var(--jru-mono);
    font-variant-numeric: tabular-nums;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--jru-text);
    white-space: nowrap;
}

.jru-crd__about[b-yngt0w241m] {
    margin-right: 6px;
    font-family: var(--jru-sans);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--jru-badge-warning-fg);
}

.jru-crd__hours[b-yngt0w241m] { margin-top: 2px; font-size: 12.5px; color: var(--jru-text-secondary); }

/* One line per approval the change needs: a given one is solid and green, because it is agreed;
   one still to come is a dashed outline of the same size, so the gap reads as a gap. */
.jru-crd__sigs[b-yngt0w241m] {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.jru-crd__sig[b-yngt0w241m] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: var(--jru-radius-control);
    font-size: 13px;
}

.jru-crd__sig--given[b-yngt0w241m] {
    border: 1px solid var(--jru-badge-pass-bd);
    background: var(--jru-badge-pass-bg);
}

.jru-crd__sig--open[b-yngt0w241m] {
    grid-template-columns: minmax(0, 1fr);
    border: 1px dashed var(--jru-border-strong);
    color: var(--jru-text-secondary);
}

.jru-crd__sig[b-yngt0w241m]  .jru-crd__sig-icon { color: var(--jru-success); }

.jru-crd__sig-name[b-yngt0w241m] {
    font-weight: 600;
    color: var(--jru-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jru-crd__sig-when[b-yngt0w241m] {
    font-family: var(--jru-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--jru-text-secondary);
    white-space: nowrap;
}

.jru-crd__held[b-yngt0w241m] { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--jru-text); }

.jru-crd__actions[b-yngt0w241m] { display: grid; gap: 8px; }

.jru-crd__terms[b-yngt0w241m] {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--jru-text-secondary);
}
.jru-crd__terms--estimate[b-yngt0w241m] { color: var(--jru-badge-warning-fg); font-weight: 500; }
.jru-crd__block > .jru-crd__terms:first-child[b-yngt0w241m] { margin-top: 0; }

.jru-crd__note-actions[b-yngt0w241m] { display: flex; justify-content: flex-end; margin-top: 6px; }
/* /Components/Pages/Support/ChangeRequests.razor.rz.scp.css */
/* Every row reads from its top line: the title, the date, the price and the badge share one
   baseline, and the change's words are the only thing allowed to run to a second line. Middle
   alignment floated a one-line price halfway down a description. */
.jru-cr-section[b-2qpexb7vsz]  table.jru-grid tbody td {
    vertical-align: top;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Each section runs to its last row and the page scrolls, not the list. The grid's viewport cap
   gave the first section a scroll box of its own, so a long Waiting for a decision list scrolled
   inside the page and the sections under it sat out of reach behind a second bar. The list is
   a few dozen rows held whole, so there is nothing to window. Sideways scroll stays. */
.jru-cr-section[b-2qpexb7vsz]  .jru-grid__scroll {
    max-height: none;
    overflow-y: visible;
}

.jru-cr-change[b-2qpexb7vsz] { display: grid; gap: 3px; min-width: 0; }

/* The title is the link to the change, in the ink every link here wears, so a row reads as
   something that opens before anybody has pointed at it. */
.jru-cr-title[b-2qpexb7vsz] {
    justify-self: start;
    font-weight: 600;
    color: var(--jru-primary-bright);
    text-decoration: none;
}
.jru-cr-title:hover[b-2qpexb7vsz] { text-decoration: underline; }

/* Two lines of the proposal, then a clip: enough to recognise the change by, and the row stays the
   height of the next one. The change's own page holds the rest. */
.jru-cr-detail[b-2qpexb7vsz] {
    color: var(--jru-text-secondary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.jru-cr-meta[b-2qpexb7vsz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    font-size: 12px;
    color: var(--jru-text-muted);
}

/* Said in words as well as tint. Amber because something on it waits on the approver. */
.jru-cr-flag[b-2qpexb7vsz] {
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid var(--jru-badge-warning-bd);
    background: var(--jru-badge-warning-bg);
    color: var(--jru-badge-warning-fg);
    line-height: 18px;
}
.jru-cr-flag--note[b-2qpexb7vsz] {
    border-color: var(--jru-badge-draft-bd);
    background: var(--jru-badge-draft-bg);
    color: var(--jru-badge-draft-fg);
}

.jru-cr-price[b-2qpexb7vsz] { display: grid; justify-items: end; gap: 1px; }

.jru-cr-status[b-2qpexb7vsz] { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; }

.jru-cr-order[b-2qpexb7vsz] { display: flex; align-items: center; gap: 0; margin-top: -4px; }
.jru-cr-place[b-2qpexb7vsz] {
    min-width: 22px;
    font-family: var(--jru-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
    padding-right: 4px;
}

/* Not now and Finished share a card, each a line when folded. The line between them is the first
   one's border; the card's own edge closes the second. */
.jru-cr-folds[b-2qpexb7vsz]  .jru-card__header:last-child { border-bottom: none; }