/* /Pages/Explore.razor.rz.scp.css */
/* Discovery page. Uses the public shell rather than the app layout, so a visitor arriving
   from a link preview gets a page that looks like the product, not like a dashboard. */

.explore-shell[b-akzjdbdfvg] {
    width: min(1180px, 100% - 2rem);
    margin: 0 auto;
    padding: 2.5rem 0 4rem;
}

.explore-header h1[b-akzjdbdfvg] {
    margin: 0 0 .5rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: #083a52;
}

.explore-header p[b-akzjdbdfvg] {
    margin: 0 0 1.75rem;
    max-width: 62ch;
    color: #4a6070;
    font-size: 1.02rem;
}

.explore-controls[b-akzjdbdfvg] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: stretch;
    margin-bottom: 1.25rem;
}

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

.explore-search > i[b-akzjdbdfvg] {
    position: absolute;
    left: .85rem;
    color: #7d94a3;
    pointer-events: none;
}

.explore-search input[b-akzjdbdfvg] {
    width: 100%;
    padding: .6rem .9rem .6rem 2.4rem;
    border: 1px solid rgba(8, 58, 82, .18);
    border-radius: .5rem;
    font-size: .95rem;
    background: #fff;
    color: #083a52;
}

.explore-search input:focus[b-akzjdbdfvg] {
    outline: 2px solid #0a7cc1;
    outline-offset: 1px;
    border-color: #0a7cc1;
}

.explore-select[b-akzjdbdfvg] {
    flex: 0 1 190px;
    padding: .6rem .75rem;
    border: 1px solid rgba(8, 58, 82, .18);
    border-radius: .5rem;
    background: #fff;
    color: #083a52;
    font-size: .95rem;
}

.explore-count[b-akzjdbdfvg] {
    margin: 0 0 1rem;
    color: #5b7285;
    font-size: .9rem;
}

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

.explore-empty[b-akzjdbdfvg] {
    padding: 3.5rem 1.5rem;
    text-align: center;
    border: 1px dashed rgba(8, 58, 82, .2);
    border-radius: .75rem;
    color: #4a6070;
    background: rgba(127, 224, 255, .06);
}

.explore-empty > i[b-akzjdbdfvg] {
    font-size: 2rem;
    color: #7d94a3;
    margin-bottom: .75rem;
}

.explore-empty h2[b-akzjdbdfvg] {
    font-size: 1.15rem;
    color: #083a52;
    margin: 0 0 .5rem;
}

.explore-empty p[b-akzjdbdfvg] {
    margin: 0 0 1rem;
}

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

.explore-paging-status[b-akzjdbdfvg] {
    color: #5b7285;
    font-size: .9rem;
}

/* 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: .5;
}

@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 */
.hero-logo[b-jgefxcwrks] {
    width: min(440px, 88%);
    height: auto;
}

/* Feature cards. Informational by default; the ones that lead somewhere light up in brand
   cyan for signed-in users and lift on hover. Bootstrap's .card already provides the
   positioning the stretched link needs. */
.feature-card[b-jgefxcwrks] {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    transition: transform .15s ease, box-shadow .15s ease;
}

.feature-card-link[b-jgefxcwrks] {
    box-shadow: 0 3px 12px rgba(0, 175, 240, .22);
}

.feature-card-link .h4 i[b-jgefxcwrks] {
    color: #00aff0;
}

.feature-card-link:hover[b-jgefxcwrks],
.feature-card-link:focus-within[b-jgefxcwrks] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 175, 240, .32);
}

@media (prefers-reduced-motion: reduce) {
    .feature-card[b-jgefxcwrks],
    .feature-card-link:hover[b-jgefxcwrks],
    .feature-card-link:focus-within[b-jgefxcwrks] {
        transition: none;
        transform: none;
    }
}

/* Wide showcase card. Spans the full width of the content column so it reads as a shelf of
   real pages rather than as a fourth feature tile. */
.showcase-card[b-jgefxcwrks] {
    margin-top: 2.5rem;
    padding: 1.5rem;
    border-radius: .9rem;
    background: linear-gradient(160deg, rgba(0, 175, 240, .07) 0%, rgba(10, 124, 193, .04) 100%);
    border: 1px solid rgba(10, 124, 193, .16);
}

.showcase-head[b-jgefxcwrks] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    text-align: left;
}

.showcase-head h2[b-jgefxcwrks] {
    margin: 0 0 .25rem;
    font-size: 1.3rem;
    color: #083a52;
}

.showcase-head p[b-jgefxcwrks] {
    margin: 0;
    color: #4a6070;
    font-size: .95rem;
}

.showcase-cta[b-jgefxcwrks] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.showcase-grid[b-jgefxcwrks] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

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

    .showcase-cta[b-jgefxcwrks] {
        width: 100%;
    }
}
/* /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;
    }

    .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;
}

.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 page's colors,
   with a justlinks.page banner above it. */

.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: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .1);
}

/* Branding banner above the card */

.public-brand-banner[b-t7qaxytgo2] {
    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;
}

    .public-brand-banner:hover[b-t7qaxytgo2],
    .public-brand-banner:focus[b-t7qaxytgo2] {
        color: #14538f;
        text-decoration: underline;
    }

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

/* Main card */

.public-card[b-t7qaxytgo2] {
    padding: 2rem 1.5rem;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
}

/* 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: .85rem;
}

.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: 12px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
    color: inherit;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

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

    /* 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: #212529;
    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: 12px;
    color: #212529;
    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 page showcase, so a page looks the same
   wherever a visitor first meets it. */

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

.page-card-link:focus-visible[b-18ov6xrcfd] {
    outline: 3px solid #0a7cc1;
    outline-offset: 2px;
}

.page-card[b-18ov6xrcfd] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: .75rem;
    background: #fff;
    border: 1px solid rgba(8, 58, 82, .1);
    box-shadow: 0 1px 3px rgba(8, 58, 82, .1);
    transition: transform .15s ease, box-shadow .15s ease;
}

.page-card-link:hover .page-card[b-18ov6xrcfd],
.page-card-link:focus-visible .page-card[b-18ov6xrcfd] {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(10, 124, 193, .25);
}

/* 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: .6rem;
    min-height: 92px;
    padding: .9rem 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, .28);
    pointer-events: none;
}

.page-card-image[b-18ov6xrcfd] {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: .5rem;
    flex: 0 0 auto;
}

/* 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-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    /* 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: .6rem;
    padding: .85rem 1rem 1rem;
}

.page-card-description[b-18ov6xrcfd] {
    margin: 0;
    color: #4a6070;
    font-size: .875rem;
    line-height: 1.45;
    /* 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: .5rem;
    margin-top: auto;
    font-size: .78rem;
    color: #5b7285;
}

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

.page-card-category[b-18ov6xrcfd] {
    padding: .15rem .5rem;
    border-radius: 999px;
    background: rgba(0, 175, 240, .12);
    color: #0a7cc1;
    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. */