/* /Pages/Explore.razor.rz.scp.css */
/* Discovery page — dark edition. The shell comes from brand.css; this file owns only the
   listing controls, the grid rhythm and the empty state. */

.explore-shell[b-akzjdbdfvg] {
    padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
}

.explore-header h1[b-akzjdbdfvg] {
    margin: 0 0 1rem;
    max-width: 18ch;
}

.explore-header p[b-akzjdbdfvg] {
    margin: 0 0 2.5rem;
    max-width: 56ch;
    color: var(--jl-ink-2);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
}

/* Controls ------------------------------------------------------------------ */

.explore-controls[b-akzjdbdfvg] {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: stretch;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--jl-line);
    border-radius: var(--jl-radius);
    background: var(--jl-surface);
}

.explore-search[b-akzjdbdfvg] {
    position: relative;
    flex: 1 1 260px;
    display: flex;
    align-items: center;
}

.explore-search > i[b-akzjdbdfvg] {
    position: absolute;
    left: .95rem;
    color: var(--jl-ink-3);
    pointer-events: none;
}

.explore-search input[b-akzjdbdfvg] {
    width: 100%;
    padding: .68rem .95rem .68rem 2.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .95rem;
    background: rgba(255, 255, 255, .05);
    color: var(--jl-ink);
}

.explore-search input[b-akzjdbdfvg]::placeholder { color: var(--jl-ink-3); }

.explore-search input:focus[b-akzjdbdfvg] {
    outline: 2px solid var(--jl-sky);
    outline-offset: 2px;
    border-color: transparent;
}

.explore-select[b-akzjdbdfvg] {
    flex: 0 1 190px;
    padding: .68rem 2.2rem .68rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .05);
    color: var(--jl-ink);
    font-size: .95rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(245,247,250,.5)'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 16px;
}

.explore-select option[b-akzjdbdfvg] {
    background: #0e1013;
    color: var(--jl-ink);
}

.explore-select:focus[b-akzjdbdfvg] {
    outline: 2px solid var(--jl-sky);
    outline-offset: 2px;
}

.explore-controls .btn[b-akzjdbdfvg] { white-space: nowrap; }

.explore-count[b-akzjdbdfvg] {
    margin: 0 0 1.25rem;
    color: var(--jl-ink-3);
    font-size: .88rem;
    letter-spacing: .02em;
}

/* Grid ---------------------------------------------------------------------- */

.explore-grid[b-akzjdbdfvg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.1rem;
    align-items: stretch;
}

.explore-empty[b-akzjdbdfvg] {
    padding: 4rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--jl-line-strong);
    border-radius: var(--jl-radius);
    color: var(--jl-ink-2);
    background: var(--jl-surface);
}

.explore-empty > i[b-akzjdbdfvg] {
    font-size: 2rem;
    color: var(--jl-ink-3);
    margin-bottom: .9rem;
}

.explore-empty h2[b-akzjdbdfvg] {
    font-size: 1.3rem;
    margin: 0 0 .6rem;
    font-family: var(--jl-font-display);
    letter-spacing: -.02em;
}

.explore-empty p[b-akzjdbdfvg] { margin: 0 0 1.25rem; color: var(--jl-ink-2); }

/* Paging -------------------------------------------------------------------- */

.explore-paging[b-akzjdbdfvg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}

.explore-paging-status[b-akzjdbdfvg] {
    color: var(--jl-ink-3);
    font-size: .88rem;
}

/* The disabled paging controls are spans, not links, so they need the disabled look
   applied explicitly - .btn.disabled only styles as disabled on an anchor or button. */
.explore-paging .btn.disabled[b-akzjdbdfvg] {
    pointer-events: none;
    opacity: .4;
}

