/* ---------------------------------------------------
    FSC PUBLIC PORTAL — Licensees
    Extends fsc-portal.css (load after it)
    Bootstrap 5.3 | Bootstrap Icons | DataTables 2
    WCAG 2.1 AA
----------------------------------------------------- */

/* ---------------------------------------------------
    Hero / tiles (custom SVG sizing)
----------------------------------------------------- */
.fsc-hero__icon .fsc-svg,
.fsc-icon-tile .fsc-svg {
    width: 1em;
    height: 1em;
}

/* ---------------------------------------------------
    Search fields
----------------------------------------------------- */
.fsc-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .fsc-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .fsc-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.fsc-field {
    min-width: 0;
}

/* ---------------------------------------------------
    Toolbar
----------------------------------------------------- */
/*.fsc-page-length {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.fsc-toolbar__label {
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    color: var(--fsc-text);
    white-space: nowrap;
}*/
.fsc-toolbar__meta {
    flex: 1 0 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.fsc-page-length {
    display: flex;
    align-items: center;
}
.fsc-chip {
    cursor: pointer;
}

    .fsc-chip:focus-visible {
        outline: 3px solid var(--fsc-focus-light);
        outline-offset: 2px;
    }

.fsc-chip__count[hidden] {
    display: none;
}

/* ---------------------------------------------------
    Load error
----------------------------------------------------- */
.fsc-alert {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
    padding: .9rem 1.25rem;
    border: 1px solid #f3b9b5;
    border-radius: var(--fsc-radius);
    background-color: var(--fsc-danger-bg);
    color: var(--fsc-danger);
    font-weight: 600;
}

    .fsc-alert[hidden] {
        display: none;
    }

/* ---------------------------------------------------
    Table cells
----------------------------------------------------- */
/* Row hover — matches Accredited laboratories */
.fsc-table {
    --fsc-row-hover-bg: #f6f8fb;
}

    .fsc-table > tbody > tr > * {
        transition: background-color .15s ease;
    }

    .fsc-table > tbody > tr:hover > *,
    .fsc-table > tbody > tr:focus-within > * {
        --bs-table-bg-state: var(--fsc-row-hover-bg);
        background-color: var(--fsc-row-hover-bg);
        box-shadow: none;
    }

@media (prefers-reduced-motion: reduce) {
    .fsc-table > tbody > tr > * {
        transition: none;
    }
}
/*.fsc-table .fsc-col-categories {
    min-width: 13rem;
}

.fsc-table .fsc-col-labs {
    min-width: 13rem;
    max-width: 22rem;
}*/
.fsc-table .fsc-col-name {
    min-width: 12rem;
}

.fsc-table .fsc-col-categories {
    min-width: 10rem;
}

.fsc-table .fsc-col-labs {
    min-width: 10rem;
    max-width: 20rem;
}

/* View button never wraps or gets pushed out */
.fsc-table .fsc-col-actions {
    width: 1%;
    white-space: nowrap;
}

/* Arrow toggle sits before the avatar (same as complaints) */
.fsc-table .fsc-lab .fsc-dtr-toggle {
    margin-right: -.25rem;
}
.fsc-lic-number {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    white-space: nowrap;
}

.fsc-lic-labs {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .fsc-lic-labs li {
        display: flex;
        align-items: flex-start;
        gap: .5rem;
        white-space: normal;
    }

    .fsc-lic-labs .bi {
        flex-shrink: 0;
        margin-top: .15rem;
        color: var(--fsc-text-muted);
    }

.fsc-tag--more {
    background-color: var(--fsc-navy-100);
    color: var(--fsc-navy);
    cursor: help;
}

.fsc-badge__icon {
    flex-shrink: 0;
    font-size: .95em;
    line-height: 1;
}

.fsc-table .fsc-btn-view .bi {
    font-size: .85rem;
}

/* Responsive child-row lists */
.fsc-table > tbody > tr.child .fsc-tags,
.fsc-table > tbody > tr.child .fsc-lic-labs {
    flex: 1 1 12rem;
}

/* ---------------------------------------------------
    Empty state
----------------------------------------------------- */
.fsc-empty__img {
    display: block;
    width: 160px;
    max-width: 60%;
    height: auto;
    margin: 0 auto 1.25rem;
}

/* ---------------------------------------------------
    Media queries
----------------------------------------------------- */
@media (max-width: 767.98px) {
    /* fsc-portal.css switches to space-between here; keep it on the right */
    .fsc-toolbar__meta {
        width: 100%;
        justify-content: flex-end;
        margin-left: auto;
    }

    .fsc-table .fsc-col-categories,
    .fsc-table .fsc-col-labs {
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .fsc-table .fsc-col-name {
        min-width: 0;
    }

    .fsc-table .fsc-lab {
        gap: .5rem;
    }

    .fsc-table .fsc-btn-view {
        --bs-btn-padding-x: .65rem;
    }
}

/* Narrow phones: drop the avatar, keep arrow + name + View; arrow-only paging */
@media (max-width: 399.98px) {
    .fsc-table .fsc-avatar {
        display: none;
    }

    .fsc-table-card .fsc-paging__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (forced-colors: active) {
    .fsc-avatar,
    .fsc-icon-tile,
    .fsc-alert,
    .fsc-tag--more {
        border: 1px solid CanvasText;
    }

    .fsc-chip[aria-pressed="true"] {
        outline: 2px solid Highlight;
    }
}

@media print {
    #loadError,
    .fsc-chips,
    .fsc-page-length,
    .fsc-avatar {
        display: none !important;
    }

    .fsc-table-card {
        box-shadow: none;
        border: 1px solid #000;
    }

    .fsc-badge {
        background: none !important;
        color: #000 !important;
        border: 1px solid #000;
    }
}
/* ---------------------------------------------------
    FSC PUBLIC PORTAL — Licensee details
    Extends fsc-portal.css (tokens, .fsc-hero, .fsc-card,
    .fsc-icon-tile, .fsc-avatar, .fsc-badge, .fsc-btn-*).
    Bootstrap 5.3 | Bootstrap Icons | WCAG 2.1 AA
----------------------------------------------------- */

/* ---------------------------------------------------
    Hero: profile header
----------------------------------------------------- */
.fsc-hero--profile .fsc-hero__inner {
    align-items: center;
}

.fsc-profile {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    min-width: 0;
    flex: 1 1 32rem;
}

.fsc-profile__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 5.5rem;
    height: 5.5rem;
    margin-top: 1.5rem;
    border-radius: var(--fsc-radius-lg);
    background-color: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.fsc-profile__text {
    min-width: 0;
}

.fsc-eyebrow {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
    color: rgba(255, 255, 255, .9);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fsc-profile__name {
    margin-bottom: .875rem;
    overflow-wrap: anywhere;
}

.fsc-profile__alias {
    margin: -.4rem 0 .875rem;
    color: rgba(255, 255, 255, .9);
}

.fsc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fsc-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .08);
    color: #ffffff;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
}

.fsc-pill--success {
    background-color: var(--fsc-success-bg);
    border-color: transparent;
    color: var(--fsc-success);
}

.fsc-pill--warning {
    background-color: var(--fsc-warning-bg);
    border-color: transparent;
    color: var(--fsc-warning);
}

.fsc-pill--danger {
    background-color: var(--fsc-danger-bg);
    border-color: transparent;
    color: var(--fsc-danger);
}

.fsc-pill--neutral {
    background-color: var(--fsc-neutral-bg);
    border-color: transparent;
    color: var(--fsc-neutral);
}

/* ---------------------------------------------------
    Detail card + sections
----------------------------------------------------- */
.fsc-profile-card {
    overflow: hidden;
}

.fsc-detail {
    padding: 2rem;
}

    .fsc-detail + .fsc-detail {
        border-top: 1px solid var(--fsc-border);
    }

.fsc-detail__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
}

.fsc-detail__heading {
    flex: 1 1 14rem;
    min-width: 0;
}

.fsc-detail__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.fsc-detail__sub {
    margin: .1rem 0 0;
    color: var(--fsc-text-muted);
    font-size: .95rem;
}

.fsc-icon-tile--sm {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
}

.fsc-icon-tile--danger {
    background-color: var(--fsc-danger-bg);
    color: var(--fsc-danger);
}

.fsc-count {
    margin: 0;
    padding: .2rem .7rem;
    border-radius: 999px;
    background-color: var(--fsc-navy-100);
    color: var(--fsc-navy);
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
}

.fsc-badge--sm {
    padding: .15rem .6rem;
    font-size: .825rem;
}

.fsc-daterange {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .fsc-daterange .bi {
        color: var(--fsc-text-muted);
    }

/* ---------------------------------------------------
    Overview stats (dl)
----------------------------------------------------- */
.fsc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1rem;
    margin: 0;
}

.fsc-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 5.25rem;
    padding: 1rem 1.25rem 1rem 4.5rem;
    border: 1px solid var(--fsc-border);
    border-radius: var(--fsc-radius);
    background-color: var(--fsc-surface-alt);
}

    .fsc-stat dt {
        color: var(--fsc-text-muted);
        font-size: .875rem;
        font-weight: 600;
    }

    .fsc-stat dd {
        margin: .1rem 0 0;
        font-size: 1.15rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
    }

/* Icon lives inside <dt> (valid dl markup) but is positioned against the tile */
.fsc-stat__icon {
    position: absolute;
    top: 50%;
    left: 1.25rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--fsc-radius-sm);
    background-color: var(--fsc-navy-100);
    color: var(--fsc-navy);
    font-size: 1.05rem;
}

