/* ---------------------------------------------------
    FSC PUBLIC PORTAL — FORMS
    Multi-section public forms (Add complaint, and reusable
    for self-disclosures / quality incidents)
    Bootstrap 5.3 | Tom Select 2 | DataTables 2 | WCAG 2.1 AA
----------------------------------------------------- */
:root {
    --fsc-info-bg: #eef3fb;
    --fsc-info-border: #cbd9ef;
    --fsc-dash: #aeb7c5;
    --fsc-field-h: 48px;
    --fsc-section-indent: calc(36px + 1rem);
}

/* ---------------------------------------------------
    Hero (form variant)
----------------------------------------------------- */
.fsc-hero--form {
    padding: 2.75rem 0 6.5rem;
}

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

/* ---------------------------------------------------
    Form card
    No overflow:hidden — the Tom Select dropdown must escape the card
----------------------------------------------------- */
.fsc-form {
    position: relative;
}

/* ---------------------------------------------------
    Stepper (in-page section navigation)
----------------------------------------------------- */
.fsc-stepper {
    /* Sticky: pins directly BELOW the sticky site header (fsc-portal.css .fsc-header, z-index 1030)
       while the form scrolls, and scrolls away with the form's bottom edge.
       --fsc-header-h is the header's height (fallback in fsc-portal.css, real value set by the layout script).
       With top: 0 the stepper pinned underneath the header and was hidden. */
    position: sticky;
    top: var(--fsc-header-h, 0px);
    z-index: 1020;
    padding: .875rem 1.75rem;
    background-color: var(--fsc-surface-alt);
    border-bottom: 1px solid var(--fsc-border);
    border-radius: var(--fsc-radius-lg) var(--fsc-radius-lg) 0 0;
    overflow-x: auto;
    scrollbar-width: thin;
    transition: box-shadow .15s ease, border-radius .15s ease;
}

    /* Set by complaint.js while pinned */
    .fsc-stepper.is-stuck {
        border-radius: 0;
        box-shadow: 0 6px 16px rgba(10, 35, 80, .12);
    }

/* Keep section headings, the error summary and focused fields clear of the sticky header AND the
   pinned stepper below it (WCAG 2.4.11 Focus Not Obscured). --fsc-stepper-h is measured by complaint.js. */
html:has(.fsc-stepper) {
    scroll-padding-top: calc(var(--fsc-header-h, 0px) + var(--fsc-stepper-h, 72px) + 1rem);
}

/* scroll-padding above already clears the stepper; a matching scroll-margin here would double the gap */
.fsc-form .fsc-fsection,
.fsc-form .fsc-error-summary,
.fsc-form .fsc-server-alert {
    scroll-margin-top: 0;
}

/* Short viewports (phones in landscape, high zoom): don't pin — it would eat the screen */
@media (max-height: 500px) {
    .fsc-stepper {
        position: relative;
    }

    /* The header is still sticky here, so keep clearing it (not 0) */
    html:has(.fsc-stepper) {
        scroll-padding-top: calc(var(--fsc-header-h, 0px) + 1rem);
    }

    .fsc-form .fsc-fsection,
    .fsc-form .fsc-error-summary,
    .fsc-form .fsc-server-alert {
        scroll-margin-top: 1rem;
    }
}

.fsc-stepper__list {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fsc-stepper__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
}

    .fsc-stepper__item:last-of-type {
        flex: 0 0 auto;
    }

    .fsc-stepper__item:not(:last-of-type)::after {
        content: "";
        flex: 1 1 auto;
        min-width: .75rem;
        height: 1px;
        background-color: #c3cad6;
    }

.fsc-stepper__link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .375rem;
    border-radius: var(--fsc-radius-sm);
    color: var(--fsc-text);
    font-size: .925rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

    .fsc-stepper__link:hover {
        color: var(--fsc-navy);
        background-color: var(--fsc-navy-100);
    }

.fsc-stepper__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--fsc-border-input);
    border-radius: 50%;
    background-color: #ffffff;
    font-size: .85rem;
    font-weight: 700;
}

.fsc-stepper__link[aria-current="step"] {
    color: var(--fsc-navy);
}

    .fsc-stepper__link[aria-current="step"] .fsc-stepper__num {
        background-color: var(--fsc-navy);
        border-color: var(--fsc-navy);
        color: #ffffff;
    }

/* Step not needed (e.g. signature on an anonymous complaint): stays visible, de-emphasised */
.fsc-stepper__link.is-skipped:not([aria-current="step"]) {
    color: var(--fsc-text-muted);
}

    .fsc-stepper__link.is-skipped:not([aria-current="step"]) .fsc-stepper__num {
        border-style: dashed;
        color: var(--fsc-text-muted);
    }

.fsc-stepper__link.has-error {
    color: var(--fsc-danger);
}

    .fsc-stepper__link.has-error .fsc-stepper__num {
        border-color: var(--fsc-danger);
        border-width: 2px;
    }

/* Below xl: only the current step shows its label (others stay in the accessible name) */
@media (max-width: 1199.98px) {
    .fsc-stepper {
        padding: .75rem 1rem;
    }

    /* Items keep their natural width; the bar scrolls sideways and complaint.js centres the current step */
    .fsc-stepper__item {
        flex: 0 0 auto;
    }

        .fsc-stepper__item:not(:last-of-type)::after {
            flex: 0 0 .75rem;
        }

    .fsc-stepper__link:not([aria-current="step"]) .fsc-stepper__label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

/* ---------------------------------------------------
    Notes, alerts, error summary
----------------------------------------------------- */
.fsc-form-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .75rem 1.75rem;
    border-bottom: 1px solid var(--fsc-border);
    color: var(--fsc-text-muted);
    font-size: .925rem;
}

    .fsc-form-note .bi {
        color: var(--fsc-navy);
    }

.fsc-note {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0 0 1.25rem;
    padding: .875rem 1.1rem;
    background-color: var(--fsc-info-bg);
    border: 1px solid var(--fsc-info-border);
    border-radius: var(--fsc-radius);
    color: var(--fsc-text);
    font-size: .95rem;
    line-height: 1.55;
}

    .fsc-note > .bi {
        flex-shrink: 0;
        margin-top: .1rem;
        color: var(--fsc-navy);
    }

    .fsc-note p {
        margin: 0;
    }

.fsc-error-summary,
.fsc-server-alert {
    margin: 1.5rem 1.75rem 0;
    padding: 1rem 1.25rem;
    background-color: #ffffff;
    border: 2px solid var(--fsc-danger);
    border-left-width: 6px;
    border-radius: var(--fsc-radius);
}

    .fsc-error-summary:focus,
    .fsc-server-alert:focus {
        outline: 3px solid var(--fsc-focus-light);
        outline-offset: 3px;
    }

.fsc-error-summary__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
    color: var(--fsc-danger);
    font-size: 1.1rem;
    font-weight: 700;
}

.fsc-error-summary__list {
    margin: 0;
    padding-left: 1.25rem;
}

    .fsc-error-summary__list li + li {
        margin-top: .25rem;
    }

    .fsc-error-summary__list a {
        color: var(--fsc-danger);
        font-weight: 600;
    }

/* ---------------------------------------------------
    Sections
----------------------------------------------------- */
.fsc-fsection {
    padding: 2rem 1.75rem;
    border-bottom: 1px solid var(--fsc-border);
    scroll-margin-top: 1rem;
}

.fsc-fsection__head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.fsc-fsection__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: var(--fsc-navy);
    color: #ffffff;
    font-weight: 800;
}

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

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

@media (min-width: 768px) {
    .fsc-fsection__body {
        padding-left: var(--fsc-section-indent);
    }
}

.fsc-subhead {
    margin: 1.75rem 0 .75rem;
    font-size: 1.05rem;
    font-weight: 700;
}

/* ---------------------------------------------------
    Labels, fields, errors
----------------------------------------------------- */
.fsc-form .form-label,
.fsc-legend {
    display: block;
    margin-bottom: .45rem;
    color: var(--fsc-text);
    font-size: .95rem;
    font-weight: 700;
}

.fsc-legend {
    float: none;
    width: auto;
    padding: 0;
    line-height: 1.5;
}

.fsc-label-hint {
    font-weight: 400;
    color: var(--fsc-text-muted);
}

/* Required tag — small navy pill after the label ("City  [Required]").
   The word comes from CSS so the label's text (used in error messages and the
   error summary) stays clean. The span is aria-hidden: screen readers get
   "required" from aria-required on the control, or from the visually-hidden
   "(required)" in fieldset legends. Navy on #e6edf8 = 9.6:1. */
.fsc-req {
    display: inline-flex;
    align-items: center;
    margin-left: .5rem;
    padding: .05rem .5rem;
    vertical-align: .1em;
    background-color: var(--fsc-navy-100);
    border: 1px solid #c3d3ea;
    border-radius: 999px;
    color: var(--fsc-navy);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.4;
    white-space: nowrap;
}

    .fsc-req::before {
        content: "Required";
    }

/* Inside the "Fields marked … must be filled in" note */
.fsc-req--inline {
    margin: 0 .1rem;
}

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

@media print {
    .fsc-req {
        border-color: #000;
        color: #000;
        background: none;
    }
}

.fsc-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.fsc-hint {
    margin: .4rem 0 0;
    color: var(--fsc-text-muted);
    font-size: .875rem;
}

.fsc-form .form-control,
.fsc-form .form-select {
    min-height: var(--fsc-field-h);
    color: var(--fsc-text);
    font-size: 1rem;
    background-color: #ffffff;
    border: 1px solid var(--fsc-border-input);
    border-radius: var(--fsc-radius);
}

.fsc-form textarea.form-control {
    min-height: 7rem;
    line-height: 1.55;
}

.fsc-form .form-control::placeholder {
    color: var(--fsc-placeholder);
    opacity: 1;
}

.fsc-form .form-control:hover,
.fsc-form .form-select:hover {
    border-color: var(--fsc-navy);
}

.fsc-form .form-control:focus,
.fsc-form .form-select:focus,
.fsc-form .fsc-input .form-control:focus {
    border-color: var(--fsc-navy);
    outline: 3px solid var(--fsc-focus-light);
    outline-offset: 1px;
    box-shadow: none;
}

.fsc-form .form-control:disabled,
.fsc-form .form-select:disabled {
    background-color: var(--fsc-tag-bg);
    border-color: var(--fsc-border);
    color: var(--fsc-text-muted);
    cursor: not-allowed;
}