@media (max-width: 575.98px) {
    .explore-controls > .btn[b-akzjdbdfvg] {
        flex: 1 1 auto;
    }

    .explore-select[b-akzjdbdfvg] {
        flex: 1 1 100%;
    }
}
/* /Pages/Index.razor.rz.scp.css */
/* The old landing-page rules (.hero-logo, .feature-card, .showcase-card) are gone with the
   redesign. The home page now composes from the global brand.css primitives, so nothing
   here would apply - the file is kept only so the component still has its scoped stylesheet
   slot if one is needed again. */
/* /Pages/Links/Manage.razor.rz.scp.css */
/* Links page cards on the index screen.
   The header background is set inline from the page's configured gradient. */

.links-page-card[b-tfm0jzzukc] {
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .1);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .links-page-card:hover[b-tfm0jzzukc] {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
    }

/* Animated gradient card */
.links-page-card.animated-gradient-card[b-tfm0jzzukc] {
    background: linear-gradient(-45deg, var(--gradient-start), var(--gradient-end));
    background-size: 400% 400%;
    animation: gradient-b-tfm0jzzukc 15s ease infinite;
}

/* Nothing inside the card paints its own background. The owner's gradient is the backdrop
   and the spacing carries the structure, exactly as on the public page and in the editor
   preview.

   This card used to wash .card-body and .card-footer in rgba(255,255,255,.8) and put a
   rgba(0,0,0,.3) band behind the header. Between them the gradient was almost invisible, so
   the card did not look like the page it was previewing. */

.links-page-card-header[b-tfm0jzzukc] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* Sized by font-size because this is a Font Awesome glyph, not an SVG. */
.links-page-logo[b-tfm0jzzukc] {
    font-size: 22px;
    flex: none;
    color: inherit;
}