.fsc-stat__icon--warning {
    background-color: var(--fsc-warning-bg);
    color: var(--fsc-warning);
}

/* ---------------------------------------------------
    License periods
----------------------------------------------------- */
.fsc-periods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fsc-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .9rem 1.25rem;
    border: 1px solid var(--fsc-border);
    border-radius: var(--fsc-radius);
    background-color: #ffffff;
}

    .fsc-period.is-current {
        border-color: #9db5dc;
        background-color: var(--fsc-surface-alt);
    }

.fsc-period__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--fsc-border-input);
    border-radius: 50%;
    font-size: .95rem;
}

.fsc-period.is-current .fsc-period__marker {
    background-color: var(--fsc-navy);
    border-color: var(--fsc-navy);
    color: #ffffff;
}

.fsc-period__dates {
    margin-right: .25rem;
    font-size: 1.05rem;
    font-weight: 700;
}

/* ---------------------------------------------------
    Employment
----------------------------------------------------- */
.fsc-employers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fsc-employer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--fsc-border);
    border-radius: var(--fsc-radius);
    background-color: #ffffff;
}

    .fsc-employer.is-current {
        border-color: #9db5dc;
        background-color: var(--fsc-surface-alt);
    }

.fsc-avatar--muted {
    background-color: var(--fsc-tag-bg);
    color: var(--fsc-neutral);
}