/* Icon inputs (re-uses .fsc-input from fsc-portal.css) */
.fsc-form .fsc-input .form-control,
.fsc-form .fsc-input .form-select {
    height: var(--fsc-field-h);
    padding-left: 2.75rem;
}

.fsc-form .fsc-input .form-control {
    padding-right: .875rem;
}

    .fsc-form .fsc-input .form-control.is-invalid {
        padding-right: 2.5rem;
    }

.fsc-form .fsc-input__icon {
    z-index: 3;
}

.fsc-form .fsc-input:has(:disabled) .fsc-input__icon {
    opacity: .6;
}

/* Invalid */
.fsc-form .form-control.is-invalid,
.fsc-form .form-select.is-invalid {
    border-color: var(--fsc-danger);
    box-shadow: 0 0 0 1px var(--fsc-danger);
}

.fsc-error {
    display: block;
    margin-top: .4rem;
    color: var(--fsc-danger);
    font-size: .9rem;
    font-weight: 600;
}

    .fsc-error:empty {
        display: none;
    }

/* Character counter */
.fsc-counter {
    margin-top: .4rem;
    color: var(--fsc-text-muted);
    font-size: .875rem;
    text-align: right;
}

    .fsc-counter.is-low {
        color: var(--fsc-warning);
        font-weight: 700;
    }

/* File input */
.fsc-form input[type="file"].form-control {
    height: auto;
    padding: .55rem .75rem;
}

    .fsc-form input[type="file"].form-control::file-selector-button {
        margin: -.55rem .875rem -.55rem -.75rem;
        padding: .7rem 1rem;
        border: 0;
        border-right: 1px solid var(--fsc-border-input);
        background-color: var(--fsc-navy-100);
        color: var(--fsc-navy);
        font-weight: 700;
    }

/* ---------------------------------------------------
    Checkbox card
----------------------------------------------------- */
.fsc-check-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .875rem 1.1rem;
    background-color: var(--fsc-surface-alt);
    border: 1px solid var(--fsc-border);
    border-radius: var(--fsc-radius);
}

    .fsc-check-card:has(.form-check-input:checked) {
        background-color: var(--fsc-navy-100);
        border-color: var(--fsc-navy);
    }

    .fsc-check-card .form-check-input {
        float: none;
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
    }

    .fsc-check-card .form-check-label {
        cursor: pointer;
    }

.fsc-form .form-check-input {
    border: 1.5px solid var(--fsc-border-input);
}

    .fsc-form .form-check-input:checked {
        background-color: var(--fsc-navy);
        border-color: var(--fsc-navy);
    }

    .fsc-form .form-check-input:focus {
        box-shadow: none;
        outline: 3px solid var(--fsc-focus-light);
        outline-offset: 2px;
    }

/* ---------------------------------------------------
    Segmented Yes / No (radio + .btn-check)
----------------------------------------------------- */
.fsc-seg {
    display: inline-flex;
}

    .fsc-seg > .btn {
        --bs-btn-padding-x: 1.5rem;
        --bs-btn-padding-y: .6rem;
        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--fsc-text);
        --bs-btn-bg: #ffffff;
        --bs-btn-border-color: var(--fsc-border-input);
        --bs-btn-hover-color: var(--fsc-navy);
        --bs-btn-hover-bg: var(--fsc-navy-100);
        --bs-btn-hover-border-color: var(--fsc-border-input);
        --bs-btn-active-color: #ffffff;
        --bs-btn-active-bg: var(--fsc-navy);
        --bs-btn-active-border-color: var(--fsc-navy);
        min-width: 5.5rem;
        border-radius: 0;
    }

        .fsc-seg > .btn:first-of-type {
            border-radius: var(--fsc-radius) 0 0 var(--fsc-radius);
        }

        .fsc-seg > .btn:last-of-type {
            margin-left: -1px;
            border-radius: 0 var(--fsc-radius) var(--fsc-radius) 0;
        }

    /* Selected state is not colour-only: a check mark is added */
    .fsc-seg > .btn-check:checked + .btn {
        position: relative;
        z-index: 1;
    }

        .fsc-seg > .btn-check:checked + .btn::before {
            content: "";
            display: inline-block;
            width: 1em;
            height: 1em;
            margin-right: .4rem;
            vertical-align: -.15em;
            background-color: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.485 3.929a1 1 0 0 1 0 1.414l-6.364 6.364a1 1 0 0 1-1.414 0L2.515 8.515a1 1 0 1 1 1.414-1.414L6.414 9.586l5.657-5.657a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.485 3.929a1 1 0 0 1 0 1.414l-6.364 6.364a1 1 0 0 1-1.414 0L2.515 8.515a1 1 0 1 1 1.414-1.414L6.414 9.586l5.657-5.657a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") no-repeat center / contain;
        }

    .fsc-seg > .btn-check:focus-visible + .btn {
        position: relative;
        z-index: 2;
        outline: 3px solid var(--fsc-focus-light);
        outline-offset: 2px;
        box-shadow: none;
    }

    .fsc-seg.is-invalid > .btn {
        border-color: var(--fsc-danger);
    }

/* ---------------------------------------------------
    Tom Select (Type(s) of forensic analysis)
----------------------------------------------------- */
.fsc-input--multi .fsc-input__icon {
    top: calc(var(--fsc-field-h) / 2);
}

.fsc-form .ts-wrapper .ts-control {
    min-height: var(--fsc-field-h);
    padding: .45rem 2.5rem .45rem 2.75rem;
    font-size: 1rem;
    color: var(--fsc-text);
    background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234f5a6d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right .875rem center / 16px 12px;
    border: 1px solid var(--fsc-border-input);
    border-radius: var(--fsc-radius);
    box-shadow: none;
    gap: .375rem;
}

/* Keep room for the leading icon and the trailing arrow once types are selected.
   tom-select.bootstrap5.css resets the padding with `.ts-wrapper.multi.has-items .ts-control`
   (4 classes), which beat the rule above (3 classes) and slid the first chip under the icon. */
.fsc-form .fsc-input--multi .ts-wrapper.multi .ts-control,
.fsc-form .fsc-input--multi .ts-wrapper.multi.has-items .ts-control {
    padding-left: 2.75rem;
    padding-right: 2.5rem;
}

.fsc-form .ts-wrapper:hover .ts-control {
    border-color: var(--fsc-navy);
}

.fsc-form .ts-wrapper.focus .ts-control {
    border-color: var(--fsc-navy);
    outline: 3px solid var(--fsc-focus-light);
    outline-offset: 1px;
    box-shadow: none;
}

.fsc-form .ts-wrapper .ts-control input::placeholder {
    color: var(--fsc-placeholder);
    opacity: 1;
}

.fsc-form .ts-wrapper.multi .ts-control > div.item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: .2rem .25rem .2rem .6rem;
    background-color: var(--fsc-navy-100);
    color: var(--fsc-navy-900);
    border: 0;
    border-radius: var(--fsc-radius-sm);
    font-weight: 600;
    font-size: .925rem;
}

    .fsc-form .ts-wrapper.multi .ts-control > div.item.active {
        background-color: var(--fsc-navy);
        color: #ffffff;
    }

.fsc-form .ts-wrapper.plugin-remove_button .item .remove {
    margin-left: .25rem;
    padding: 0 .4rem;
    border: 0;
    border-radius: 4px;
    color: inherit;
    font-size: 1.05rem;
    line-height: 1.2;
    text-decoration: none;
}

    .fsc-form .ts-wrapper.plugin-remove_button .item .remove:hover {
        background-color: rgba(11, 61, 130, .15);
    }

.fsc-form .ts-wrapper.is-invalid .ts-control {
    border-color: var(--fsc-danger);
    box-shadow: 0 0 0 1px var(--fsc-danger);
}

.fsc-form .ts-dropdown {
    z-index: 1050;
    margin-top: .25rem;
    border: 1px solid var(--fsc-border-input);
    border-radius: var(--fsc-radius);
    box-shadow: var(--fsc-shadow);
    font-size: .975rem;
    overflow: hidden;
}

    .fsc-form .ts-dropdown .option {
        padding: .55rem .9rem;
    }

    .fsc-form .ts-dropdown .active {
        background-color: var(--fsc-navy-100);
        color: var(--fsc-navy-900);
    }

    .fsc-form .ts-dropdown .no-results {
        padding: .55rem .9rem;
        color: var(--fsc-text-muted);
    }

/* ---------------------------------------------------
    Collections (defendants, witnesses, documents)
----------------------------------------------------- */
.fsc-collection {
    background-color: #ffffff;
    border: 1.5px dashed var(--fsc-dash);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

    .fsc-collection.is-empty {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .fsc-collection:not(.is-empty) {
        padding: 0;
        border: 1px solid var(--fsc-border);
    }

.fsc-collection__empty {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.fsc-collection:not(.is-empty) .fsc-collection__empty {
    display: none;
}

.fsc-collection__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--fsc-radius);
    background-color: var(--fsc-navy-100);
    color: var(--fsc-navy);
    font-size: 1.15rem;
}

.fsc-collection__title {
    margin: 0;
    font-weight: 700;
}

.fsc-collection__text {
    margin: 0;
    color: var(--fsc-text-muted);
    font-size: .925rem;
}

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

.fsc-collection:not(.is-empty) .fsc-collection__actions {
    padding: .875rem 1.25rem;
    background-color: var(--fsc-surface-alt);
    border-top: 1px solid var(--fsc-border);
    border-radius: 0 0 11px 11px;
}

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

/* Compact table inside a collection */
.fsc-mini-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--fsc-text);
    margin: 0;
}

    .fsc-mini-table > thead > tr > th {
        padding: .75rem 1.25rem;
        color: var(--fsc-text-muted);
        font-size: .85rem;
        font-weight: 700;
        white-space: nowrap;
        border-bottom: 1px solid var(--fsc-border);
    }

    .fsc-mini-table > tbody > tr > * {
        padding: .85rem 1.25rem;
        font-size: .95rem;
        vertical-align: middle;
        border-bottom: 1px solid #e7ebf1;
    }

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

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

.fsc-file {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    word-break: break-word;
}

    .fsc-file .bi {
        color: var(--fsc-navy);
    }

