/* /Components/Admin/ProductEditor.razor.rz.scp.css */
/* The label at its real size, as in the shed day's labels window. The document
   draws its own edge-to-edge page, so the hairline here is the edge of the sticker.
   101.6mm is about 384px, inside iPad portrait's column. */
.label-preview[b-6oa7mvw5za] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
}

.label-frame[b-6oa7mvw5za] {
    width: 101.6mm;
    max-width: 100%;
    height: 152.4mm;
    border: var(--hairline);
    border-radius: var(--radius-row);
    background: var(--paper);
}

.label-preview figcaption[b-6oa7mvw5za] {
    max-width: 152.4mm;
}

/* A landscape label, turned back to read across. The frame is the portrait page
   as it prints; it is turned a quarter anticlockwise about its top-left corner and
   moved down into a box the landscape size. */
.label-turned[b-6oa7mvw5za] {
    position: relative;
    width: calc(152.4mm + 2px);
    height: calc(101.6mm + 2px);
    max-width: 100%;
    overflow: hidden;
}

.label-frame--turned[b-6oa7mvw5za] {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    transform-origin: top left;
    transform: translateY(calc(101.6mm + 2px)) rotate(-90deg);
}
/* /Components/Admin/ShedCodeWindow.razor.rz.scp.css */
/* The label beside its address and buttons, or above them below 600px. */
.code-window[b-usoklzhflh] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-6);
}

.code-window__side[b-usoklzhflh] {
    flex: 1 1 14rem;
}

/* The address as somebody would type it, so it can be checked against the label. */
.code-window__url[b-usoklzhflh] {
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* The label at its real size, as in the labels window. */
.label-frame[b-usoklzhflh] {
    flex: none;
    width: 101.6mm;
    height: 152.4mm;
    border: var(--hairline);
    border-radius: var(--radius-row);
    background: var(--paper);
}
/* /Components/Admin/ShedLabelsWindow.razor.rz.scp.css */
/* The labels side by side, a swipe apart. The strip scrolls inside the window and
   never the page, so iPad portrait has no sideways page scroll. */
.label-strip[b-42cubm82c9] {
    display: flex;
    gap: var(--space-6);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-block: var(--space-2) var(--space-4);
}

.label-strip__item[b-42cubm82c9] {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    scroll-snap-align: center;
}

/* The label at its real size. The document draws its own edge-to-edge page, so the
   hairline here is the edge of the sticker. */
.label-frame[b-42cubm82c9] {
    width: 101.6mm;
    height: 152.4mm;
    border: var(--hairline);
    border-radius: var(--radius-row);
    background: var(--paper);
}

.label-strip__item figcaption[b-42cubm82c9] {
    max-width: 152.4mm;
    text-align: center;
}

/* A landscape label, turned back to read across. The frame is the portrait page
   as it prints; it is turned a quarter anticlockwise about its top-left corner and
   moved down into a box the landscape size. */
.label-turned[b-42cubm82c9] {
    position: relative;
    width: calc(152.4mm + 2px);
    height: calc(101.6mm + 2px);
    max-width: 100%;
    overflow: hidden;
}

.label-frame--turned[b-42cubm82c9] {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    transform-origin: top left;
    transform: translateY(calc(101.6mm + 2px)) rotate(-90deg);
}
/* /Components/Admin/WholesaleInvoiceWindow.razor.rz.scp.css */
/* The invoice at the width of the window and most of the screen's height. A4 is
   taller than any iPad held either way, so it scrolls inside the frame. */
.invoice-frame[b-q8rft80bn9] {
    display: block;
    width: 100%;
    height: 70vh;
    border: var(--hairline);
    border-radius: var(--radius-row);
    background: var(--paper);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/*
    The Blazor reconnect dialog, restyled to Counter Warm. The framework toggles
    the class names below, so their selectors have to stay exactly as they are —
    only the presentation is ours.

    No drop shadow and no new hues: the panel is paper inside an ink hairline, and
    the pulse rings are clay (DESIGN.md, "Shape and space").
*/

.components-reconnect-first-attempt-visible[b-597no4vqo2],
.components-reconnect-repeated-attempt-visible[b-597no4vqo2],
.components-reconnect-failed-visible[b-597no4vqo2],
.components-pause-visible[b-597no4vqo2],
.components-resume-failed-visible[b-597no4vqo2],
.components-rejoining-animation[b-597no4vqo2] {
    display: none;
}

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

#components-reconnect-modal[b-597no4vqo2] {
    width: 22rem;
    margin: 20vh auto;
    padding: var(--space-7);
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: var(--radius-card);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.6;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: counter-warm-reconnect-fade-out-b-597no4vqo2 0.5s both;
}

#components-reconnect-modal[open][b-597no4vqo2] {
    animation: counter-warm-reconnect-fade-in-b-597no4vqo2 0.4s ease-in-out 0.3s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-597no4vqo2]::backdrop {
    /* Ink at low alpha rather than black, so the wash stays warm. */
    background-color: rgb(42 33 28 / 45%);
    animation: counter-warm-reconnect-fade-in-b-597no4vqo2 0.4s ease-in-out;
    opacity: 1;
}

.components-reconnect-container[b-597no4vqo2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}

#components-reconnect-modal p[b-597no4vqo2] {
    margin: 0;
    text-align: center;
    text-wrap: pretty;
}

#components-reconnect-modal button[b-597no4vqo2] {
    min-height: 44px;
    padding: 14px 28px;
    background: var(--clay);
    border: 1px solid var(--clay);
    border-radius: var(--radius-pill);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

#components-reconnect-modal button:hover[b-597no4vqo2] {
    background: color-mix(in srgb, var(--clay) 88%, var(--ink));
}

.components-rejoining-animation[b-597no4vqo2] {
    position: relative;
    width: 72px;
    height: 72px;
}

.components-rejoining-animation div[b-597no4vqo2] {
    position: absolute;
    border: 2px solid var(--clay);
    border-radius: var(--radius-pill);
    opacity: 1;
    animation: counter-warm-reconnect-pulse-b-597no4vqo2 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

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

@keyframes counter-warm-reconnect-fade-in-b-597no4vqo2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes counter-warm-reconnect-fade-out-b-597no4vqo2 {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes counter-warm-reconnect-pulse-b-597no4vqo2 {
    0%,
    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }

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

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