.fsc-employer__body {
    flex: 1 1 22rem;
    min-width: 0;
}

.fsc-employer__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
}

.fsc-employer__name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
}

    .fsc-employer__name a {
        text-underline-offset: .2em;
    }

.fsc-employer__alias {
    margin: .2rem 0 0;
    color: var(--fsc-text-muted);
    font-size: .9rem;
}

.fsc-employer__contact {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.5rem;
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    color: var(--fsc-text-muted);
    font-size: .95rem;
}

    .fsc-employer__contact li {
        display: inline-flex;
        align-items: flex-start;
        gap: .4rem;
        min-width: 0;
    }

    .fsc-employer__contact .bi {
        margin-top: .15rem;
    }

    .fsc-employer__contact a {
        font-weight: 600;
        overflow-wrap: anywhere;
    }

.fsc-employer__dates {
    margin: 0 0 0 auto;
    text-align: right;
}

    .fsc-employer__dates dt {
        color: var(--fsc-text-muted);
        font-size: .85rem;
        font-weight: 600;
    }

    .fsc-employer__dates dd {
        margin: .15rem 0 0;
        font-size: 1.1rem;
        font-weight: 700;
    }

/* ---------------------------------------------------
    Detail tables (categories, documents, discipline)
----------------------------------------------------- */
.fsc-dtable-wrap {
    border: 1px solid var(--fsc-border);
    border-radius: var(--fsc-radius);
    overflow: hidden;
}

.fsc-dtable {
    --bs-table-bg: #ffffff;
    --bs-table-color: var(--fsc-text);
    --bs-table-border-color: #e7ebf1;
    margin: 0;
}

    .fsc-dtable > thead > tr > th {
        --bs-table-bg: var(--fsc-surface-alt);
        padding: .8rem 1.25rem;
        border-bottom: 1px solid var(--fsc-border);
        color: var(--fsc-text-muted);
        font-size: .875rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .fsc-dtable > tbody > tr > * {
        padding: 1rem 1.25rem;
        vertical-align: middle;
        font-size: .975rem;
    }

    .fsc-dtable > tbody > tr:last-child > * {
        border-bottom: 0;
    }

    .fsc-dtable > tbody > tr > th {
        font-weight: 700;
    }

.fsc-dtable__actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.fsc-cat {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.fsc-cat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: var(--fsc-radius-sm);
    background-color: var(--fsc-navy-100);
    color: var(--fsc-navy);
}

.is-ended .fsc-cat__icon {
    background-color: var(--fsc-tag-bg);
    color: var(--fsc-neutral);
}

.fsc-cat__icon--file {
    background-color: var(--fsc-danger-bg);
    color: var(--fsc-danger);
}

.fsc-dtable .fsc-cat a {
    text-underline-offset: .2em;
}

/* ---------------------------------------------------
    Notes
----------------------------------------------------- */
.fsc-note {
    display: flex;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--fsc-navy);
    border-radius: var(--fsc-radius-sm);
    background-color: var(--fsc-surface-alt);
}

    .fsc-note .bi {
        margin-top: .15rem;
        color: var(--fsc-navy);
    }

    .fsc-note p {
        margin: 0;
        white-space: pre-line;
        overflow-wrap: anywhere;
    }