.fsc-row-actions {
    display: inline-flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* ---------------------------------------------------
    Sub-forms (add witness / defendant / document)
----------------------------------------------------- */
.fsc-subform {
    margin-top: 1.25rem;
    padding: 1.5rem;
    background-color: var(--fsc-surface-alt);
    border: 1px solid var(--fsc-border);
    border-left: 4px solid var(--fsc-navy);
    border-radius: 12px;
}

.fsc-subform__title {
    margin: 0 0 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.fsc-subfieldset {
    min-width: 0;
    margin: 1.5rem 0 0;
    padding: 1.25rem;
    background-color: #ffffff;
    border: 1px solid var(--fsc-border);
    border-radius: var(--fsc-radius);
}

    .fsc-subfieldset > legend {
        float: none;
        width: auto;
        margin: 0;
        padding: 0 .5rem;
        font-size: 1rem;
        font-weight: 700;
    }

.fsc-subform__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

.fsc-upload-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1rem 0 0;
    color: var(--fsc-text-muted);
    font-size: .925rem;
}

    .fsc-upload-status:empty {
        display: none;
    }

/* ---------------------------------------------------
    Buttons
----------------------------------------------------- */
.fsc-btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--fsc-navy);
    --bs-btn-border-color: var(--fsc-navy);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--fsc-navy-900);
    --bs-btn-hover-border-color: var(--fsc-navy-900);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--fsc-navy-900);
    --bs-btn-active-border-color: var(--fsc-navy-900);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--fsc-navy);
    --bs-btn-disabled-border-color: var(--fsc-navy);
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-padding-y: .7rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--fsc-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    box-shadow: 0 6px 16px rgba(11, 61, 130, .22);
}

.fsc-btn-outline {
    --bs-btn-color: var(--fsc-navy);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--fsc-navy);
    --bs-btn-hover-color: var(--fsc-navy);
    --bs-btn-hover-bg: var(--fsc-navy-100);
    --bs-btn-hover-border-color: var(--fsc-navy);
    --bs-btn-active-color: var(--fsc-navy);
    --bs-btn-active-bg: #d6e2f4;
    --bs-btn-active-border-color: var(--fsc-navy);
    --bs-btn-disabled-color: var(--fsc-text-muted);
    --bs-btn-disabled-bg: #ffffff;
    --bs-btn-disabled-border-color: var(--fsc-border-input);
    --bs-btn-disabled-opacity: 1;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: .55rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--fsc-radius);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.fsc-btn-danger {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--fsc-danger);
    --bs-btn-border-color: var(--fsc-danger);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #861913;
    --bs-btn-hover-border-color: #861913;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #861913;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .65rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--fsc-radius);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.fsc-btn-icon {
    --bs-btn-padding-x: .7rem;
    --bs-btn-padding-y: .35rem;
    --bs-btn-font-size: .9rem;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--fsc-navy);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--fsc-border-input);
    --bs-btn-hover-color: var(--fsc-navy);
    --bs-btn-hover-bg: var(--fsc-navy-100);
    --bs-btn-hover-border-color: var(--fsc-navy);
    --bs-btn-border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 36px;
    min-height: 36px;
}

.fsc-btn-icon--danger {
    --bs-btn-color: var(--fsc-danger);
    --bs-btn-hover-color: var(--fsc-danger);
    --bs-btn-hover-bg: var(--fsc-danger-bg);
    --bs-btn-hover-border-color: var(--fsc-danger);
}

/* ---------------------------------------------------
    Footer bar
----------------------------------------------------- */
.fsc-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.75rem;
    border-radius: 0 0 var(--fsc-radius-lg) var(--fsc-radius-lg);
}

.fsc-form-footer__note {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--fsc-text-muted);
    font-size: .925rem;
}

.fsc-form-footer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* ---------------------------------------------------
    Modals
----------------------------------------------------- */
.fsc-modal {
    border: 0;
    border-radius: var(--fsc-radius-lg);
    box-shadow: var(--fsc-shadow);
}

    .fsc-modal .modal-header,
    .fsc-modal .modal-footer {
        padding: 1.1rem 1.5rem;
        border-color: var(--fsc-border);
    }

    .fsc-modal .modal-body {
        padding: 1.25rem 1.5rem;
    }

    .fsc-modal .modal-title {
        display: flex;
        align-items: center;
        gap: .6rem;
        font-size: 1.15rem;
        font-weight: 700;
    }

/* ---------------------------------------------------
    Confirm dialog (e.g. leave with unsaved changes)
    Centred icon + title + message, full-width actions.
    Warning colours: #8a5300 on #fdf0d3 = 5.9:1 (icon), text ≥ 4.5:1.
----------------------------------------------------- */
.fsc-confirm {
    max-width: 440px;
}

.fsc-confirm__content {
    position: relative;
    overflow: hidden;
    border-top: 4px solid #c98a00;
}

.fsc-confirm__close {
    position: absolute;
    top: .875rem;
    right: .875rem;
    z-index: 1;
    padding: .6rem;
    border-radius: var(--fsc-radius-sm);
}

    .fsc-confirm__close:focus-visible {
        outline: 3px solid var(--fsc-focus-light);
        outline-offset: 1px;
        box-shadow: none;
    }

.fsc-confirm__body {
    padding: 2rem 2rem 1.5rem;
    text-align: center;
    color: var(--fsc-text-muted);
    font-size: .975rem;
    line-height: 1.55;
}

    .fsc-confirm__body p {
        margin: 0 0 .5rem;
    }

.fsc-confirm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background-color: var(--fsc-warning-bg);
    box-shadow: 0 0 0 8px rgba(253, 240, 211, .45);
    color: #8a5300;
    font-size: 1.6rem;
}

.fsc-confirm__title {
    margin: 0 0 .5rem;
    color: var(--fsc-text);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
}

.fsc-confirm__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    padding: 1rem 1.5rem 1.5rem;
}

    .fsc-confirm__actions > .btn {
        justify-content: center;
        min-height: 46px;
    }

@media (max-width: 399.98px) {
    /* Stack; the safe choice stays on top */
    .fsc-confirm__actions {
        grid-template-columns: 1fr;
    }

    .fsc-confirm__body {
        padding: 1.75rem 1.25rem 1.25rem;
    }
}

@media (forced-colors: active) {
    .fsc-confirm__icon {
        border: 2px solid CanvasText;
    }
}

/* ---------------------------------------------------
    Responsive
----------------------------------------------------- */
@media (max-width: 767.98px) {
    .fsc-hero--form {
        padding: 2rem 0 6rem;
    }

    .fsc-fsection {
        padding: 1.5rem 1rem;
    }

    .fsc-fsection__title {
        font-size: 1.15rem;
    }

    .fsc-form-note,
    .fsc-form-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .fsc-error-summary,
    .fsc-server-alert {
        margin: 1rem 1rem 0;
    }

    .fsc-subform {
        padding: 1.1rem;
    }

    .fsc-subfieldset {
        padding: 1rem;
    }

    .fsc-form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .fsc-form-footer__actions > .btn,
    .fsc-subform__actions > .btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .fsc-seg {
        display: flex;
    }

        .fsc-seg > .btn {
            flex: 1 1 0;
        }

    .fsc-collection.is-empty .fsc-collection__actions,
    .fsc-collection.is-empty .fsc-collection__actions > .btn {
        width: 100%;
        justify-content: center;
    }

    .fsc-mini-table > thead > tr > th,
    .fsc-mini-table > tbody > tr > * {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fsc-form *,
    .fsc-form *::before {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .fsc-stepper__link[aria-current="step"] .fsc-stepper__num,
    .fsc-fsection__num,
    .fsc-collection__icon {
        border: 2px solid CanvasText;
    }

    .fsc-seg > .btn-check:checked + .btn {
        outline: 3px solid Highlight;
        outline-offset: -3px;
    }

    .fsc-form .ts-wrapper.multi .ts-control > div.item {
        border: 1px solid CanvasText;
    }

    .fsc-check-card,
    .fsc-note {
        border: 1px solid CanvasText;
    }
}

@media print {
    .fsc-stepper,
    .fsc-form-footer__actions,
    .fsc-collection__actions,
    .fsc-row-actions,
    .fsc-subform {
        display: none !important;
    }

    .fsc-fsection {
        break-inside: avoid;
    }
}

/* ===================================================
    LIST / INDEX PAGES
    Complaints index (re-usable for self-disclosures,
    quality incidents): hero actions, live search card,
    status chips, results table, empty states.
    Status colours pair text + icon (never colour only);
    all text/background pairs ≥ 4.5:1, dots/borders ≥ 3:1.
=================================================== */

:root {
    --fsc-tone-pending-bg: #eef0f4;
    --fsc-tone-pending-fg: #3b4556;
    --fsc-tone-pending-dot: #6b7486;
    --fsc-tone-investigation-bg: #fff3d1;
    --fsc-tone-investigation-fg: #7a4a00;
    --fsc-tone-investigation-dot: #b7791f;
    --fsc-tone-tabled-bg: #eeebfb;
    --fsc-tone-tabled-fg: #4a3897;
    --fsc-tone-tabled-dot: #6a55c9;
    --fsc-tone-dismissed-bg: #fdecea;
    --fsc-tone-dismissed-fg: #a11d14;
    --fsc-tone-dismissed-dot: #c8372d;
    --fsc-tone-closed-bg: #e3f3e9;
    --fsc-tone-closed-fg: #1b6639;
    --fsc-tone-closed-dot: #24834a;
    --fsc-tone-other-bg: #e8effa;
    --fsc-tone-other-fg: #0b3d82;
    --fsc-tone-other-dot: #2f5fa8;
    --fsc-row-divider: #e7ebf1;
}

/* ---------------------------------------------------
    Hero (list variant) — title left, actions right
----------------------------------------------------- */
.fsc-hero--list {
    padding: 2.5rem 0 6.5rem;
}

.fsc-hero__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
}

.fsc-hero--list .fsc-hero__text {
    flex: 1 1 26rem;
    min-width: 0;
    max-width: 40rem;
}

.fsc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}

/* Secondary buttons on the navy hero */
.fsc-btn-hero {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: rgba(255, 255, 255, .08);
    --bs-btn-border-color: rgba(255, 255, 255, .45);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .18);
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: rgba(255, 255, 255, .24);
    --bs-btn-active-border-color: #ffffff;
    --bs-btn-disabled-color: rgba(255, 255, 255, .75);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgba(255, 255, 255, .3);
    --bs-btn-disabled-opacity: 1;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .6rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--fsc-radius);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Primary call to action on the navy hero */
