/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout — what the design system cannot reach from a class name.
   ═══════════════════════════════════════════════════════════════════

   Everything here is either a NavLink active state (Blazor stamps `.active` on the element
   itself, so it cannot be expressed as a `cv-` component class alone) or a reservation that
   depends on this layout's own furniture. Colours come from cv-brand.css; nothing in this file
   states a brand value.

   What this file used to carry, and no longer does:

     * `background: white` on three card classes with no dark-mode variant at all — so every
       dashboard card was white-on-white text in the dark theme — and four hardcoded indigos
       from the palette before last. Those went in an earlier pass.

     * `.stat-card`, `.page-card`, `.content-card`, `.badge-scheduled`, `.badge-published`,
       `.badge-draft`, `.btn-primary` and `.nav-section-divider` — about a hundred lines
       styling eight class names that appear in no .razor file in this app. They could not
       have applied even if they did: CSS isolation without `::deep` scopes a rule to the
       elements of *this* component, and none of the eight was ever written in MainLayout. So
       they were dead twice over, and they described a card, a badge and a button that the
       design system has since answered properly with `.cv-card`, `.cv-badge` and `.cv-btn`.
       Keeping a second, invisible definition of those three is how a design system acquires a
       rival. */

/* ═══════════════════════════════════════════════════
   Sidebar navigation — the active pill
   ═══════════════════════════════════════════════════

   `.cv-nav-link` in cv-brand.css carries the shape, the 44px minimum and the resting colour.
   What it cannot carry is this: Blazor's NavLink puts `.active` on the anchor at render time,
   and the component layer has no way to know which link that is. */

[b-hgheukd3gw] .nav-link-item {
    position: relative;
    transition: background-color var(--cv-t) var(--cv-ease), color var(--cv-t) var(--cv-ease);
}

[b-hgheukd3gw] .nav-link-item.active {
    background: rgb(var(--cv-primary-tint-rgb) / 0.16);
    color: var(--cv-sidebar-ink) !important;
    font-weight: 600;
}

/* The active marker is the cyan band, on the leading edge. Logical inset, so it moves to the
   right-hand side in a right-to-left locale rather than detaching from the row. */
[b-hgheukd3gw] .nav-link-item.active::before {
    content: "";
    display: block;
    position: absolute;
    inset-inline-start: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.5rem;
    border-radius: var(--cv-r-full);
    background: var(--cv-accent);
}

[b-hgheukd3gw] .nav-link-item.active .nav-icon {
    color: var(--cv-accent) !important;
    font-variation-settings: 'FILL' 1;
}

[b-hgheukd3gw] .nav-link-item:hover:not(.active) {
    background: rgb(255 255 255 / 0.06);
}

/* ═══════════════════════════════════════════════════
   Room for the bottom bar
   ═══════════════════════════════════════════════════

   The scroll container carried `pb-24`, and Tailwind does generate `.pb-24 { padding-bottom:
   6rem }` — but the computed value on the element was 16px, so something in the cascade was
   winning and the last controls on every long page sat underneath the bar. On AutoPilot the
   save button and the "ask before posting" switch could not be reached at all: scrolled to the
   very end of the page, they were still behind the bar.

   Declared here, scoped to this layout, so it does not depend on a utility class resolving.
   The arithmetic is stated in tokens rather than as the number 96: the bar's own height, the
   amount the raised Create button overhangs it, the home-indicator inset on a notched phone,
   and a little air. Change the bar and this follows — and the Create button now lifts by that
   same `--cv-bottom-bar-overhang`, so the reservation and the thing it reserves for are one
   number instead of two that happened to agree. */
main.cv-scroll[b-hgheukd3gw] {
    padding-bottom: calc(var(--cv-bottom-bar-h) + var(--cv-bottom-bar-overhang) + env(safe-area-inset-bottom, 0px) + 0.75rem);
}

@media (min-width: 1024px) {

    /* No bottom bar on desktop; the rail carries navigation. */
    main.cv-scroll[b-hgheukd3gw] {
        padding-bottom: 1.5rem;
    }
}

/* The scroll region takes focus by script (the skip link this app will get once its string
   exists), and a focused container should not draw the ring a focused control draws. */
main.cv-scroll:focus[b-hgheukd3gw] {
    outline: none;
}

/* ═══════════════════════════════════════════════════
   The shell's height
   ═══════════════════════════════════════════════════

   `h-screen` is 100vh, and in the installed iPhone app (status bar style `default`) 100vh is
   the whole glass while the web view starts under the status bar — so the shell was taller
   than the window by the status bar's height, the foot of <main> sat off screen, and the
   bottom-bar reservation lost that much. The last row of Drafts' pager, the dashboard's
   Recent Activity and the support page's email button ended up under the bar (reported
   2026-09-25). 100dvh is the window actually shown; 100vh stays as the fallback. */