/* ---------------------------------------------------
    Responsive
----------------------------------------------------- */
@media (max-width: 767.98px) {
    .fsc-profile {
        gap: 1rem;
    }

    .fsc-profile__avatar {
        width: 3.5rem;
        height: 3.5rem;
        margin-top: 1.75rem;
        border-radius: var(--fsc-radius);
        font-size: 1.2rem;
    }

    .fsc-detail {
        padding: 1.5rem 1.25rem;
    }

    .fsc-employer {
        padding: 1rem 1.25rem;
    }

    .fsc-employer__dates {
        width: 100%;
        margin-left: 0;
        padding-top: .75rem;
        border-top: 1px dashed var(--fsc-border);
        text-align: left;
    }

    /* Stack table rows as cards; ARIA roles in markup preserve semantics */
    .fsc-dtable--stack > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .fsc-dtable--stack,
    .fsc-dtable--stack > tbody,
    .fsc-dtable--stack > tbody > tr,
    .fsc-dtable--stack > tbody > tr > * {
        display: block;
        width: 100%;
    }

        .fsc-dtable--stack > tbody > tr {
            padding: .75rem 1rem;
            border-bottom: 1px solid var(--fsc-border);
        }

            .fsc-dtable--stack > tbody > tr:last-child {
                border-bottom: 0;
            }

            .fsc-dtable--stack > tbody > tr > * {
                padding: .3rem 0;
                border: 0;
            }

            .fsc-dtable--stack > tbody > tr > td[data-label]::before {
                content: attr(data-label);
                content: attr(data-label) / ""; /* decorative: hidden from AT where supported */
                display: block;
                color: var(--fsc-text-muted);
                font-size: .8rem;
                font-weight: 700;
            }

        .fsc-dtable--stack .fsc-dtable__actions {
            text-align: left;
        }
}

@media (max-width: 575.98px) {
    .fsc-profile {
        flex-direction: column;
    }

    .fsc-profile__avatar {
        margin-top: 0;
    }

    .fsc-pill {
        font-size: .85rem;
    }

    .fsc-daterange {
        white-space: normal;
    }
}

/* ---------------------------------------------------
    Windows high contrast
----------------------------------------------------- */
@media (forced-colors: active) {
    .fsc-pill,
    .fsc-count,
    .fsc-stat,
    .fsc-period,
    .fsc-employer,
    .fsc-profile__avatar,
    .fsc-note {
        border: 1px solid CanvasText;
    }

        .fsc-period.is-current,
        .fsc-employer.is-current {
            outline: 2px solid Highlight;
        }
}

/* ---------------------------------------------------
    Print / Save as PDF
----------------------------------------------------- */
@media print {
    .fsc-footer {
        display: none !important;
    }

    .fsc-profile__avatar,
    .fsc-pill {
        background: none !important;
        border-color: #000 !important;
        color: #000 !important;
    }

    .fsc-eyebrow,
    .fsc-profile__alias {
        color: #000;
    }

    .fsc-profile-card {
        box-shadow: none;
        border: 0;
    }

    .fsc-detail {
        padding: 1rem 0;
    }

    .fsc-stat,
    .fsc-period,
    .fsc-employer,
    .fsc-dtable tr {
        break-inside: avoid;
    }

    .fsc-dtable__actions {
        display: none !important;
    }
}

/* wwwroot/css/instructions.css — ALiS instructions page
   Hero, container and overlap come from fsc-portal.css / _layoutv2.
   Tokens are scoped to .fsc-guides so they never override portal-wide variables. */

/* ---------- Hero heading: icon tile + h1, matching the Licensees index ---------- */
.fsc-hero__heading {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

    .fsc-hero__heading .fsc-hero__title {
        margin: 0;
    }

.fsc-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #ffffff;
    font-size: 1.85rem;
}

@media (max-width: 575.98px) {
    .fsc-hero__heading {
        gap: .875rem;
    }

    .fsc-hero__icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.35rem;
        border-radius: .75rem;
    }
}