.fsc-btn-light {
    --bs-btn-color: var(--fsc-navy);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-color: var(--fsc-navy-900);
    --bs-btn-hover-bg: var(--fsc-navy-100);
    --bs-btn-hover-border-color: var(--fsc-navy-100);
    --bs-btn-active-color: var(--fsc-navy-900);
    --bs-btn-active-bg: #d6e2f4;
    --bs-btn-active-border-color: #d6e2f4;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .7rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--fsc-radius);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

    .fsc-btn-hero:focus-visible,
    .fsc-btn-light:focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: 2px;
        box-shadow: 0 0 0 6px var(--fsc-navy);
    }

/* ---------------------------------------------------
    Search card (live filters, no Search button)
----------------------------------------------------- */
.fsc-search {
    padding: 2rem 2.25rem 1.75rem;
    background-color: #ffffff;
    border: 1px solid var(--fsc-border);
    border-radius: var(--fsc-radius-lg);
    box-shadow: var(--fsc-shadow);
}

.fsc-search__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.fsc-search__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--fsc-radius);
    background-color: var(--fsc-navy-100);
    color: var(--fsc-navy);
    font-size: 1.05rem;
}

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

.fsc-search__sub {
    margin: .15rem 0 0;
    color: var(--fsc-text-muted);
    font-size: .975rem;
}

.fsc-search .form-label,
.fsc-search .fsc-legend {
    font-size: .9rem;
}

/* Icon inputs: the shared rule sizes the leading icon; these add the clear (×) button */
.fsc-search .fsc-input {
    position: relative;
}

    .fsc-search .fsc-input .fsc-svg.fsc-input__icon {
        width: 1.1rem;
        height: 1.1rem;
    }

    .fsc-search .fsc-input:has(.fsc-input__clear:not([hidden])) .form-control {
        padding-right: 3rem;
    }

    .fsc-search .fsc-input .form-control:not(:placeholder-shown) {
        border-color: var(--fsc-navy);
    }

.fsc-input__clear {
    position: absolute;
    top: 50%;
    right: .375rem;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    border-radius: var(--fsc-radius-sm);
    color: var(--fsc-text-muted);
    font-size: .9rem;
}

    .fsc-input__clear:hover {
        background-color: var(--fsc-navy-100);
        color: var(--fsc-navy);
    }

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

/* Date range: From [ ] to [ ] */
.fsc-daterange {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
}

.fsc-daterange__sep {
    color: var(--fsc-text-muted);
    font-size: .9rem;
    font-weight: 600;
}

/* Footer of the card: applied filters + Clear */
.fsc-search__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--fsc-border);
}

.fsc-applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.fsc-applied__label {
    color: var(--fsc-text-muted);
    font-size: .9rem;
}

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

.fsc-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 32px;
    padding: .25rem .5rem .25rem .75rem;
    background-color: var(--fsc-navy-100);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--fsc-navy-900);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    word-break: break-word;
}

    .fsc-pill .bi {
        font-size: 1.05rem;
    }

    .fsc-pill:hover {
        border-color: var(--fsc-navy);
    }

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

.fsc-btn-soft {
    --bs-btn-color: var(--fsc-navy);
    --bs-btn-bg: var(--fsc-navy-100);
    --bs-btn-border-color: var(--fsc-navy-100);
    --bs-btn-hover-color: var(--fsc-navy-900);
    --bs-btn-hover-bg: #d6e2f4;
    --bs-btn-hover-border-color: #d6e2f4;
    --bs-btn-active-color: var(--fsc-navy-900);
    --bs-btn-active-bg: #c8d8f0;
    --bs-btn-active-border-color: #c8d8f0;
    --bs-btn-disabled-color: var(--fsc-text-muted);
    --bs-btn-disabled-bg: var(--fsc-surface-alt);
    --bs-btn-disabled-border-color: var(--fsc-border);
    --bs-btn-disabled-opacity: 1;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: .6rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--fsc-radius);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

    .fsc-btn-soft:focus-visible {
        outline: 3px solid var(--fsc-focus-light);
        outline-offset: 2px;
        box-shadow: none;
    }

/* ---------------------------------------------------
    Toolbar: status chips + count + page size
----------------------------------------------------- */
.fsc-results {
    min-width: 0;
    margin-top: 1.75rem;
}

.fsc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: .875rem;
}

.fsc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
    max-width: 100%;
}

.fsc-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 28px;
    padding: .15rem .6rem;
    border: 1px solid var(--fsc-border);
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--fsc-text);
    font-weight: 600;
    font-size: .8rem;
    line-height: 1.2;
}

    .fsc-chip:hover {
        border-color: var(--fsc-navy);
        color: var(--fsc-navy);
    }

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

    /* Pressed: filled navy — also distinguishable by the inverted count badge */
    .fsc-chip[aria-pressed="true"] {
        background-color: var(--fsc-navy-900);
        border-color: var(--fsc-navy-900);
        color: #ffffff;
    }

.fsc-chip__dot {
    width: .55rem;
    height: .55rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--fsc-tone-other-dot);
}

.fsc-chip[aria-pressed="true"] .fsc-chip__dot {
    box-shadow: 0 0 0 2px #ffffff;
}

.fsc-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    padding: .1rem .4rem;
    border-radius: 999px;
    background-color: var(--fsc-tag-bg);
    color: var(--fsc-text);
    font-size: .78rem;
    font-weight: 700;
}

.fsc-chip[aria-pressed="true"] .fsc-chip__count {
    background-color: #ffffff;
    color: var(--fsc-navy-900);
}

.fsc-tone--pending {
    background-color: var(--fsc-tone-pending-dot);
}

.fsc-tone--investigation {
    background-color: var(--fsc-tone-investigation-dot);
}

.fsc-tone--tabled {
    background-color: var(--fsc-tone-tabled-dot);
}

.fsc-tone--dismissed {
    background-color: var(--fsc-tone-dismissed-dot);
}

.fsc-tone--closed {
    background-color: var(--fsc-tone-closed-dot);
}

.fsc-tone--other {
    background-color: var(--fsc-tone-other-dot);
}

.fsc-toolbar__meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}

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

    .fsc-toolbar__count strong {
        color: var(--fsc-text);
    }

.fsc-select-sm {
    width: auto;
    min-height: 36px;
    padding: .3rem 2.25rem .3rem .75rem;
    border: 1px solid var(--fsc-border-input);
    border-radius: var(--fsc-radius);
    color: var(--fsc-text);
    font-size: .9rem;
    font-weight: 600;
}

    .fsc-select-sm:focus {
        border-color: var(--fsc-navy);
        outline: 3px solid var(--fsc-focus-light);
        outline-offset: 1px;
        box-shadow: none;
    }

/* ---------------------------------------------------
    Results table (DataTables 2, Bootstrap 5 styling)
----------------------------------------------------- */
.fsc-table-card {
    max-width: 100%;
    background-color: #ffffff;
    border: 1px solid var(--fsc-border);
    border-radius: var(--fsc-radius-lg);
    box-shadow: var(--fsc-shadow);
    /* Safety net only: the layout below is built to fit. If a very long unbroken value ever
       forces a scroll, complaint-index.js makes the region focusable for keyboard scrolling. */
    overflow-x: auto;
    overflow-y: hidden;
}

    .fsc-table-card.is-scrollable:focus-visible {
        outline: 3px solid var(--fsc-focus-light);
        outline-offset: 2px;
    }

    .fsc-table-card .dt-container > .dt-layout-table {
        margin: 0;
    }

    .fsc-table-card .dt-container .row {
        --bs-gutter-x: 0;
    }

.fsc-dtable {
    --bs-table-bg: transparent;
    --bs-table-color: var(--fsc-text);
    --bs-table-hover-bg: var(--fsc-surface-alt);
    margin: 0 !important;
    border-collapse: collapse !important;
}

    .fsc-dtable > thead > tr > th {
        padding: .9rem 1rem;
        background-color: var(--fsc-surface-alt);
        border-bottom: 1px solid var(--fsc-border) !important;
        color: var(--fsc-text);
        font-size: .85rem;
        font-weight: 700;
        line-height: 1.3;
        vertical-align: middle;
    }

        .fsc-dtable > thead > tr > th:first-child {
            padding-left: 1.25rem;
        }

        /* Sort controls (DataTables makes sortable headers focusable and sets aria-sort) */
        .fsc-dtable > thead > tr > th.dt-orderable-asc,
        .fsc-dtable > thead > tr > th.dt-orderable-desc {
            cursor: pointer;
        }

            .fsc-dtable > thead > tr > th.dt-orderable-asc:hover,
            .fsc-dtable > thead > tr > th.dt-orderable-desc:hover {
                color: var(--fsc-navy);
            }

        .fsc-dtable > thead > tr > th[aria-sort] {
            color: var(--fsc-navy);
        }

        .fsc-dtable > thead > tr > th:focus-visible {
            outline: 3px solid var(--fsc-focus-light);
            outline-offset: -3px;
        }

        .fsc-dtable > thead > tr > th .dt-column-order {
            opacity: .65;
        }

        .fsc-dtable > thead > tr > th[aria-sort] .dt-column-order {
            opacity: 1;
        }

    .fsc-dtable > tbody > tr > td {
        padding: 1rem .75rem;
        border-bottom: 1px solid var(--fsc-row-divider);
        font-size: .925rem;
        vertical-align: middle;
        /* Wrap between words only; DataTables Responsive collapses a column rather than splitting words */
        overflow-wrap: break-word;
    }

        .fsc-dtable > tbody > tr > td:first-child {
            padding-left: 1.25rem;
        }

        .fsc-dtable > tbody > tr > td:last-child {
            padding-right: 1.25rem;
        }

    .fsc-dtable > tbody > tr:hover > td {
        background-color: var(--fsc-surface-alt);
    }

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

/* Column sizing — auto layout so DataTables Responsive can measure what fits */
.fsc-dtable {
    width: 100% !important;
}

    .fsc-dtable .fsc-col-case {
        width: 9rem;
    }

    .fsc-dtable .fsc-col-actions {
        width: 1%;
        text-align: right;
    }

    .fsc-dtable .fsc-col-docs {
        min-width: 11rem;
    }

    .fsc-dtable td.fsc-col-case,
    .fsc-dtable td.fsc-col-actions {
        overflow-wrap: normal;
        white-space: nowrap;
    }

    .fsc-dtable td.fsc-col-type {
        overflow-wrap: normal;
        word-break: normal;
        hyphens: auto;
    }