.cv-shell-h[b-hgheukd3gw] {
    height: 100vh;
    height: 100dvh;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* The reconnect notice, on the design system.
 *
 * This is the screen a customer sees when their connection drops — and it was the scaffolded
 * Blazor default, untouched: a `background-color: white` box, a `#6b9ed2` button, a `#0087ff`
 * focus ring and a `rgba(0,0,0,0.3)` shadow. In the dark theme it is a white card; in nine
 * languages it is in English. The one screen nobody looks at until something has gone wrong.
 *
 * On the tokens now. The text is still the framework's own markup — see ReconnectModal.razor.
 */
.components-reconnect-first-attempt-visible[b-t2x96z22uu],
.components-reconnect-repeated-attempt-visible[b-t2x96z22uu],
.components-reconnect-failed-visible[b-t2x96z22uu],
.components-pause-visible[b-t2x96z22uu],
.components-resume-failed-visible[b-t2x96z22uu],
.components-rejoining-animation[b-t2x96z22uu] {
    display: none;
}

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


#components-reconnect-modal[b-t2x96z22uu] {
    background-color: var(--cv-card);
    color: var(--cv-text);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: var(--cv-shadow-md);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-t2x96z22uu 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-t2x96z22uu]::backdrop {
    background-color: var(--cv-overlay);
    animation: components-reconnect-modal-fadeInOpacity-b-t2x96z22uu 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-t2x96z22uu {
    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/Pages/AccountConfirmEmail.razor.rz.scp.css */
/* /account/confirm-email. Colours come from the theme tokens the utility classes use, so light
   and dark both follow the app's own palette; nothing here sets a colour of its own. */

.confirm-mark[b-c4zrqtsy0u] {
    width: 2.75rem;
    height: 2.75rem;
}

.confirm-icon[b-c4zrqtsy0u] {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    font-size: 26px;
}

.confirm-title[b-c4zrqtsy0u] {
    margin-top: 1.25rem;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
}

@media (min-width: 640px) {
    .confirm-title[b-c4zrqtsy0u] {
        font-size: 1.875rem;
    }
}

/* A long address must wrap rather than widen the card past a phone screen. */
.confirm-address[b-c4zrqtsy0u] {
    margin-top: 0.75rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.confirm-notice[b-c4zrqtsy0u] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: 1.25rem;
    padding: 0.75rem;
    border: 1px solid;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.45;
}

.confirm-notice--good[b-c4zrqtsy0u] {
    border-color: var(--cv-success, currentColor);
    background: var(--cv-success-soft, transparent);
    color: var(--cv-success, inherit);
}

.confirm-notice--bad[b-c4zrqtsy0u] {
    border-color: var(--cv-danger, currentColor);
    background: var(--cv-danger-soft, transparent);
    color: var(--cv-danger, inherit);
}

.confirm-notice__icon[b-c4zrqtsy0u] {
    flex: none;
    font-size: 20px;
}
/* /Components/Pages/ConnectedApps.razor.rz.scp.css */
/* /settings/connected-apps. Theme tokens only, so light and dark follow the app's palette. */

.apps-back[b-nutd8m7a0t] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.75rem;
    font-size: 0.8125rem;
    color: var(--cv-muted);
}

.apps-label[b-nutd8m7a0t] {
    display: block;
    margin: 0.75rem 0 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cv-heading);
}

.apps-steps[b-nutd8m7a0t] {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    list-style: decimal;
    font-size: 0.875rem;
    color: var(--cv-text);
}

.apps-steps li + li[b-nutd8m7a0t] {
    margin-top: 0.25rem;
}

.apps-url[b-nutd8m7a0t] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

.apps-items[b-nutd8m7a0t] {
    display: grid;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.apps-item[b-nutd8m7a0t] {
    padding: 0.875rem 1rem;
    min-width: 0;
}

.apps-break[b-nutd8m7a0t] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.apps-confirm[b-nutd8m7a0t] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--cv-danger);
    border-radius: 0.75rem;
    background: var(--cv-danger-soft);
}

.apps-notice[b-nutd8m7a0t] {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid;
    font-size: 0.875rem;
}

.apps-notice--ok[b-nutd8m7a0t] {
    background: var(--cv-success-soft);
    border-color: var(--cv-success);
    color: var(--cv-success);
}

.apps-notice--error[b-nutd8m7a0t] {
    background: var(--cv-danger-soft);
    border-color: var(--cv-danger);
    color: var(--cv-danger);
}
/* /Components/Pages/ConnectPage.razor.rz.scp.css */
/* /pages/connect. Colours come from the theme tokens, so both themes follow without a dark: twin. */

.connect-card[b-pq4t1s9e9f] {
    padding: 1.25rem;
}

/* The filled part of the progress strip and the budget meter. Not `bg-primary`: the legacy
   wwwroot/app.css gives `.bg-primary` button padding (8px 0) on phones, which turned the 4px
   active bar into a 16px block beside 4px inactive ones. */
.connect-fill[b-pq4t1s9e9f] {
    background: var(--cv-primary);
}

/* The Facebook button keeps its label on one line. It used to be `.cv-btn--block`
   (white-space: normal) inside a third-width column, and the Thai label broke in two. Full width
   on a phone, its own width from `sm` up with a floor so it never shrinks to a stub. */