@media (forced-colors: active) {
    .fsc-hero__icon {
        border-color: CanvasText;
    }
}

.fsc-guides {
    --g-navy: #004085;
    --g-navy-dark: #00336b;
    --g-ink: #15233b; /* 15.5:1 on white */
    --g-muted: #4a5568; /* 7.5:1 on white, 6.9:1 on --g-soft */
    --g-tile: #e8eef7;
    --g-border: #dbe2ec;
    --g-border-hover: #a9bbd6;
    --g-soft: #f3f5f9;
    --g-focus: #ffbf47;
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 12px 32px rgba(16, 37, 72, .10);
    padding: 1.25rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .fsc-guides {
        padding: 2rem 2.75rem 2.5rem;
    }
}
/* Panel spans the full fsc-container width, flush with the hero text (same as Licensees) */

/* ---------- Panel header ---------- */
.fsc-guides__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.fsc-guides__headtext {
    flex: 1 1 auto;
    min-width: 0;
}

.fsc-guides__title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--g-ink);
    margin: 0;
}

.fsc-guides__sub {
    color: var(--g-muted);
    margin: 0;
}

.fsc-guides__count {
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--g-tile);
    color: var(--g-navy);
    font-size: .95rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .35rem .9rem;
}

@media (max-width: 399.98px) {
    .fsc-guides__count {
        display: none;
    }
}

/* ---------- Icon tiles ---------- */
.fsc-guides__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: .75rem;
    background: var(--g-tile);
    color: var(--g-navy);
    font-size: 1.6rem;
}

.fsc-guides__tile--sm {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
}

.fsc-guides__tile--outline {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.2rem;
    background: #fff;
    border: 1px solid var(--g-border);
}

/* ---------- Guide cards ---------- */
.fsc-guide {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--g-border);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .fsc-guide:hover,
    .fsc-guide:focus-within {
        border-color: var(--g-border-hover);
        box-shadow: 0 6px 18px rgba(16, 37, 72, .08);
    }

.fsc-guide__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--g-ink);
    margin: 1.25rem 0 .5rem;
    overflow-wrap: anywhere;
}

.fsc-guide__text {
    color: var(--g-muted);
    margin-bottom: 1.5rem;
}

.fsc-guide__btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--g-navy);
    --bs-btn-border-color: var(--g-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--g-navy-dark);
    --bs-btn-hover-border-color: var(--g-navy-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--g-navy-dark);
    --bs-btn-active-border-color: var(--g-navy-dark);
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px; /* WCAG 2.5.8 target size */
    padding: .65rem 1.4rem;
    border-radius: .5rem;
    font-weight: 600;
    white-space: normal;
    text-align: left;
}

    .fsc-guide__btn .bi {
        transition: transform .15s ease;
    }

    .fsc-guide__btn:hover .bi {
        transform: translateX(3px);
    }

@media (max-width: 575.98px) {
    .fsc-guide__btn {
        align-self: stretch;
        justify-content: center;
    }
}

/* ---------- Help strip ---------- */
.fsc-help {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--g-soft);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin-top: 2rem;
}

.fsc-help__text {
    flex: 1 1 18rem;
    min-width: 0;
}

.fsc-help__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--g-ink);
    margin: 0;
}

.fsc-help__sub {
    color: var(--g-muted);
    margin: 0;
}

.fsc-help__link {
    color: var(--g-navy);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
    padding-block: .5rem; /* larger hit area */
}

    .fsc-help__link:hover {
        color: var(--g-navy-dark);
        text-decoration-thickness: 2px;
    }

@media (max-width: 575.98px) {
    .fsc-help__link {
        flex-basis: 100%;
        padding-left: 3.75rem;
    }
}

/* ---------- Focus (WCAG 2.4.7, 1.4.11) ---------- */
.fsc-guide__btn:focus-visible,
.fsc-help__link:focus-visible {
    outline: 3px solid var(--g-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--g-navy);
}

/* ---------- User preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .fsc-guide, .fsc-guide__btn .bi {
        transition: none;
    }

    .fsc-guide__btn:hover .bi {
        transform: none;
    }
}

@media (forced-colors: active) {
    .fsc-guides, .fsc-guide, .fsc-help, .fsc-guides__count {
        border: 1px solid CanvasText;
    }

    .fsc-guide__btn {
        border: 2px solid ButtonText;
    }

        .fsc-guide__btn:focus-visible, .fsc-help__link:focus-visible {
            outline-color: Highlight;
        }
}