/* Case number (row header) */
.fsc-case {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    color: var(--fsc-navy);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.fsc-case__hash {
    color: var(--fsc-text-muted);
    font-weight: 400;
}

/* Analyst / laboratory with initials avatar */
.fsc-entity {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.fsc-entity__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--fsc-radius);
    background-color: var(--fsc-navy-100);
    color: var(--fsc-navy-900);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.fsc-entity__avatar--empty {
    background-color: var(--fsc-surface-alt);
    border: 1px dashed var(--fsc-border-input);
    color: var(--fsc-text-muted);
    font-size: 1rem;
}

.fsc-entity__name {
    font-weight: 600;
    line-height: 1.35;
}

.fsc-entity__name--muted {
    color: var(--fsc-text-muted);
    font-style: italic;
    font-weight: 400;
}

/* Discipline tags */
.fsc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fsc-tag {
    display: inline-block;
    max-width: 100%;
    padding: .2rem .55rem;
    background-color: var(--fsc-tag-bg);
    border-radius: var(--fsc-radius-sm);
    color: var(--fsc-text);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Status badges */
.fsc-statuses {
    display: grid;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fsc-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: normal;
}

.fsc-status--pending {
    background-color: var(--fsc-tone-pending-bg);
    color: var(--fsc-tone-pending-fg);
}

.fsc-status--investigation {
    background-color: var(--fsc-tone-investigation-bg);
    color: var(--fsc-tone-investigation-fg);
}

.fsc-status--tabled {
    background-color: var(--fsc-tone-tabled-bg);
    color: var(--fsc-tone-tabled-fg);
}

.fsc-status--dismissed {
    background-color: var(--fsc-tone-dismissed-bg);
    color: var(--fsc-tone-dismissed-fg);
}

.fsc-status--closed {
    background-color: var(--fsc-tone-closed-bg);
    color: var(--fsc-tone-closed-fg);
}

.fsc-status--other {
    background-color: var(--fsc-tone-other-bg);
    color: var(--fsc-tone-other-fg);
}

.fsc-status__meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .3rem;
    color: var(--fsc-text-muted);
    font-size: .8rem;
}

/* Complaint type */
.fsc-type {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

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

/* Document links */
.fsc-doclinks {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .fsc-doclinks a {
        display: inline-flex;
        align-items: flex-start;
        gap: .4rem;
        color: var(--fsc-navy);
        font-size: .875rem;
        font-weight: 600;
        line-height: 1.35;
        text-decoration: underline;
        text-decoration-color: rgba(0, 64, 133, .4);
        text-underline-offset: 3px;
    }

        .fsc-doclinks a:hover {
            color: var(--fsc-navy-900);
            text-decoration-color: currentColor;
        }

        .fsc-doclinks a:focus-visible {
            outline: 3px solid var(--fsc-focus-light);
            outline-offset: 2px;
            border-radius: 4px;
        }

        .fsc-doclinks a .bi {
            margin-top: .1rem;
            color: var(--fsc-danger);
        }

.fsc-doclinks__date {
    color: var(--fsc-text-muted);
    font-weight: 400;
}

.fsc-none,
.fsc-muted {
    color: var(--fsc-text-muted);
}

/* View — the row's link to the complaint (opens in a new tab) */
.fsc-btn-view {
    --bs-btn-padding-x: .85rem;
    --bs-btn-padding-y: .4rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 700;
    --bs-btn-color: var(--fsc-navy);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--fsc-border-input);
    --bs-btn-hover-color: var(--fsc-navy);
    --bs-btn-hover-bg: var(--fsc-navy-100);
    --bs-btn-hover-border-color: var(--fsc-navy);
    --bs-btn-active-color: var(--fsc-navy-900);
    --bs-btn-active-bg: #d6e2f4;
    --bs-btn-active-border-color: var(--fsc-navy);
    --bs-btn-border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 36px;
    white-space: nowrap;
}

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

    .fsc-btn-view:focus-visible {
        outline: 3px solid var(--fsc-focus-light);
        outline-offset: 2px;
        box-shadow: none;
    }

/* Footer: "Page x of y" + pagination */
.fsc-table-card .dt-container > .row:not(.dt-layout-table),
.fsc-table-card .dt-layout-row:not(.dt-layout-table) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 !important;
    padding: .875rem 1.25rem;
    background-color: var(--fsc-surface-alt);
    border-top: 1px solid var(--fsc-border);
}

    .fsc-table-card .dt-container > .row:not(.dt-layout-table) > *,
    .fsc-table-card .dt-layout-row:not(.dt-layout-table) > .dt-layout-cell {
        width: auto;
        margin: 0 !important;
        padding: 0;
    }

/* The case column sorts on a number (C26.74 → 2600074); keep it left-aligned like the mockup */
.fsc-dtable > thead > tr > th.dt-type-numeric,
.fsc-dtable > tbody > tr > td.dt-type-numeric {
    text-align: left;
}

    .fsc-dtable > thead > tr > th.dt-type-numeric div.dt-column-header {
        flex-direction: row;
    }

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

.fsc-table-card .dt-paging .pagination {
    gap: .375rem;
    margin: 0;
}

.fsc-table-card .dt-paging .page-item:first-child .page-link,
.fsc-table-card .dt-paging .page-item:last-child .page-link {
    padding-left: .875rem;
    padding-right: .875rem;
}

.fsc-table-card .dt-paging .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-width: 36px;
    min-height: 36px;
    padding: .3rem .75rem;
    background-color: #ffffff;
    border: 1px solid var(--fsc-border-input);
    border-radius: 8px !important;
    color: var(--fsc-navy);
    font-size: .875rem;
    font-weight: 700;
}

    .fsc-table-card .dt-paging .page-link:hover {
        background-color: var(--fsc-navy-100);
        border-color: var(--fsc-navy);
    }

    .fsc-table-card .dt-paging .page-link:focus-visible {
        outline: 3px solid var(--fsc-focus-light);
        outline-offset: 2px;
        box-shadow: none;
        z-index: 3;
    }

.fsc-table-card .dt-paging .page-item.active .page-link {
    background-color: var(--fsc-navy);
    border-color: var(--fsc-navy);
    color: #ffffff;
}

.fsc-table-card .dt-paging .page-item.disabled .page-link {
    background-color: var(--fsc-surface-alt);
    border-color: var(--fsc-border);
    color: var(--fsc-text-muted);
}

/* Loading / empty / no-results */
.fsc-dtable td.dt-empty {
    padding: 2.5rem 1rem !important;
    text-align: center;
    color: var(--fsc-text-muted);
}

.fsc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

    .fsc-empty img {
        max-width: 160px;
        height: auto;
        margin-bottom: .5rem;
    }

.fsc-empty__title {
    margin: 0;
    color: var(--fsc-text);
    font-size: 1.05rem;
    font-weight: 700;
}

.fsc-empty__text {
    max-width: 30rem;
    margin: 0;
    color: var(--fsc-text-muted);
    font-size: .925rem;
}

.fsc-load-error {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
    border-radius: var(--fsc-radius);
}

/* ---------------------------------------------------
    List page — responsive
----------------------------------------------------- */
/* When the actions wrap under the title they stay right-aligned (they used to jump to the left) */
.fsc-hero__actions {
    margin-left: auto;
    justify-content: flex-end;
}

@media (max-width: 767.98px) {
    .fsc-hero--list {
        padding: 2rem 0 6rem;
    }

    .fsc-hero__actions > .btn {
        flex: 1 1 calc(50% - .625rem);
        justify-content: center;
    }

    .fsc-hero__actions > .fsc-btn-light {
        flex-basis: 100%;
    }

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

    .fsc-search__foot > .btn {
        width: 100%;
        justify-content: center;
    }

    .fsc-search__title {
        font-size: 1.2rem;
    }

    .fsc-toolbar__meta {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .fsc-chips {
        width: 100%;
    }

    .fsc-table-card .dt-container > .row:not(.dt-layout-table),
    .fsc-table-card .dt-layout-row:not(.dt-layout-table) {
        justify-content: center;
        padding: .875rem 1rem;
    }

    .fsc-pagetext {
        width: 100%;
        text-align: center;
    }

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

/* ---------------------------------------------------
    Responsive (DataTables Responsive, as on the other index pages)
    Lower-priority columns collapse on narrow screens; an arrow button in the
    case-number cell expands a row to show them. The button is a real <button>
    with aria-expanded, so it works by keyboard and with screen readers.
----------------------------------------------------- */
.fsc-case-cell {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.fsc-dtr-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: var(--fsc-navy-100);
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--fsc-navy);
    font-size: .85rem;
    cursor: pointer;
}

/* Only while Responsive has collapsed at least one column */
.fsc-dtable.collapsed .fsc-dtr-toggle {
    display: inline-flex;
}

.fsc-dtr-toggle:hover {
    border-color: var(--fsc-navy);
}

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

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

.fsc-dtr-toggle[aria-expanded="true"] {
    background-color: var(--fsc-navy);
    color: #ffffff;
}

    .fsc-dtr-toggle[aria-expanded="true"] .bi {
        transform: rotate(90deg);
    }

/* Our button replaces the extension's built-in ::before arrow */
table.dataTable.fsc-dtable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.fsc-dtable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    padding-left: 1.25rem;
    cursor: default;
}

    table.dataTable.fsc-dtable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
    table.dataTable.fsc-dtable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
        display: none;
    }

/* Expanded row */
.fsc-dtable > tbody > tr.dt-hasChild > td {
    background-color: var(--fsc-surface-alt);
    border-bottom-color: transparent;
}

.fsc-dtable > tbody > tr.child > td.child {
    padding: .25rem 1.25rem 1.25rem;
    background-color: var(--fsc-surface-alt);
    border-bottom: 1px solid var(--fsc-row-divider);
}

.fsc-dtable > tbody > tr.child:hover > td.child {
    background-color: var(--fsc-surface-alt);
}

.fsc-dtr-details {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
    padding: 1rem 1.1rem;
    background-color: #ffffff;
    border: 1px solid var(--fsc-border);
    border-radius: var(--fsc-radius);
}

.fsc-dtr-details__item {
    min-width: 0;
}