.connect-cta[b-pq4t1s9e9f] {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .connect-card[b-pq4t1s9e9f] {
        padding: 1.5rem;
    }

    .connect-cta[b-pq4t1s9e9f] {
        width: auto;
        min-width: 18rem;
    }
}
/* /Components/Pages/McpConsent.razor.rz.scp.css */
/* /oauth/consent. Theme tokens only, so light and dark follow the app's palette. */

.consent-mark[b-h7xtcirrlc] {
    width: 2.75rem;
    height: 2.75rem;
}

.consent-title[b-h7xtcirrlc] {
    font-size: 1.375rem;
    line-height: 1.25;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.consent-facts[b-h7xtcirrlc] {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 0.375rem 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cv-border);
    border-radius: 0.75rem;
    font-size: 0.8125rem;
}

.consent-facts dt[b-h7xtcirrlc] {
    color: var(--cv-muted);
}

.consent-facts dd[b-h7xtcirrlc] {
    margin: 0;
    color: var(--cv-heading);
    overflow-wrap: anywhere;
}

.consent-group[b-h7xtcirrlc] {
    margin-top: 1rem;
    padding: 0;
    border: 0;
}

.consent-legend[b-h7xtcirrlc] {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cv-heading);
}

.consent-option[b-h7xtcirrlc] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--cv-border);
    border-radius: 0.75rem;
    font-size: 0.875rem;
    color: var(--cv-text);
    cursor: pointer;
}

.consent-option + .consent-option[b-h7xtcirrlc] {
    margin-top: 0.5rem;
}

.consent-option input[b-h7xtcirrlc] {
    margin-top: 0.2rem;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--cv-primary);
    flex: none;
}

.consent-scope[b-h7xtcirrlc] {
    font-weight: 600;
    color: var(--cv-heading);
}

.consent-kind[b-h7xtcirrlc] {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.consent-kind--read[b-h7xtcirrlc] {
    background: var(--cv-bg-subtle);
    color: var(--cv-muted);
}

.consent-kind--write[b-h7xtcirrlc] {
    background: var(--cv-primary-soft);
    color: var(--cv-primary);
}
/* /Components/Pages/Reels.razor.rz.scp.css */
/* /reels. Every colour is a theme token, so light and dark follow the app's own palette. */

.reels-label[b-flrhflou21] {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cv-heading);
}

.reels-notice[b-flrhflou21] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid;
    font-size: 0.875rem;
}

.reels-notice--ok[b-flrhflou21] {
    background: var(--cv-success-soft);
    border-color: var(--cv-success);
    color: var(--cv-success);
}

.reels-notice--error[b-flrhflou21] {
    background: var(--cv-danger-soft);
    border-color: var(--cv-danger);
    color: var(--cv-danger);
}

.reels-drop[b-flrhflou21] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 7rem;
    margin-top: 0.5rem;
    padding: 1rem;
    border: 2px dashed var(--cv-border);
    border-radius: 0.875rem;
    background: var(--cv-bg-subtle);
    cursor: pointer;
    text-align: center;
}

.reels-drop:focus-within[b-flrhflou21] {
    outline: 2px solid var(--cv-primary);
    outline-offset: 2px;
}

.reels-drop--busy[b-flrhflou21] {
    opacity: 0.6;
    cursor: progress;
}

/* The native input covers the whole drop area so a tap anywhere opens the picker (44px+ target). */
[b-flrhflou21] .reels-file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: inherit;
}

.reels-progress[b-flrhflou21] {
    height: 0.5rem;
    margin-top: 0.25rem;
    border-radius: 999px;
    background: var(--cv-bg-subtle);
    overflow: hidden;
}

.reels-progress__bar[b-flrhflou21] {
    height: 100%;
    background: var(--cv-primary);
    transition: width 0.2s ease;
}

.reels-caption[b-flrhflou21] {
    resize: vertical;
    min-height: 6rem;
}

.reels-choices[b-flrhflou21] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.5rem;
}

.reels-choice[b-flrhflou21] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cv-border);
    border-radius: 0.75rem;
    font-size: 0.875rem;
    color: var(--cv-text);
    cursor: pointer;
}

.reels-choice--on[b-flrhflou21] {
    border-color: var(--cv-primary);
    background: var(--cv-primary-soft);
    color: var(--cv-heading);
}

.reels-items[b-flrhflou21] {
    display: grid;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.reels-item[b-flrhflou21] {
    padding: 0.875rem 1rem;
    min-width: 0;
}

.reels-desc[b-flrhflou21] {
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reels-spinner[b-flrhflou21] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: reels-spin-b-flrhflou21 0.8s linear infinite;
}

@keyframes reels-spin-b-flrhflou21 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .reels-spinner[b-flrhflou21] { animation: none; }
    .reels-progress__bar[b-flrhflou21] { transition: none; }
}

.reels-schedule-row[b-flrhflou21] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--cv-border);
    border-radius: 0.75rem;
    background: var(--cv-bg-subtle);
}