/* /Components/FeedbackDialog.razor.rz.scp.css */
.feedback-dialog-backdrop[b-hi8si06z3s] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: feedback-dialog-fade-in-b-hi8si06z3s 0.15s ease-out;
}

.feedback-dialog[b-hi8si06z3s] {
    background: var(--white);
    border-radius: var(--r-lg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    padding: 24px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    animation: feedback-dialog-slide-up-b-hi8si06z3s 0.2s ease-out;
}

.feedback-dialog__title[b-hi8si06z3s] {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

.feedback-dialog__stars[b-hi8si06z3s] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.feedback-star[b-hi8si06z3s] {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--border);
    line-height: 0;
    transition: color 0.1s ease-in;
}

.feedback-star:hover[b-hi8si06z3s] {
    color: var(--green-bright);
}

.feedback-star--filled[b-hi8si06z3s] {
    color: var(--green);
}

.feedback-dialog__category[b-hi8si06z3s] {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.feedback-category-btn[b-hi8si06z3s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 8px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--grey);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.feedback-category-btn:hover[b-hi8si06z3s] { background: var(--vp-subtle); }

.feedback-category-btn--bug.feedback-category-btn--active[b-hi8si06z3s] {
    background: var(--red-bg);
    border-color: var(--red-border);
    color: var(--red);
}

.feedback-category-btn--feature.feedback-category-btn--active[b-hi8si06z3s] {
    background: var(--tint);
    border-color: var(--green);
    color: var(--green);
}

.feedback-dialog__comment[b-hi8si06z3s] {
    margin-bottom: 12px;
}

.feedback-dialog__error[b-hi8si06z3s] {
    color: var(--red);
    font-size: 13px;
    margin: 0 0 12px;
}

.feedback-dialog__cancel[b-hi8si06z3s] {
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    cursor: pointer;
    padding: 4px 12px;
    border-radius: var(--r-md);
}
.feedback-dialog__cancel:hover:not(:disabled)[b-hi8si06z3s] { background: var(--red-bg); }
.feedback-dialog__cancel:disabled[b-hi8si06z3s] { opacity: 0.45; cursor: default; }

.feedback-dialog__actions[b-hi8si06z3s] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: center;
}

.feedback-dialog__submit:disabled[b-hi8si06z3s] {
    opacity: 0.5;
    cursor: not-allowed;
}

.feedback-dialog__success[b-hi8si06z3s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
    color: var(--green);
}

.feedback-dialog__success p[b-hi8si06z3s] {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
}

@keyframes feedback-dialog-fade-in-b-hi8si06z3s {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes feedback-dialog-slide-up-b-hi8si06z3s {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-m0xg2glmng] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-m0xg2glmng] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-s3jwqd55ms],
.components-reconnect-repeated-attempt-visible[b-s3jwqd55ms],
.components-reconnect-failed-visible[b-s3jwqd55ms],
.components-pause-visible[b-s3jwqd55ms],
.components-resume-failed-visible[b-s3jwqd55ms],
.components-rejoining-animation[b-s3jwqd55ms] {
    display: none;
}

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


#components-reconnect-modal[b-s3jwqd55ms] {
    background-color: var(--white, white);
    color: var(--ink, inherit);
    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-s3jwqd55ms 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-s3jwqd55ms {
    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;
    }
}
/* /Components/TemplateCard.razor.rz.scp.css */
.tpl[b-8zfelz4t8k] { display: flex; flex-direction: column; gap: 12px; }

.tpl__head[b-8zfelz4t8k] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.tpl__title[b-8zfelz4t8k] { margin: 0; font-size: 16px; font-weight: 700; color: var(--vp-ink); }