.fsc-dtr-details dt {
    margin: 0 0 .35rem;
    color: var(--fsc-text-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fsc-dtr-details dd {
    margin: 0;
    font-size: .925rem;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .fsc-dtable > thead > tr > th,
    .fsc-dtable > tbody > tr > td {
        padding-left: .75rem;
        padding-right: .75rem;
    }

        .fsc-dtable > thead > tr > th:first-child,
        .fsc-dtable > tbody > tr > td:first-child,
        table.dataTable.fsc-dtable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
            padding-left: .75rem;
        }

    .fsc-dtable > tbody > tr.child > td.child {
        padding: .25rem .75rem 1rem;
    }

    .fsc-dtr-details {
        grid-template-columns: 1fr;
        padding: .875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fsc-dtr-toggle .bi {
        transition: none;
    }
}

/* ---------------------------------------------------
    Never let the results table hold the page open
    If any ancestor is a flex or grid item (min-width: auto), a full-width table can keep its
    containers at the old width after the window shrinks. DataTables Responsive then measures that
    stale width and never collapses columns, so the whole page stays wider than the screen until a
    reload. min-width: 0 on every wrapper makes the available width always follow the viewport.
----------------------------------------------------- */
.fsc-main > *,
.fsc-main__body,
.fsc-results {
    min-width: 0;
}

.fsc-table-card,
.fsc-table-card .dt-container,
.fsc-table-card .dt-layout-row,
.fsc-table-card .dt-layout-cell {
    min-width: 0;
    max-width: 100%;
}

/* ---------------------------------------------------
    Accredited laboratories style (Complaints index)
    The hero and search card use the fsc-portal.css classes directly
    (fsc-hero__inner, fsc-hero__icon, fsc-btn-ghost, fsc-card, fsc-search__header,
    fsc-icon-tile, fsc-label, fsc-search__footer). These rules only undo the generic
    list-page overrides above, so the card looks exactly like the labs page.
----------------------------------------------------- */
.fsc-hero--labs .fsc-hero__text {
    flex: 1 1 24rem;
    min-width: 0;
}

.fsc-hero--labs .fsc-hero__actions {
    flex: 0 1 auto;
}

.fsc-search.fsc-search--labs {
    padding: 2rem 2.25rem 1.75rem;
    border-color: rgba(15, 27, 45, .04);
}

.fsc-search--labs .fsc-search__title {
    font-size: 1.3rem;
    line-height: 1.25;
}

.fsc-search--labs .fsc-label,
.fsc-search--labs .fsc-legend {
    display: block;
    margin-bottom: .45rem;
    color: var(--fsc-text);
    font-size: .95rem;
    font-weight: 700;
}

/* Typed-in fields: navy border + ring, as on the labs page (complaint-index.js sets .has-value) */
.fsc-search--labs .fsc-input .form-control:not(:placeholder-shown) {
    border-color: var(--fsc-border-input);
}

.fsc-search--labs .fsc-input.has-value .form-control {
    border-color: var(--fsc-navy);
}

.fsc-search--labs .fsc-input .form-control.is-invalid {
    border-color: var(--fsc-danger);
    box-shadow: 0 0 0 1px var(--fsc-danger);
}

.fsc-search--labs .fsc-search__footer .fsc-applied {
    flex: 1 1 auto;
}

@media (max-width: 767.98px) {
    .fsc-search.fsc-search--labs {
        padding: 1.5rem 1.25rem;
    }

    .fsc-search--labs .fsc-search__title {
        font-size: 1.2rem;
    }

    .fsc-hero--labs .fsc-hero__actions {
        flex-basis: 100%;
    }
}

@media (max-width: 399.98px) {
    .fsc-daterange {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .fsc-daterange__sep {
        display: none;
    }

    .fsc-hero__actions > .btn {
        flex-basis: 100%;
    }
}

/* Windows high contrast / forced colours */
@media (forced-colors: active) {
    .fsc-status,
    .fsc-tag,
    .fsc-chip,
    .fsc-pill,
    .fsc-chip__count,
    .fsc-entity__avatar {
        border: 1px solid CanvasText;
    }

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

    .fsc-chip__dot {
        forced-color-adjust: none;
    }

    .fsc-dtr-toggle,
    .fsc-dtr-details,
    .fsc-search .fsc-icon-tile {
        border: 1px solid CanvasText;
    }
}

@media print {
    .fsc-hero__actions,
    .fsc-search,
    .fsc-toolbar__meta,
    .fsc-col-actions,
    .fsc-table-card .dt-container > .row:not(.dt-layout-table),
    .fsc-table-card .dt-layout-row:not(.dt-layout-table) {
        display: none !important;
    }

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

/* ---------------------------------------------------
    FSC PUBLIC PORTAL — COMPLAINT DETAILS
    Bootstrap 5.3 | Bootstrap Icons | WCAG 2.1 AA
    All text/background pairs ≥ 4.5:1; borders, markers and icons that convey state ≥ 3:1.
    State is never colour-only: every status carries an icon and its text.
----------------------------------------------------- */

/* ---------------------------------------------------
    Hero (detail variant)
----------------------------------------------------- */
.fsc-hero--detail {
    padding: 2.25rem 0 7rem;
}

    .fsc-hero--detail .fsc-hero__title {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .fsc-hero--detail .fsc-hero__row {
        align-items: center;
    }

    .fsc-hero--detail .fsc-eyebrow {
        margin-bottom: .5rem;
    }

.fsc-backlink {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 36px;
    margin: 0 0 .75rem -.375rem;
    padding: .25rem .375rem;
    border-radius: var(--fsc-radius-sm, 6px);
    color: #ffffff;
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
}

    .fsc-backlink:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
        color: #ffffff;
    }

    .fsc-backlink:focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: 2px;
    }

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

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

/* Summary chips under the title */
.fsc-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.fsc-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 36px;
    padding: .35rem .9rem;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .06);
    color: #ffffff;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.3;
}

    .fsc-hero-chip .fsc-svg,
    .fsc-hero-chip .bi {
        flex-shrink: 0;
        width: 1.05rem;
        height: 1.05rem;
        font-size: 1rem;
    }

/* Status chip is solid so it reads first; light tones keep ≥ 4.5:1 text */
.fsc-hero-chip--pending {
    background-color: var(--fsc-tone-pending-bg);
    border-color: var(--fsc-tone-pending-bg);
    color: var(--fsc-tone-pending-fg);
}

.fsc-hero-chip--investigation {
    background-color: var(--fsc-tone-investigation-bg);
    border-color: var(--fsc-tone-investigation-bg);
    color: var(--fsc-tone-investigation-fg);
}

.fsc-hero-chip--tabled {
    background-color: var(--fsc-tone-tabled-bg);
    border-color: var(--fsc-tone-tabled-bg);
    color: var(--fsc-tone-tabled-fg);
}

.fsc-hero-chip--dismissed {
    background-color: var(--fsc-tone-dismissed-bg);
    border-color: var(--fsc-tone-dismissed-bg);
    color: var(--fsc-tone-dismissed-fg);
}

.fsc-hero-chip--closed {
    background-color: var(--fsc-tone-closed-bg);
    border-color: var(--fsc-tone-closed-bg);
    color: var(--fsc-tone-closed-fg);
}

.fsc-hero-chip--other {
    background-color: var(--fsc-tone-other-bg);
    border-color: var(--fsc-tone-other-bg);
    color: var(--fsc-tone-other-fg);
}

.fsc-hero-chip[class*="fsc-hero-chip--"] {
    font-weight: 600;
}

/* ---------------------------------------------------
    Detail card + sections
----------------------------------------------------- */
.fsc-detail {
    background-color: #ffffff;
    border: 1px solid var(--fsc-border, #dde3ec);
    border-radius: var(--fsc-radius-lg, 16px);
    box-shadow: var(--fsc-shadow, 0 10px 30px rgba(10, 35, 80, .08));
}

.fsc-dsection {
    padding: 2rem 2.5rem;
    border-bottom: 1px solid var(--fsc-border, #dde3ec);
}

    .fsc-dsection:last-child {
        border-bottom: 0;
    }

.fsc-dsection__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.fsc-dsection__icon,
.fsc-fact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--fsc-radius, 10px);
    background-color: var(--fsc-navy-100, #e8effa);
    color: var(--fsc-navy, #004085);
    font-size: 1.15rem;
}

/* Heading text always sits beside its icon; only the count badge wraps below */
.fsc-dsection__head > div {
    flex: 1 1 0;
    min-width: 0;
}

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

.fsc-dsection__sub {
    margin: .1rem 0 0;
    color: var(--fsc-text-muted, #545f71);
    font-size: .95rem;
}

.fsc-count {
    flex-shrink: 0;
    padding: .25rem .8rem;
    border-radius: 999px;
    background-color: var(--fsc-navy-100, #e8effa);
    color: var(--fsc-navy-900, #002a59);
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------------------------------------------------
    Overview facts (description list)
    20-column grid: 4 equal tiles, then 8 / 6 / 6
----------------------------------------------------- */
.fsc-facts {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
}

/* dt and dd must be direct children of the group <div> (valid dl), so the icon sits
   inside the dt and is positioned into a left gutter */
.fsc-fact {
    grid-column: span 5;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 92px;
    padding: 1.25rem 1.5rem;
    background-color: var(--fsc-surface-alt, #f7f9fc);
    border: 1px solid var(--fsc-border, #dde3ec);
    border-radius: var(--fsc-radius, 10px);
}

.fsc-fact--wide {
    grid-column: span 8;
    background-color: #ffffff;
}

.fsc-fact--mid {
    grid-column: span 6;
    background-color: #ffffff;
}

.fsc-fact--icon {
    padding-left: calc(1.5rem + 44px + 1rem);
}

    .fsc-fact--icon .fsc-fact__icon {
        position: absolute;
        top: 50%;
        left: 1.5rem;
        transform: translateY(-50%);
    }

.fsc-fact dt {
    margin: 0 0 .3rem;
    color: var(--fsc-text-muted, #545f71);
    font-size: .925rem;
    font-weight: 600;
}

.fsc-fact dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.fsc-fact__value {
    color: var(--fsc-text, #1b2433);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

    .fsc-fact__value .fsc-muted {
        font-size: 1rem;
        font-weight: 500;
    }

.fsc-fact__plain {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 40px;
    font-size: 1.05rem;
}

    .fsc-fact__plain .bi {
        color: var(--fsc-text-muted, #545f71);
        font-size: 1.15rem;
    }

/* Toned status icon tile */
.fsc-fact__icon--pending {
    background-color: var(--fsc-tone-pending-bg);
    color: var(--fsc-tone-pending-fg);
}

.fsc-fact__icon--investigation {
    background-color: var(--fsc-tone-investigation-bg);
    color: var(--fsc-tone-investigation-fg);
}

.fsc-fact__icon--tabled {
    background-color: var(--fsc-tone-tabled-bg);
    color: var(--fsc-tone-tabled-fg);
}

.fsc-fact__icon--dismissed {
    background-color: var(--fsc-tone-dismissed-bg);
    color: var(--fsc-tone-dismissed-fg);
}

.fsc-fact__icon--closed {
    background-color: var(--fsc-tone-closed-bg);
    color: var(--fsc-tone-closed-fg);
}

.fsc-fact__icon--other {
    background-color: var(--fsc-tone-other-bg);
    color: var(--fsc-tone-other-fg);
}

.fsc-status--lg {
    padding: .25rem .75rem;
    font-size: .95rem;
}

/* Analyst / laboratory */
.fsc-detail .fsc-entity {
    gap: 1rem;
}

.fsc-detail .fsc-entity__avatar {
    width: 48px;
    height: 48px;
    font-size: .95rem;
}

.fsc-entity__text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.fsc-entity__link,
.fsc-detail .fsc-entity__name {
    color: var(--fsc-navy, #004085);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
}

.fsc-entity__link {
    display: inline-flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .125rem 0;
    border-radius: 4px;
    text-decoration: underline;
    text-decoration-color: rgba(0, 64, 133, .45);
    text-underline-offset: 4px;
}

    .fsc-entity__link .bi {
        margin-top: .2rem;
        transition: transform .15s ease;
    }

    .fsc-entity__link:hover {
        color: var(--fsc-navy-900, #002a59);
        text-decoration-color: currentColor;
    }

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

    .fsc-entity__link:focus-visible {
        outline: 3px solid var(--fsc-focus-light, #4c9aff);
        outline-offset: 3px;
    }

.fsc-entity__alias {
    color: var(--fsc-text-muted, #545f71);
    font-size: .9rem;
}

/* Discipline tags (with icon) */
.fsc-tag--icon {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .75rem;
    background-color: var(--fsc-navy-100, #e8effa);
    color: var(--fsc-navy-900, #002a59);
    font-size: 1rem;
    font-weight: 500;
}

    .fsc-tag--icon .fsc-svg {
        width: 1.1rem;
        height: 1.1rem;
    }

/* ---------------------------------------------------
    Progress (ordered list, aria-current="step")
----------------------------------------------------- */
.fsc-progress {
    --marker: 44px;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fsc-progress__step {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    flex: 1 1 0;
    min-width: 0;
    padding-right: 1.5rem;
}

    .fsc-progress__step:last-child {
        flex: 0 1 auto;
        padding-right: 0;
    }

    /* Connector line after each step (except last) */
    .fsc-progress__step:not(:last-child)::after {
        content: "";
        flex: 1 1 auto;
        min-width: 1.5rem;
        height: 2px;
        margin-left: .75rem;
        background-color: #c3cad6;
        border-radius: 2px;
    }

    .fsc-progress__step.is-done:not(:last-child)::after {
        background-color: var(--fsc-navy, #004085);
        opacity: .45;
    }

.fsc-progress__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--marker);
    height: var(--marker);
    border: 2px solid #8d97a8;
    border-radius: 50%;
    background-color: #ffffff;
    color: var(--fsc-text-muted, #545f71);
    font-weight: 700;
}

.is-done .fsc-progress__marker {
    background-color: var(--fsc-navy, #004085);
    border-color: var(--fsc-navy, #004085);
    color: #ffffff;
}

.is-current .fsc-progress__marker {
    border-color: var(--fsc-navy, #004085);
    color: var(--fsc-navy, #004085);
    box-shadow: 0 0 0 5px var(--fsc-navy-100, #e8effa);
}

.fsc-progress__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fsc-progress__title {
    color: var(--fsc-text, #1b2433);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

.is-todo .fsc-progress__title {
    color: var(--fsc-text-muted, #545f71);
}

.fsc-progress__detail {
    color: var(--fsc-text-muted, #545f71);
    font-size: .95rem;
}

/* Final step takes the status tone (marker + title) */
.is-final .fsc-progress__marker {
    box-shadow: 0 0 0 5px var(--final-ring, #f6d3cf);
}

.is-final.fsc-progress__step--dismissed {
    --final-ring: #f6d3cf;
}

.is-final.fsc-progress__step--closed {
    --final-ring: #c6e6d2;
}

.is-final.fsc-progress__step--other {
    --final-ring: #d6e2f4;
}

    /* Any other final status (e.g. a decision we have no tone for) uses navy */
    .is-final.fsc-progress__step--other .fsc-progress__marker {
        background-color: var(--fsc-navy, #004085);
        border-color: var(--fsc-navy, #004085);
    }

    .is-final.fsc-progress__step--other .fsc-progress__title {
        color: var(--fsc-navy, #004085);
    }

.is-final.fsc-progress__step--dismissed .fsc-progress__marker {
    background-color: var(--fsc-tone-dismissed-fg);
    border-color: var(--fsc-tone-dismissed-fg);
}

.is-final.fsc-progress__step--closed .fsc-progress__marker {
    background-color: var(--fsc-tone-closed-fg);
    border-color: var(--fsc-tone-closed-fg);
}

.is-final.fsc-progress__step--dismissed .fsc-progress__title {
    color: var(--fsc-tone-dismissed-fg);
}

.is-final.fsc-progress__step--closed .fsc-progress__title {
    color: var(--fsc-tone-closed-fg);
}

/* Previous statuses */
.fsc-history {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--fsc-border, #dde3ec);
}

.fsc-history__title {
    margin: 0 0 .75rem;
    color: var(--fsc-text-muted, #545f71);
    font-size: .95rem;
    font-weight: 700;
}

.fsc-history__list {
    display: grid;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.fsc-history__date {
    color: var(--fsc-text);
    font-size: .925rem;
    font-weight: 600;
}

.fsc-history__panel {
    color: var(--fsc-text-muted, #545f71);
    font-size: .925rem;
}

/* ---------------------------------------------------
    Document table
----------------------------------------------------- */
.fsc-docs {
    border: 1px solid var(--fsc-border, #dde3ec);
    border-radius: var(--fsc-radius, 10px);
    overflow: hidden;
}

.fsc-docs__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

    .fsc-docs__table thead th {
        padding: .9rem 1.5rem;
        background-color: var(--fsc-surface-alt, #f7f9fc);
        border-bottom: 1px solid var(--fsc-border, #dde3ec);
        color: var(--fsc-text, #1b2433);
        font-size: .9rem;
        font-weight: 700;
        text-align: left;
    }

    .fsc-docs__table tbody > tr > * {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--fsc-row-divider, #e7ebf1);
        font-size: 1rem;
        font-weight: 400;
        text-align: left;
        vertical-align: middle;
    }

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

    .fsc-docs__table tbody > tr:hover > * {
        background-color: var(--fsc-surface-alt, #f7f9fc);
    }

.fsc-docs__name {
    width: 40%;
}

    .fsc-docs__name a {
        color: var(--fsc-navy, #004085);
        font-weight: 600;
        text-decoration: underline;
        text-decoration-color: rgba(0, 64, 133, .45);
        text-underline-offset: 4px;
        overflow-wrap: anywhere;
    }

        .fsc-docs__name a:hover {
            color: var(--fsc-navy-900, #002a59);
            text-decoration-color: currentColor;
        }

        .fsc-docs__name a:focus-visible {
            outline: 3px solid var(--fsc-focus-light, #4c9aff);
            outline-offset: 2px;
            border-radius: 4px;
        }

.fsc-docs__name {
    display: table-cell;
}

    .fsc-docs__name > * {
        vertical-align: middle;
    }

.fsc-docs__fileicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: .9rem;
    border-radius: var(--fsc-radius-sm, 8px);
    background-color: var(--fsc-tone-dismissed-bg, #fdecea);
    color: var(--fsc-tone-dismissed-fg, #a11d14);
    font-size: 1.1rem;
}

.fsc-docs__date {
    white-space: nowrap;
}

    .fsc-docs__date .bi {
        margin-right: .4rem;
        color: var(--fsc-text-muted, #545f71);
    }

.fsc-docs__type abbr {
    text-decoration: none;
    cursor: help;
}

.fsc-docs__actions {
    text-align: right !important;
    white-space: nowrap;
}

.fsc-docs__label {
    display: none;
}

.fsc-btn-doc {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .45rem;
    --bs-btn-font-size: .95rem;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--fsc-navy, #004085);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--fsc-border-input, #8d97a8);
    --bs-btn-hover-color: var(--fsc-navy, #004085);
    --bs-btn-hover-bg: var(--fsc-navy-100, #e8effa);
    --bs-btn-hover-border-color: var(--fsc-navy, #004085);
    --bs-btn-active-color: var(--fsc-navy-900, #002a59);
    --bs-btn-active-bg: #d6e2f4;
    --bs-btn-active-border-color: var(--fsc-navy, #004085);
    --bs-btn-border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
}

    .fsc-btn-doc + .fsc-btn-doc {
        margin-left: .5rem;
    }

    .fsc-btn-doc:focus-visible {
        outline: 3px solid var(--fsc-focus-light, #4c9aff);
        outline-offset: 2px;
        box-shadow: none;
    }

/* Empty state */
.fsc-docs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2rem 1rem;
    border: 1.5px dashed var(--fsc-dash, #aeb7c5);
    border-radius: var(--fsc-radius, 10px);
    text-align: center;
}

    .fsc-docs-empty p {
        margin: 0;
        color: var(--fsc-text-muted, #545f71);
    }

/* ---------------------------------------------------
    Responsive
----------------------------------------------------- */
@media (max-width: 1199.98px) {
    .fsc-fact {
        grid-column: span 10;
    }

    .fsc-fact--wide {
        grid-column: span 20;
    }

    .fsc-fact--mid {
        grid-column: span 10;
    }
}

@media (max-width: 991.98px) {
    .fsc-dsection {
        padding: 1.75rem 1.5rem;
    }

    .fsc-hero--detail .fsc-hero__actions {
        width: auto;
    }

    /* Progress: vertical list */
    .fsc-progress {
        flex-direction: column;
        gap: 0;
    }

    .fsc-progress__step {
        flex-direction: row;
        align-items: flex-start;
        padding: 0 0 1.5rem;
    }

        .fsc-progress__step:last-child {
            padding-bottom: 0;
        }

        .fsc-progress__step:not(:last-child)::after {
            position: absolute;
            top: calc(var(--marker) + .375rem);
            bottom: .375rem;
            left: calc(var(--marker) / 2 - 1px);
            width: 2px;
            height: auto;
            min-width: 0;
            margin: 0;
        }

    .fsc-progress__text {
        padding-top: .45rem;
    }

    /* Document rows become stacked cards; ARIA roles on the markup keep table semantics */
    .fsc-docs {
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    .fsc-docs__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .fsc-docs__table,
    .fsc-docs__table tbody {
        display: block;
    }

        .fsc-docs__table tbody > tr {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: .5rem 1.5rem;
            margin-bottom: 1rem;
            padding: 1rem 1.1rem;
            border: 1px solid var(--fsc-border, #dde3ec);
            border-radius: var(--fsc-radius, 10px);
        }

            .fsc-docs__table tbody > tr:last-child {
                margin-bottom: 0;
            }

            .fsc-docs__table tbody > tr > * {
                display: block;
                padding: 0;
                border: 0;
            }

            .fsc-docs__table tbody > tr:hover > * {
                background-color: transparent;
            }

    .fsc-docs__name {
        grid-column: 1 / -1;
        display: flex !important;
        align-items: center;
        width: auto;
    }

    .fsc-docs__label {
        display: block;
        margin-bottom: .1rem;
        color: var(--fsc-text-muted, #545f71);
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .fsc-docs__actions {
        grid-column: 1 / -1;
        display: flex !important;
        gap: .5rem;
        margin-top: .5rem;
        text-align: left !important;
    }

        .fsc-docs__actions .fsc-btn-doc {
            flex: 1 1 0;
            justify-content: center;
        }

    .fsc-btn-doc + .fsc-btn-doc {
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {
    .fsc-hero--detail {
        padding: 1.5rem 0 6rem;
    }

        .fsc-hero--detail .fsc-hero__actions,
        .fsc-hero--detail .fsc-hero__actions > .btn {
            width: 100%;
            justify-content: center;
        }

    .fsc-hero-meta {
        margin-top: 1.1rem;
        gap: .5rem;
    }

    .fsc-hero-chip {
        font-size: .9rem;
    }

    .fsc-dsection {
        padding: 1.5rem 1rem;
    }

    .fsc-dsection__head {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: .75rem;
        margin-bottom: 1.25rem;
    }

    .fsc-dsection__icon {
        width: 40px;
        height: 40px;
    }

    .fsc-dsection__title {
        font-size: 1.15rem;
    }

    /* Text fills the row beside the icon, which pushes the count badge onto its own line */
    .fsc-dsection__head > div {
        flex-basis: calc(100% - 40px - .75rem);
    }

    .fsc-count {
        margin-left: calc(40px + .75rem);
    }

    .fsc-facts {
        gap: .875rem;
    }

    .fsc-fact {
        min-height: 0;
        padding: 1rem;
    }

    .fsc-fact--icon {
        padding-left: calc(1rem + 44px + .875rem);
    }

        .fsc-fact--icon .fsc-fact__icon {
            left: 1rem;
        }
}

@media (max-width: 575.98px) {
    .fsc-fact,
    .fsc-fact--wide,
    .fsc-fact--mid {
        grid-column: 1 / -1;
    }

    /* Lab link flows as text so long names use the full width; the arrow follows the last word */
    .fsc-entity__link {
        display: inline;
    }

        .fsc-entity__link .bi {
            display: inline-block;
            margin-left: .4rem;
            vertical-align: -.1em;
        }

    .fsc-detail .fsc-entity__avatar {
        width: 40px;
        height: 40px;
        font-size: .85rem;
    }
}

/* ---------------------------------------------------
    Preferences & modes
----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fsc-backlink .bi,
    .fsc-entity__link .bi {
        transition: none;
    }
}

@media (forced-colors: active) {
    .fsc-hero-chip,
    .fsc-count,
    .fsc-dsection__icon,
    .fsc-fact__icon,
    .fsc-docs__fileicon,
    .fsc-tag--icon {
        border: 1px solid CanvasText;
    }

    .fsc-progress__marker {
        forced-color-adjust: none;
        border-color: CanvasText;
        background-color: Canvas;
        color: CanvasText;
    }

    .is-done .fsc-progress__marker,
    .is-final .fsc-progress__marker {
        background-color: Highlight;
        border-color: Highlight;
        color: HighlightText;
    }

    .fsc-progress__step:not(:last-child)::after {
        background-color: CanvasText;
    }
}

/* Export to PDF uses the browser's print → Save as PDF */
@media print {
    .fsc-header,
    .fsc-footer,
    .fsc-backlink,
    .fsc-hero__actions,
    .fsc-docs__actions,
    .fsc-skip {
        display: none !important;
    }

    .fsc-hero--detail {
        padding: 0 0 1rem;
        background: none !important;
        color: #000000;
    }

        .fsc-hero--detail .fsc-hero__title,
        .fsc-hero--detail .fsc-eyebrow {
            color: #000000 !important;
        }

    .fsc-hero-chip {
        border-color: #666666;
        color: #000000;
    }

    .fsc-main__body--overlap {
        margin-top: 0 !important;
    }

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

    .fsc-dsection {
        padding: 1rem 0;
        break-inside: avoid;
    }

    .fsc-docs__name a::after {
        content: " (" attr(href) ")";
        color: #444444;
        font-size: .8rem;
        font-weight: 400;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ===================================================
    COMPLAINT SUBMITTED (confirmation page)
    Redirect target after Add complaint.
    Own .fsc-submitted prefix: .fsc-status (status badge) and
    .fsc-progress (details timeline) already exist in this file.
    Uses the portal tokens only — no new :root values.
=================================================== */

/* Heading is focused by script after the redirect: no ring for programmatic focus,
   keyboard focus keeps the dark-surface ring */
.fsc-hero--submitted .fsc-hero__title:focus:not(:focus-visible) {
    outline: none;
}

.fsc-hero--submitted .fsc-hero__title:focus-visible {
    outline: 3px solid var(--fsc-focus-dark);
    outline-offset: 4px;
    border-radius: var(--fsc-radius-sm);
}

/* ---------------------------------------------------
    Card
----------------------------------------------------- */
.fsc-submitted {
    display: block;
    max-width: 880px;
    margin: 0 auto;
    overflow: hidden;
}

.fsc-submitted__summary {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2.25rem 2.25rem 2rem;
}

.fsc-submitted__art {
    flex-shrink: 0;
    width: 132px;
    height: 132px;
}

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

.fsc-submitted__badge {
    margin-bottom: .75rem;
}

.fsc-submitted__title {
    margin: 0 0 .5rem;
    color: var(--fsc-text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

.fsc-submitted__text {
    margin: 0;
    color: var(--fsc-text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ---------------------------------------------------
    What happens next
----------------------------------------------------- */
.fsc-submitted__next {
    padding: 1.75rem 2.25rem 2rem;
    background-color: var(--fsc-surface-alt);
    border-top: 1px solid var(--fsc-border);
}

.fsc-submitted__subhead {
    margin: 0 0 1.25rem;
    color: var(--fsc-text);
    font-size: 1.05rem;
    font-weight: 700;
}

.fsc-submitted-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.fsc-submitted-steps__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
    padding-right: 1rem;
}

    /* Connector line to the next step */
    .fsc-submitted-steps__step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 19px;
        left: 48px;
        right: 8px;
        height: 2px;
        background-color: var(--fsc-border);
    }

    .fsc-submitted-steps__step.is-done:not(:last-child)::after {
        background-color: var(--fsc-success);
    }

.fsc-submitted-steps__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border: 2px solid var(--fsc-border-input);
    border-radius: 50%;
    color: var(--fsc-text-muted);
    font-size: 1.05rem;
}

.fsc-submitted-steps__step.is-done .fsc-submitted-steps__marker {
    background-color: var(--fsc-success);
    border-color: var(--fsc-success);
    color: #ffffff;
}

.fsc-submitted-steps__step.is-current .fsc-submitted-steps__marker {
    background-color: var(--fsc-navy);
    border-color: var(--fsc-navy);
    color: #ffffff;
    box-shadow: 0 0 0 4px var(--fsc-navy-100);
}

.fsc-submitted-steps__body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.fsc-submitted-steps__label {
    color: var(--fsc-text);
    font-weight: 700;
}

.fsc-submitted-steps__step.is-current .fsc-submitted-steps__label {
    color: var(--fsc-navy);
}

.fsc-submitted-steps__text {
    color: var(--fsc-text-muted);
    font-size: .925rem;
    line-height: 1.5;
}

/* ---------------------------------------------------
    Footer: help + actions
----------------------------------------------------- */
.fsc-submitted__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 2.25rem;
    border-top: 1px solid var(--fsc-border);
}

.fsc-submitted__help {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--fsc-text-muted);
    font-size: .95rem;
}

    .fsc-submitted__help .bi {
        color: var(--fsc-navy);
    }

    .fsc-submitted__help a {
        color: var(--fsc-navy);
        font-weight: 700;
        overflow-wrap: anywhere;
    }

.fsc-submitted__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

    /* Comfortable touch targets (WCAG 2.5.8) */
    .fsc-submitted__actions .btn {
        min-height: 44px;
        white-space: nowrap;
    }

/* ---------------------------------------------------
    Complaint submitted — responsive
----------------------------------------------------- */
@media (max-width: 767.98px) {
    .fsc-submitted__summary {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        padding: 1.75rem 1.25rem 1.5rem;
        text-align: center;
    }

    .fsc-submitted__art {
        width: 112px;
        height: 112px;
    }

    .fsc-submitted__title {
        font-size: 1.3rem;
    }

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

    /* Steps stack vertically with a vertical connector */
    .fsc-submitted-steps {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .fsc-submitted-steps__step {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        padding-right: 0;
    }

        .fsc-submitted-steps__step:not(:last-child)::after {
            top: 44px;
            bottom: -1.1rem;
            left: 19px;
            right: auto;
            width: 2px;
            height: auto;
        }

    .fsc-submitted-steps__body {
        padding-top: .45rem;
    }

    /* Visual order = DOM order (WCAG 1.3.2 / 2.4.3): stack, never reverse */
    .fsc-submitted__footer {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
    }

    .fsc-submitted__help {
        justify-content: center;
        text-align: center;
    }

    .fsc-submitted__actions {
        flex-direction: column;
    }

        .fsc-submitted__actions .btn {
            width: 100%;
            justify-content: center;
            white-space: normal;
        }
}

@media (forced-colors: active) {
    .fsc-submitted-steps__marker {
        border: 2px solid CanvasText;
    }

    .fsc-submitted-steps__step.is-current .fsc-submitted-steps__marker {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }

    .fsc-submitted-steps__step:not(:last-child)::after {
        background-color: CanvasText;
    }
}

@media print {
    .fsc-submitted__actions {
        display: none !important;
    }

    .fsc-submitted {
        border: 1px solid #000000;
        box-shadow: none;
    }
}