.links-page-card-title[b-tfm0jzzukc] {
    margin: 0;
    color: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Body text sits directly on the gradient now, so it is white like the title. It used to
   rely on Bootstrap's text-muted, which is a fixed grey - around 1.3:1 against these
   gradients - and it was only ever readable because the white wash was behind it. */
.links-page-card-description[b-tfm0jzzukc] {
    margin: 0;
    color: rgba(255, 255, 255, .92);
    font-size: .875rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    overflow-wrap: anywhere;
}

.links-page-card-meta[b-tfm0jzzukc] {
    color: rgba(255, 255, 255, .85);
    font-size: .8rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* The link-count badge. Not bg-primary: white on #0d6efd is 3.6:1, below the 4.5:1 a label
   this small needs, which is why its text was so hard to read. #0369A1 gives 5.9:1. */
.links-page-badge-links[b-tfm0jzzukc] {
    background-color: #0369a1;
    color: #fff;
}

.links-page-card .card-footer[b-tfm0jzzukc] {
    border-top: 1px solid rgba(255, 255, 255, .35);
}

/* Action row: view the public page, delete it. Right-aligned and on their own line, since
   the badges they used to share this row with now live in the card body only. */
.links-page-card-actions[b-tfm0jzzukc] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1rem;
}

/* Solid white squares with a coloured glyph, matching the share buttons on the public page.
   These were outline buttons before: `btn-outline-secondary` and `btn-outline-danger` draw a
   thin border and a coloured glyph straight onto the gradient, which is why they read as
   washed out and cramped. A white chip gives every icon the same background to sit on, so
   they stay legible whatever the owner's gradient is.

   z-index lifts them above the stretched link that makes the rest of the card clickable -
   without it the overlay would swallow the click and open the editor instead. */
.links-page-action[b-tfm0jzzukc] {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background-color: rgba(255, 255, 255, .92);
    color: #083a52;
    font-size: .95rem;
    line-height: 1;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease, transform .12s ease;
}

    .links-page-action:hover[b-tfm0jzzukc],
    .links-page-action:focus-visible[b-tfm0jzzukc] {
        background-color: #fff;
        color: #083a52;
        transform: translateY(-1px);
    }

/* Focus ring in the app's cyan, so it is visible on any gradient. */
.links-page-action:focus-visible[b-tfm0jzzukc] {
    outline: 2px solid #7fe0ff;
    outline-offset: 2px;
}

.links-page-action-danger[b-tfm0jzzukc] {
    color: #b02a37;
}

    .links-page-action-danger:hover[b-tfm0jzzukc],
    .links-page-action-danger:focus-visible[b-tfm0jzzukc] {
        color: #8b1e28;
        background-color: #fff;
    }

/* The stretched link that makes the card clickable. It has no content of its own - the
   ::after Bootstrap generates covers the card - so it needs a name for screen readers and
   must not add any layout of its own. */
.links-page-card-open[b-tfm0jzzukc] {
    text-decoration: none;
}

/* Bootstrap's .card is the positioning context the stretched link needs, and .card sets it.
   Stated here because the whole technique silently stops working without it. */
.links-page-card[b-tfm0jzzukc] {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .links-page-action[b-tfm0jzzukc],
    .links-page-action:hover[b-tfm0jzzukc],
    .links-page-action:focus-visible[b-tfm0jzzukc] {
        transition: none;
        transform: none;
    }
}

@keyframes gradient-b-tfm0jzzukc {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/* /Pages/Links/ManageLinksPage.razor.rz.scp.css */
/* Preview of the public links page, shown inside the manage screen.
   The panel background is set inline from the page's configured gradient.

   NOTE: the row/header/footer rules below deliberately mirror the declarations in
   PublicLinksPage.razor.css so the preview matches what visitors see. Blazor scoped CSS
   cannot be shared between components, so when one side changes, change the other. */

.links-preview-column[b-4fr6nzsfu1] {
    display: flex;
    flex-direction: column;
}

/* Branding banner shown above the card, mirroring .public-brand-banner */

.links-preview-brand-banner[b-4fr6nzsfu1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .8rem 1rem;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    color: #1b6ec2;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
}

    .links-preview-brand-banner:hover[b-4fr6nzsfu1],
    .links-preview-brand-banner:focus[b-4fr6nzsfu1] {
        color: #14538f;
        text-decoration: underline;
    }

.links-preview-brand-logo[b-4fr6nzsfu1] {
    width: 26px;
    height: auto;
    flex: none;
}

.links-preview-panel[b-4fr6nzsfu1] {
    flex: 1 1 auto;
    padding: 2rem 1.5rem;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
}

/* Panel header, mirroring .public-card-header + .public-card-description */

.links-preview-header[b-4fr6nzsfu1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.links-preview-description[b-4fr6nzsfu1] {
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, .92);
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    overflow-wrap: anywhere;
}

/* Sized by font-size because this is a Font Awesome glyph, not an SVG. */
.links-preview-logo[b-4fr6nzsfu1] {
    font-size: 34px;
    flex: none;
    color: inherit;
}

.links-preview-title[b-4fr6nzsfu1] {
    margin: 0;
    color: inherit;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Link rows, mirroring .public-link-row */

.links-preview-list[b-4fr6nzsfu1] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.links-preview-row[b-4fr6nzsfu1] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

    .links-preview-row:hover[b-4fr6nzsfu1] {
        color: inherit;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(15, 23, 42, .2);
    }

    /* Pinned links are highlighted, exactly as on the public page */
    .links-preview-row.pinned[b-4fr6nzsfu1] {
        background: linear-gradient(135deg, #ffdd87 0%, #f6c85f 100%);
        border-color: #ecc25c;
    }

    /* Manage-only state: inactive links are hidden from visitors */
    .links-preview-row.inactive[b-4fr6nzsfu1] {
        opacity: .55;
    }

    /* Scheduled and expired links are also not visible to visitors, so they are dimmed the
       same way — but they stay in the list so the owner can still edit, reschedule or delete
       them. The badge is what tells the two cases apart. */
    .links-preview-row.scheduled[b-4fr6nzsfu1],
    .links-preview-row.expired[b-4fr6nzsfu1] {
        opacity: .55;
    }

    .links-preview-row.dragging[b-4fr6nzsfu1] {
        opacity: .4;
    }

    .links-preview-row.drag-over[b-4fr6nzsfu1] {
        outline: 2px dashed rgba(255, 255, 255, .9);
        outline-offset: 2px;
    }

.preview-link-icon[b-4fr6nzsfu1] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    color: #4a6cf7;
    font-size: 1.6rem;
}

.links-preview-row.pinned .preview-link-icon[b-4fr6nzsfu1] {
    color: #c0392b;
}

/* The fallback glyph is a Font Awesome icon now, so it is sized by font-size rather than
   being stretched to fill the 2rem box the way the old inline SVG was. */
.preview-link-icon i[b-4fr6nzsfu1] {
    font-size: 1.05rem;
}

.preview-link-body[b-4fr6nzsfu1] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.preview-link-title[b-4fr6nzsfu1] {
    color: #212529;
    font-size: 1.1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.preview-link-description[b-4fr6nzsfu1] {
    color: #6c757d;
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.preview-link-category[b-4fr6nzsfu1] {
    align-self: flex-start;
    margin-top: .35rem;
    padding: .25rem .7rem;
    background-color: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 999px;
    color: #495057;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.links-preview-row.pinned .preview-link-category[b-4fr6nzsfu1] {
    background-color: rgba(255, 255, 255, .78);
    border-color: #e6b94e;
}

/* Status badges for a link that is not currently live. They sit in the row body, so they
   read alongside the title rather than competing with the hover controls on the right. */
.preview-link-badge[b-4fr6nzsfu1] {
    align-self: flex-start;
    margin-top: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

.preview-link-badge-scheduled[b-4fr6nzsfu1] {
    background-color: #0a7cc1;
}

.preview-link-badge-expired[b-4fr6nzsfu1] {
    background-color: #6c757d;
}

.preview-link-badge-hidden[b-4fr6nzsfu1] {
    background-color: #495057;
}

.preview-link-chevron[b-4fr6nzsfu1] {
    flex: none;
    color: #c7ccd1;
    font-size: 1.35rem;
}

.links-preview-row.pinned .preview-link-chevron[b-4fr6nzsfu1] {
    color: #a9782c;
}

/* Manage-only controls, hidden until the row is hovered or focused so the
   default appearance is identical to the public row. */
.preview-row-controls[b-4fr6nzsfu1] {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .4rem;
    background-color: rgba(255, 255, 255, .95);
    border-radius: 9px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .22);
    opacity: 0;
    transition: opacity .12s ease;
}

.links-preview-row:hover .preview-row-controls[b-4fr6nzsfu1],
.links-preview-row:focus-within .preview-row-controls[b-4fr6nzsfu1] {
    opacity: 1;
}

.preview-row-clicks[b-4fr6nzsfu1] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    background-color: #0dcaf0;
    border-radius: 999px;
    color: #05323d;
    font-size: .72rem;
    font-weight: 600;
}

.preview-row-grip[b-4fr6nzsfu1] {
    color: #adb5bd;
    cursor: grab;
    padding: 0 .1rem;
}

    .preview-row-grip:active[b-4fr6nzsfu1] {
        cursor: grabbing;
    }

.row-btn[b-4fr6nzsfu1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: #fff;
}

    .row-btn:hover[b-4fr6nzsfu1],
    .row-btn:focus[b-4fr6nzsfu1] {
        color: #fff;
        filter: brightness(.92);
    }

.row-btn-edit[b-4fr6nzsfu1] {
    background-color: #0d6efd;
}

.row-btn-delete[b-4fr6nzsfu1] {
    background-color: #dc3545;
}

/* Add/edit form card: editor only, no public equivalent */
.links-preview-form[b-4fr6nzsfu1] {
    padding: 1rem;
    margin-bottom: .75rem;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .2);
}

.links-preview-empty[b-4fr6nzsfu1] {
    padding: 1rem;
    background-color: rgba(255, 255, 255, .92);
    border-radius: 12px;
    color: #212529;
    text-align: center;
}

/* The empty state doubles as the call to action, so it has to look interactive. A plain
   button has a border, its own font and a centered-by-default box, all of which have to be
   neutralised to keep the card appearance while still behaving like a button. */
.links-preview-empty-action[b-4fr6nzsfu1] {
    display: block;
    width: 100%;
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.links-preview-empty-action:hover[b-4fr6nzsfu1] {
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(10, 124, 193, .35);
}

/* Visible focus ring for keyboard users, matching the hover treatment. */
.links-preview-empty-action:focus-visible[b-4fr6nzsfu1] {
    outline: none;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(10, 124, 193, .55);
}

/* Footer, mirroring .public-card-footer */

.links-preview-footer[b-4fr6nzsfu1] {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .35);
    text-align: center;
}

    .links-preview-footer[b-4fr6nzsfu1]  .social-sharing h6 {
        color: rgba(255, 255, 255, .9);
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .links-preview-footer[b-4fr6nzsfu1]  .social-sharing .btn {
        background-color: rgba(255, 255, 255, .92);
    }

.links-preview-created-with[b-4fr6nzsfu1] {
    display: block;
    margin-top: .85rem;
    color: rgba(255, 255, 255, .85);
}

    .links-preview-created-with a[b-4fr6nzsfu1] {
        color: #fff;
        font-weight: 600;
        text-decoration: none;
    }

        .links-preview-created-with a:hover[b-4fr6nzsfu1] {
            text-decoration: underline;
        }

@media (max-width: 575.98px) {
    .links-preview-panel[b-4fr6nzsfu1] {
        padding: 1.5rem 1.1rem;
    }

    .links-preview-title[b-4fr6nzsfu1] {
        font-size: 1.6rem;
    }

    .links-preview-row[b-4fr6nzsfu1] {
        gap: .75rem;
        padding: .85rem .9rem;
    }

    .preview-link-title[b-4fr6nzsfu1] {
        font-size: 1rem;
    }
}
/* /Pages/Links/PublicLinksPage.razor.rz.scp.css */
/* Public links page: a single centered card painted with the owner's colours, floating on
   the platform's dark canvas. The dark backdrop is deliberate — it makes the owner's
   gradient the one lit object on the page, which is the whole product promise.

   The canvas itself (.public-page-shell) lives in brand.css because two layouts render it;
   everything here is scoped to the component that owns the markup inside the card. */

.public-links-wrapper[b-t7qaxytgo2] {
    width: 100%;
    max-width: 680px;
}

.public-message-card[b-t7qaxytgo2] {
    width: 100%;
    max-width: 680px;
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 18px;
    color: #f5f7fa;
}

/* Branding banner above the card */

.public-brand-banner[b-t7qaxytgo2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .65rem 1.1rem;
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #f5f7fa;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
}

    .public-brand-banner:hover[b-t7qaxytgo2],
    .public-brand-banner:focus[b-t7qaxytgo2] {
        color: #fff;
        border-color: rgba(255, 255, 255, .18);
        text-decoration: none;
    }

.public-brand-logo[b-t7qaxytgo2] {
    width: 24px;
    height: auto;
    flex: none;
}

/* Main card */

.public-card[b-t7qaxytgo2] {
    padding: 2rem 1.5rem;
    border-radius: 20px;
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85);
}

/* Animated gradient card */
.public-card.animated-gradient-card[b-t7qaxytgo2] {
    background: linear-gradient(-45deg, var(--gradient-start), var(--gradient-end));
    background-size: 400% 400%;
    animation: gradient-b-t7qaxytgo2 15s ease infinite;
}

/* Deliberately nothing here painting a background behind the description, the list or the
   footer. The owner's gradient is the backdrop and the spacing alone separates the bands.
   An earlier version washed those three in rgba(255,255,255,.8) with a backdrop blur, which
   is why the live page did not match the editor's preview - the preview has never done it. */

.public-card-header[b-t7qaxytgo2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* Sized by font-size because this is a Font Awesome glyph, not an SVG. */
.public-card-logo[b-t7qaxytgo2] {
    font-size: 34px;
    flex: none;
    color: inherit;
}

.public-card-title[b-t7qaxytgo2] {
    margin: 0;
    color: inherit;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}

.public-card-description[b-t7qaxytgo2] {
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, .92);
    text-align: center;
    /* Matches the preview. Without it the description loses definition on a light gradient,
       which is most of them - the palette runs from a pale sky to a deep navy. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    overflow-wrap: anywhere;
}

/* Link rows */

.public-links-list[b-t7qaxytgo2] {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.public-link-row[b-t7qaxytgo2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    color: inherit;
    text-decoration: none;
    transition: transform .14s ease, box-shadow .14s ease;
}

    .public-link-row:hover[b-t7qaxytgo2],
    .public-link-row:focus[b-t7qaxytgo2] {
        color: inherit;
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
    }

    /* Pinned links are highlighted and sorted first */
    .public-link-row.pinned[b-t7qaxytgo2] {
        background: linear-gradient(135deg, #ffdd87 0%, #f6c85f 100%);
        border-color: #ecc25c;
    }

.public-link-icon[b-t7qaxytgo2] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    color: #4a6cf7;
    font-size: 1.6rem;
}

.public-link-row.pinned .public-link-icon[b-t7qaxytgo2] {
    color: #c0392b;
}

/* The fallback glyph is a Font Awesome icon now, so it is sized by font-size rather than
   being stretched to fill the 2rem box the way the old inline SVG was. */
.public-link-icon i[b-t7qaxytgo2] {
    font-size: 1.05rem;
}

.public-link-body[b-t7qaxytgo2] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.public-link-title[b-t7qaxytgo2] {
    color: #14171a;
    font-size: 1.1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.public-link-description[b-t7qaxytgo2] {
    color: #6c757d;
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.public-link-category[b-t7qaxytgo2] {
    align-self: flex-start;
    margin-top: .35rem;
    padding: .25rem .7rem;
    background-color: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 999px;
    color: #495057;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.public-link-row.pinned .public-link-category[b-t7qaxytgo2] {
    background-color: rgba(255, 255, 255, .78);
    border-color: #e6b94e;
}

.public-link-chevron[b-t7qaxytgo2] {
    flex: none;
    color: #c7ccd1;
    font-size: 1.35rem;
}

.public-link-row.pinned .public-link-chevron[b-t7qaxytgo2] {
    color: #a9782c;
}

.public-links-empty[b-t7qaxytgo2] {
    padding: 1rem;
    background-color: rgba(255, 255, 255, .92);
    border-radius: 14px;
    color: #14171a;
    text-align: center;
}

/* Footer inside the card */

.public-card-footer[b-t7qaxytgo2] {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .35);
    text-align: center;
}

    .public-card-footer[b-t7qaxytgo2]  .social-sharing h6 {
        color: rgba(255, 255, 255, .9);
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .public-card-footer[b-t7qaxytgo2]  .social-sharing .btn {
        background-color: rgba(255, 255, 255, .92);
    }

.public-created-with[b-t7qaxytgo2] {
    display: block;
    margin-top: .85rem;
    color: rgba(255, 255, 255, .85);
}

    .public-created-with a[b-t7qaxytgo2] {
        color: #fff;
        font-weight: 600;
        text-decoration: none;
    }

        .public-created-with a:hover[b-t7qaxytgo2] {
            text-decoration: underline;
        }

@media (max-width: 575.98px) {
    .public-card[b-t7qaxytgo2] {
        padding: 1.5rem 1.1rem;
    }

    .public-card-title[b-t7qaxytgo2] {
        font-size: 1.6rem;
    }

    .public-link-row[b-t7qaxytgo2] {
        gap: .75rem;
        padding: .85rem .9rem;
    }

    .public-link-title[b-t7qaxytgo2] {
        font-size: 1rem;
    }
}

@keyframes gradient-b-t7qaxytgo2 {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/* /Shared/LinksPageCard.razor.rz.scp.css */
/* Discovery card. Shared by /explore and the home showcase, so a page looks the same
   wherever a visitor first meets it. Dark edition — the card is a quiet panel that lifts
   on hover, and the owner's own gradient is the only saturated colour on it. */

.page-card-link[b-18ov6xrcfd] {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: var(--jl-radius);
}

.page-card-link:focus-visible[b-18ov6xrcfd] {
    outline: 2px solid var(--jl-sky);
    outline-offset: 3px;
}

.page-card[b-18ov6xrcfd] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--jl-radius);
    background: linear-gradient(170deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
    border: 1px solid var(--jl-line);
    box-shadow: 0 30px 70px -50px rgba(0, 0, 0, .9);
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, box-shadow .25s ease;
}

.page-card-link:hover .page-card[b-18ov6xrcfd],
.page-card-link:focus-visible .page-card[b-18ov6xrcfd] {
    transform: translateY(-5px);
    border-color: var(--jl-line-strong);
    box-shadow: 0 40px 90px -45px rgba(0, 175, 240, .55);
}

/* The header carries the page's own gradient, which is the one piece of the owner's
   styling a card can honestly show without reproducing their whole theme. */
.page-card-header[b-18ov6xrcfd] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 96px;
    padding: 1rem 1.1rem;
    background: linear-gradient(135deg, var(--gradient-start, #667eea) 0%, var(--gradient-end, #764ba2) 100%);
    color: #fff;
}

.page-card-header[b-18ov6xrcfd]::after {
    /* Keeps the title legible over a light gradient without drawing another box. */
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .3);
    pointer-events: none;
}

.page-card-image[b-18ov6xrcfd] {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: .6rem;
    flex: 0 0 auto;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .8);
}

/* Sized by font-size because this is a Font Awesome glyph, not an SVG. */
.page-card-mark[b-18ov6xrcfd] {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    font-size: 1.35rem;
    color: #fff;
    opacity: .95;
}

.page-card-title[b-18ov6xrcfd] {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--jl-font-display);
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
    /* Two lines then ellipsis: page names are free text and one long one must not make its
       card taller than its neighbours in the row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.page-card-featured[b-18ov6xrcfd] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #ffe9a8;
    font-size: .7rem;
}

.page-card-body[b-18ov6xrcfd] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: .7rem;
    padding: 1rem 1.1rem 1.1rem;
}

.page-card-description[b-18ov6xrcfd] {
    margin: 0;
    color: var(--jl-ink-2);
    font-size: .875rem;
    line-height: 1.5;
    /* Three lines keeps every card in a row the same height regardless of description. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-card-stats[b-18ov6xrcfd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: auto;
    font-size: .78rem;
    color: var(--jl-ink-3);
}

.page-card-stats > span[b-18ov6xrcfd] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.page-card-stats i[b-18ov6xrcfd] { color: var(--jl-ink-3); }

.page-card-category[b-18ov6xrcfd] {
    padding: .18rem .6rem;
    border-radius: 999px;
    background: rgba(0, 175, 240, .12);
    border: 1px solid rgba(0, 175, 240, .28);
    color: var(--jl-sky);
    font-weight: 600;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .page-card[b-18ov6xrcfd],
    .page-card-link:hover .page-card[b-18ov6xrcfd],
    .page-card-link:focus-visible .page-card[b-18ov6xrcfd] {
        transition: none;
        transform: none;
    }
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-hdiikcw58v] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-hdiikcw58v] {
    flex: 1;
}

.sidebar[b-hdiikcw58v] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-hdiikcw58v] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-hdiikcw58v]  a, .top-row .btn-link[b-hdiikcw58v] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-hdiikcw58v] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-hdiikcw58v] {
        display: none;
    }

    .top-row.auth[b-hdiikcw58v] {
        justify-content: space-between;
    }

    .top-row a[b-hdiikcw58v], .top-row .btn-link[b-hdiikcw58v] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-hdiikcw58v] {
        flex-direction: row;
    }

    .sidebar[b-hdiikcw58v] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-hdiikcw58v] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-hdiikcw58v], article[b-hdiikcw58v] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-gt1wfeb8wh] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-gt1wfeb8wh] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-gt1wfeb8wh] {
    font-size: 1.1rem;
}

.navbar-brand img[b-gt1wfeb8wh] {
    display: block;
    height: 1.6rem;
    width: auto;
}

.oi[b-gt1wfeb8wh] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-gt1wfeb8wh] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-gt1wfeb8wh] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-gt1wfeb8wh] {
        padding-bottom: 1rem;
    }

    .nav-item[b-gt1wfeb8wh]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-gt1wfeb8wh]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-gt1wfeb8wh]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-gt1wfeb8wh] {
        display: none;
    }

    .collapse[b-gt1wfeb8wh] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-gt1wfeb8wh] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Shared/PageMediaCarousel.razor.rz.scp.css */
/* Media carousel holding the page image and the QR code.
   Swiping is native CSS scroll snapping; the arrows are progressive enhancement. */

.page-carousel[b-i7s1q31zd0] {
    position: relative;
    margin: 0 auto 1.75rem;
}

.carousel-viewport[b-i7s1q31zd0] {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    /* the dots and arrows communicate position, so hide the native scrollbar */
    scrollbar-width: none;
}

    .carousel-viewport[b-i7s1q31zd0]::-webkit-scrollbar {
        display: none;
    }

.carousel-slide[b-i7s1q31zd0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 100%;
    padding: .875rem;
    background-color: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
    scroll-snap-align: center;
    text-align: center;
}

    .carousel-slide img[b-i7s1q31zd0] {
        display: block;
        height: auto;
    }

.carousel-slide-image img[b-i7s1q31zd0] {
    width: 100%;
    max-width: 320px;
    border-radius: 10px;
}

.carousel-slide-qr img[b-i7s1q31zd0] {
    width: 240px;
    max-width: 100%;
}

.carousel-slide small[b-i7s1q31zd0] {
    display: block;
    margin-top: .5rem;
    color: #6c757d;
}

.carousel-arrow[b-i7s1q31zd0] {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .92);
    color: #343a40;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .28);
    transform: translateY(-50%);
}

    .carousel-arrow:hover[b-i7s1q31zd0],
    .carousel-arrow:focus[b-i7s1q31zd0] {
        background-color: #fff;
        color: #111;
    }

.carousel-arrow-prev[b-i7s1q31zd0] {
    left: .4rem;
}

.carousel-arrow-next[b-i7s1q31zd0] {
    right: .4rem;
}

.carousel-dots[b-i7s1q31zd0] {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-top: .75rem;
}

.carousel-dot[b-i7s1q31zd0] {
    width: .55rem;
    height: .55rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .45);
}

    .carousel-dot.active[b-i7s1q31zd0] {
        background-color: #fff;
    }

@media (max-width: 575.98px) {
    .carousel-slide-image img[b-i7s1q31zd0] {
        max-width: 240px;
    }

    .carousel-slide-qr img[b-i7s1q31zd0] {
        width: 180px;
    }
}
/* /Shared/PublicLayout.razor.rz.scp.css */
/* The .public-page-shell rule that used to live here has moved to wwwroot/css/site.css.

   Scoped CSS compiles a rule to `.public-page-shell[b-xxxx]`, and the attribute is only
   put on markup that THIS component renders. MainLayout also renders the public shell
   (for tenant subdomains), so as a scoped rule it silently failed to apply there and the
   links card rendered left-aligned instead of centred.

   This file is kept rather than deleted so the move is visible in history and so a future
   layout-specific rule has an obvious home. */