.tpl-tabs[b-8zfelz4t8k] { display: inline-flex; border: 1px solid var(--vp-border); border-radius: 10px; overflow: hidden; }
.tpl-tab[b-8zfelz4t8k] {
    padding: 6px 14px; min-height: 34px; border: 0; background: transparent;
    color: var(--vp-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tpl-tab:hover[b-8zfelz4t8k] { color: var(--vp-ink); }
/* Not available yet: just muted. No hover, no cursor change, no tooltip. */
.tpl-tab:disabled[b-8zfelz4t8k] { opacity: 0.45; pointer-events: none; }
.tpl-tab--active[b-8zfelz4t8k] { background: var(--vp-tint); color: var(--vp-accent); }

.tpl__note[b-8zfelz4t8k] { margin: 0; font-size: 13px; color: var(--vp-muted); }
.tpl__fine[b-8zfelz4t8k] { margin: 0; font-size: 12px; color: var(--vp-faint); }
.tpl__fine code[b-8zfelz4t8k] { font-family: var(--vp-mono); font-size: 0.92em; }

/* The template text, rendered as Markdown. The fields sit inline with the words around them; the line height leaves room for the chips and the popover.
   The Markdown elements are built in code, so they are styled with ::deep. */
.tpl-body[b-8zfelz4t8k] {
    margin: 0; padding: 14px 18px; overflow-wrap: anywhere;
    font: inherit; font-size: 14px; line-height: 1.8; color: var(--vp-ink);
    background: var(--vp-code-bg); border: 1px solid var(--vp-hairline); border-radius: 10px;
}
.tpl-body[b-8zfelz4t8k]  > :first-child, .tpl-doc[b-8zfelz4t8k]  > :first-child { margin-top: 0; }
.tpl-body[b-8zfelz4t8k]  > :last-child, .tpl-doc[b-8zfelz4t8k]  > :last-child { margin-bottom: 0; }
.tpl-body[b-8zfelz4t8k]  p, .tpl-doc[b-8zfelz4t8k]  p { margin: 0 0 12px; }
.tpl-body[b-8zfelz4t8k]  ul, .tpl-body[b-8zfelz4t8k]  ol, .tpl-doc[b-8zfelz4t8k]  ul, .tpl-doc[b-8zfelz4t8k]  ol { margin: 0 0 12px; padding-left: 24px; }
.tpl-body[b-8zfelz4t8k]  li, .tpl-doc[b-8zfelz4t8k]  li { margin: 0; padding-left: 2px; }
.tpl-body[b-8zfelz4t8k]  li::marker, .tpl-doc[b-8zfelz4t8k]  li::marker { color: var(--vp-accent); }
.tpl-body[b-8zfelz4t8k]  h1, .tpl-body[b-8zfelz4t8k]  h2, .tpl-body[b-8zfelz4t8k]  h3, .tpl-body[b-8zfelz4t8k]  h4, .tpl-doc[b-8zfelz4t8k]  h1, .tpl-doc[b-8zfelz4t8k]  h2, .tpl-doc[b-8zfelz4t8k]  h3, .tpl-doc[b-8zfelz4t8k]  h4 { margin: 4px 0 8px; font-weight: 700; line-height: 1.4; color: var(--vp-ink); }
.tpl-body[b-8zfelz4t8k]  h1, .tpl-doc[b-8zfelz4t8k]  h1 { font-size: 20px; }
.tpl-body[b-8zfelz4t8k]  h2, .tpl-doc[b-8zfelz4t8k]  h2 { font-size: 17px; }
.tpl-body[b-8zfelz4t8k]  h3, .tpl-body[b-8zfelz4t8k]  h4, .tpl-doc[b-8zfelz4t8k]  h3, .tpl-doc[b-8zfelz4t8k]  h4 { font-size: 15px; }
.tpl-body[b-8zfelz4t8k]  strong, .tpl-doc[b-8zfelz4t8k]  strong { font-weight: 700; }
.tpl-body[b-8zfelz4t8k]  blockquote, .tpl-doc[b-8zfelz4t8k]  blockquote { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--vp-border-green); color: var(--vp-muted); }
.tpl-body[b-8zfelz4t8k]  hr, .tpl-doc[b-8zfelz4t8k]  hr { margin: 10px 0; border: 0; border-top: 1px solid var(--vp-border); }
.tpl-body[b-8zfelz4t8k]  code, .tpl-doc[b-8zfelz4t8k]  code { font-family: var(--vp-mono); font-size: 0.92em; }
.tpl-body[b-8zfelz4t8k]  table, .tpl-doc[b-8zfelz4t8k]  table { margin: 0 0 12px; border-collapse: collapse; }
.tpl-body[b-8zfelz4t8k]  th, .tpl-body[b-8zfelz4t8k]  td, .tpl-doc[b-8zfelz4t8k]  th, .tpl-doc[b-8zfelz4t8k]  td { padding: 3px 10px; border: 1px solid var(--vp-border); text-align: left; }

.tpl-chipwrap[b-8zfelz4t8k] { position: relative; display: inline; }
/* While a popover is open the chips rise above the click-away backdrop, so clicking another field moves the popover in one click. */
.tpl-body--editing .tpl-chipwrap[b-8zfelz4t8k] { z-index: 45; }
.tpl-chipwrap--open[b-8zfelz4t8k] { z-index: 50 !important; }

.tpl-chip[b-8zfelz4t8k] {
    display: inline; margin: 0; padding: 0 6px; border: 1px dashed var(--vp-accent); border-radius: 5px;
    background: var(--vp-tint); color: var(--vp-accent); font: inherit; font-weight: 600; font-size: 0.9em;
    line-height: inherit; text-align: left; white-space: normal; cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
/* A blank field reads as something to fill in: on hover it becomes a solid, input-like box with a text cursor and a tip. */
.tpl-chip[b-8zfelz4t8k] { cursor: text; }
.tpl-chip:hover[b-8zfelz4t8k] { background: var(--vp-glass-soft); border-style: solid; box-shadow: 0 0 0 2px var(--vp-tint); }
.tpl-chipwrap:not(.tpl-chipwrap--open) .tpl-chip[data-tip]:hover[b-8zfelz4t8k]::after,
.tpl-chipwrap:not(.tpl-chipwrap--open) .tpl-chip[data-tip]:focus-visible[b-8zfelz4t8k]::after {
    content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 60;
    width: max-content; max-width: min(260px, 70vw); padding: 7px 10px; white-space: pre-line; text-align: left;
    background: var(--vp-card-solid); color: var(--vp-ink); border: 1px solid var(--vp-border); border-radius: 9px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); font-family: var(--vp-font); font-size: 12px; font-weight: 500; line-height: 1.4;
    pointer-events: none;
}
/* The same field used elsewhere in the text: while one spot is being filled in, its other spots are ringed so the link is clear (no second popover). */
/* Blue, because the accent (green) and amber are already the blank and filled chip colours. */
.tpl-chip--twin[b-8zfelz4t8k], .tpl-chip--filled.tpl-chip--twin[b-8zfelz4t8k] {
    border-style: solid; border-color: #3b82f6; outline: 2px solid #3b82f6; outline-offset: 1px;
    background: color-mix(in srgb, #3b82f6 18%, transparent); box-shadow: 0 0 0 5px color-mix(in srgb, #3b82f6 18%, transparent);
}
.tpl-chip:focus-visible[b-8zfelz4t8k] { outline: 2px solid var(--vp-accent); outline-offset: 2px; }

/* A field with a detail: highlighted like marked text, with a tick and the detail in place of the field name. */
.tpl-chip--filled[b-8zfelz4t8k] {
    border: 1px solid var(--vp-warn-border); background: var(--vp-warn-bg); color: var(--vp-ink); font-weight: 600;
}
.tpl-chip--filled:hover[b-8zfelz4t8k] { border-style: solid; border-color: var(--vp-warn-fg); background: var(--vp-warn-bg); }
/* The filled chip shows a tick and the detail in place of the field name. */
.tpl-chip__tick[b-8zfelz4t8k] { margin-right: 5px; font-weight: 700; color: var(--vp-warn-fg); }

/* Waiting for the first words of the polished text. */
.tpl-doc--waiting[b-8zfelz4t8k] { display: flex; align-items: center; min-height: 64px; }
.tpl-dots[b-8zfelz4t8k] { display: inline-flex; gap: 5px; }
.tpl-dots span[b-8zfelz4t8k] { width: 7px; height: 7px; border-radius: 50%; background: var(--vp-faint); animation: tpl-pulse-b-8zfelz4t8k 1.1s infinite ease-in-out; }
.tpl-dots span:nth-child(2)[b-8zfelz4t8k] { animation-delay: 0.15s; }
.tpl-dots span:nth-child(3)[b-8zfelz4t8k] { animation-delay: 0.3s; }
@keyframes tpl-pulse-b-8zfelz4t8k { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tpl-dots span[b-8zfelz4t8k] { animation: none; opacity: 0.6; } }

.tpl-chip--removed[b-8zfelz4t8k] { border-color: var(--vp-faint); background: transparent; color: var(--vp-faint); text-decoration: line-through; font-weight: 500; }

.tpl-backdrop[b-8zfelz4t8k] { position: fixed; inset: 0; z-index: 40; background: transparent; }

.tpl-pop[b-8zfelz4t8k] {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
    width: min(340px, calc(100vw - 48px)); padding: 12px; white-space: normal;
    background: var(--vp-card-solid); border: 1px solid var(--vp-border); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); font-family: var(--vp-font); font-size: 14px; font-weight: 400; line-height: 1.4;
    display: flex; flex-direction: column; gap: 8px; cursor: default;
}
.tpl-pop__label[b-8zfelz4t8k] { margin: 0; font-size: 13px; font-weight: 700; color: var(--vp-ink); }
.tpl-pop__note[b-8zfelz4t8k] { margin: 0; font-size: 12px; color: var(--vp-muted); }
.tpl-pop__actions[b-8zfelz4t8k] { display: flex; flex-wrap: wrap; gap: 6px; }

.tpl-input[b-8zfelz4t8k] {
    width: 100%; padding: 8px 11px; font: inherit; font-size: 14px; color: var(--vp-ink);
    background: var(--vp-card-solid); border: 1px solid var(--vp-input-border); border-radius: 9px; outline: none;
    resize: vertical; transition: border-color 0.15s, box-shadow 0.15s;
}
.tpl-input:focus[b-8zfelz4t8k] { border-color: var(--vp-accent); box-shadow: 0 0 0 3px var(--vp-tint); }

.tpl-btn[b-8zfelz4t8k] {
    padding: 6px 12px; min-height: 32px; border: 1px solid var(--vp-border); border-radius: 8px;
    background: transparent; color: var(--vp-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.tpl-btn:hover[b-8zfelz4t8k] { border-color: var(--vp-accent); color: var(--vp-accent); }
.tpl-btn--primary[b-8zfelz4t8k] { background: var(--vp-accent); border-color: var(--vp-accent); color: #fff; }
.tpl-btn--primary:hover[b-8zfelz4t8k] { color: #fff; filter: brightness(1.08); }
.tpl-btn--danger[b-8zfelz4t8k] { margin-left: auto; }
.tpl-btn--danger:hover[b-8zfelz4t8k] { border-color: #b3261e; color: #b3261e; }

.tpl__actions[b-8zfelz4t8k] { display: flex; flex-wrap: wrap; gap: 8px; }
/* Clear my details sits on the right of the toolbar. */
.tpl__right[b-8zfelz4t8k] { margin-left: auto; }
.tpl-polish:not(:disabled)[b-8zfelz4t8k] { border-color: var(--vp-accent); color: var(--vp-accent); }

/* The filled-in and polished text: a clean "page", rendered as Markdown. */
.tpl-doc[b-8zfelz4t8k] {
    padding: 18px 22px; background: var(--vp-card-solid); border: 1px solid var(--vp-hairline); border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); font-size: 14px; line-height: 1.8; color: var(--vp-ink); overflow-wrap: anywhere;
}
.tpl-doc--polished[b-8zfelz4t8k] { border-color: var(--vp-border-green); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); }

.tpl-error[b-8zfelz4t8k] { margin: 0; font-size: 13px; color: #b3261e; }

@media (max-width: 600px) {
    .tpl__head[b-8zfelz4t8k] { flex-direction: column; align-items: flex-start; }
    .tpl-doc[b-8zfelz4t8k] { padding: 14px 16px; }
}

/* While the template is still being written: fields are shown but not yet clickable, with a blinking caret at the end. */
.tpl-chip--live[b-8zfelz4t8k] { cursor: default; border-style: dashed; }
.tpl-chip--live:hover[b-8zfelz4t8k] { background: var(--vp-tint); border-style: dashed; box-shadow: none; }
.tpl-body--live[b-8zfelz4t8k]  > :last-child::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: text-bottom; background: var(--vp-accent); animation: tpl-blink-b-8zfelz4t8k 1s steps(2, start) infinite; }
@keyframes tpl-blink-b-8zfelz4t8k { to { visibility: hidden; } }
/* The text is done and only the field hints are being written: no caret. */
.tpl-body--finishing[b-8zfelz4t8k]  > :last-child::after { display: none; }
@media (prefers-reduced-motion: reduce) { .tpl-body--live[b-8zfelz4t8k]  > :last-child::after { animation: none; } }