@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');
@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);

@import "root.css";
@import "kanban.css";


.file-meter {
    width:100%;
    height:1.5rem;
}

/* ================================================================= */
/* #region ALERTS */
a.link, span.link {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    cursor: pointer;
    &:hover {
        color:var(--color-primary-dark) !important;
        text-decoration: underline !important;
    }
}
@media only screen {
    .flash-alert-container {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 0;
        right: 0;
        padding-inline:1em;
        width:75dvw;
        z-index: 10;
        .alert {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            border-radius: 0.5em;

            margin-bottom: 0.5em;
            padding-block: 1em;
            width: 100%;
            height:fit-content;
            span {
                padding-left:1em;
                word-break:keep-all;
                hyphens:auto;
                overflow-wrap:break-word;
            }
            button {
                padding-inline: 1em;
            }
        }
        .alert-danger {
            background-color: var(--background-flash-alert-danger);
            color: var(--color-flash-alert-danger);
        }
        .alert-success {
            background-color: var(--background-flash-alert-success);
            color: var(--color-flash-alert-success);
        }
        .button-alert-close {
            background-color: transparent;
            border: none;
            color: var(--color-flash-alert-button);
            height: 2em;
            padding: 0;
            position: relative;
            right: 0;
            top: 0;
            width: 2em;
            &:hover {
                -webkit-text-stroke: 1px;
                cursor: pointer;
            }
        }
    }
}

@media only screen
and (min-width: 65em) {
    .flash-alert-container {
        justify-content: right;
        width: 30dvw;
    }
}

/* #endregion */
/* ================================================================= */


/* ================================================================= */
/* #region AUTH TGT */


@media only screen {
    .auth-page-content {
        margin-block:auto;
        height:100%;
        display:flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width:100%;
        .banner-container {
            overflow:hidden;
            display: flex;
            width:100%;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            gap: 1.5em;
            .america-banner {
                align-items: center;
                display: flex;
                flex-direction: row;
                gap:0.5em;
                span {
                    color: var(--color-gray);
                    font-size: 0.9em;
                }
                img {
                    height: 1.5em;
                    width: 1.5em;
                }
            }
            .logo-banner {
                display:flex;
                align-items: center;
                justify-content: center;
                max-width:250px;
                gap:0.5em;
                img {
                    width:55px;
                    object-fit: contain;
                }
                p {
                    margin:0;
                    font-size: 20px;
                    color: var(--color-black);
                }
            }
        }
        .content-container {
            display: flex;
            width:100%;
            height:100%;
            .login-form {
                background-color: var(--background-page);
                border-radius: 16px;
                h2 {
                    text-align: center;
                    color:var(--color-primary-dark);
                }
                .button-outline {
                    width: 100%;
                    font-weight: bold;
                }
                form {
                    display: flex;
                    gap:1em;
                    flex-direction: column;
                    margin-block:2.5em;
                }
                .link {
                    color: var(--color-primary-dark);
                    /* font-weight: 500; */
                    &:hover {
                        color: var(--color-primary);
                        cursor: pointer;
                        text-decoration: underline;
                    }
                }
                .forgotten-password {
                    text-align:right;
                    margin-block:0.5em;
                }
                .or-line {
                    color:var(--color-gray);
                    margin-block:1em;
                    position: relative;
                    span {
                        position: absolute;
                        left:50%;
                        top:50%;
                        transform:translate(-50%, -50%);
                        background: var(--background-page);
                        padding-inline:1em;
                    }
                }
                .form-group {
                    display: flex;
                    flex-direction: column;
                    padding-inline: 0;
                    ::placeholder {
                        color: var(--color-input-placeholder);
                        opacity: 1; /* Firefox */
                    }
                    label {
                        align-items: center;
                        color: var(--color-form-label);
                        display: flex;
                        flex-direction: row;
                        /* font-weight: bold; */
                        margin-bottom: 0.5em;
                        white-space: nowrap;
                    }
                    input {
                        font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                        font-size: var(--font-size-input);
                        background-color: var(--background-input);
                        border: var(--border-input);
                        border-radius: 0.5em;
                        box-sizing: border-box;
                        display: block;
                        max-width: 100%;
                        padding: 0.75em;
                        text-align: left;
                        text-decoration: none;
                        position: relative;
                        &:hover {
                            outline: none;
                        }
                        &:focus {
                            outline: none;
                        }
        
                        &.error {
                            border: 1px solid var(--color-danger);
                        }
                        &.valid {
                            border: 1px solid var(--color-green);
                        }
                        &:disabled {
                            opacity: 0.5;
                        }
                    }
                    small {
                        margin-top: 0.5em;
                        min-height: 1.5em;
                    }
                    .validation-error {
                        color: var(--color-validation-error);
                    }
                    .validation-success {
                        color: var(--color-validation-success);
                    }
                }
                button.login-button {
                    width:100%;
                    border-style:none;
                    background: var(--color-primary);
                    border-radius: 5px;
                    color:white;
                    padding:0.75em;
                    border: 1px solid var(--color-primary);
                    font-size: var(--font-size-input);
                    &:hover {
                        border-color: var(--color-primary-dark);
                        background:var(--color-primary-dark);
                    }
                }
                button.reset-button {
                    width:100%;
                    border-style:none;
                    background:var(--color-primary);
                    border-radius: 5px;
                    color:white;
                    font-weight: bold;
                    border: 2px solid var(--color-primary-light);
                    &:hover {
                        background:var(--color-primary-dark);
                        border: 2px solid var(--color-primary);
                    }
                }
                button.back-to-login {
                    width:100%;
                    border-style:none;
                    background:var(--color-primary);
                    border-radius: 5px;
                    color:white;
                    font-weight: bold;
                    border: 2px solid var(--color-primary-light);
                    &:hover {
                        background:var(--color-primary-dark);
                        border: 2px solid var(--color-primary);
                    }
                }
            }
        }
        .login-left {
            width: 100%;
            display:flex;
            align-items: center;
            justify-content: center;
        }
        .login-right {
            display:none;
            align-items: center;
            .ad {
                height:100%;
                background: #3E7FF3;
                background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, var(--color-primary-dark) 80%, var(--color-primary) 100%);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap:1.5rem;
                padding:4rem;
                box-sizing: border-box;
                display:none;
                .ad-title {
                    color:white;
                    font-size:3rem;
                    text-align: center;
                    margin:0;
                    padding-inline:5rem;
                }
                .ad-body {
                    color:white;
                    font-size:1.25rem;
                    padding-inline:4em;
                    text-align: center;
                    font-weight:300;
                    margin:0;
                }
                .ad-button {
                    color:white;
                    background: var(--color-primary);
                    border: 3px solid var(--color-primary-light);
                    border-radius: 50px;
                    font-size:1rem;
                    padding-inline:1.75rem;
                    padding-block: 1rem;
                    font-weight:bold;
                    &:hover {
                        background-color: var(--color-primary-dark);
                        /* border-color: var(--color-primary); */
                    }
                }
            }
            width: 50%;
        }
        .additional-links {
            position: absolute;
            bottom:0;
            ul {
                display:flex;
                list-style:none;
                flex-wrap: wrap;
                justify-content: center;
                padding:0;
                margin:0;
                padding:1em;
                gap:1.5em;
                li {
                    a {
                        text-decoration: underline;
                        color: var(--color-primary);
                        &:hover {
                            color: var(--color-primary-dark);
                            cursor:pointer;
                        }
                    }
                }
            }
        }
    }


    .deleted-account-page-content {
        padding-top: 150px;
        width: 100%;
    }
    .message-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .redirect-container {
        display: flex;
        flex-direction: row;
        margin: 15px 0px;
    }
    .signup-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .forgot-password {
        display:flex;
        justify-content: right;
    }
}

@media only screen 
and (min-width: 601px)
and (max-width: 65em) {
    .auth-page-content {
        .content-container {
            background: #EEF2FF;
            .login-form {
                padding: 3em;
                box-shadow: 0 10px 40px 1px rgba(0, 0, 0, 10%);
                width: calc(100% - 7em);
            }
            .login-left {
                padding:1.5em;
                box-sizing: border-box;
                width: 50%;
            }
            .login-right {
                display:flex;
                padding:1.5em;
                box-sizing: border-box;
                .ad {
                    padding-block:6rem;
                    border-radius:5px;
                    height:fit-content;
                    display:flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap:1.5rem;
                    max-width:100%;
                }
                .ad-title {
                    font-size:2rem;
                }
                .ad-body {
                    padding:0;
                    font-size:1rem;
                }
            }
        }
    }
}

@media only screen
and (min-width: 65em) {
    .auth-page-content {
        .content-container {
            background: #EEF2FF;
            .login-form {
                padding: 3em;
                box-shadow: 0 10px 40px 1px rgba(0, 0, 0, 10%);
                width: 35em;
            }
            .ad {
                display:flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap:1.5rem;
                max-width:100%;
            }
            .login-left {
                background: #EEF2FF;
                width: 50%;
            }
            .login-right {
                display:flex;
            }
        }
    }
}

/* #endregion */
/* ================================================================= */


/* ================================================================= */
/* #region BUTTONS */

@media only screen {
    button, a.button, button-dropdown {
        align-items:center;
        display: flex;
        flex-direction: row;
        font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
        font-size: var(--font-size-regular);
        justify-content: center;
        padding: 0.5em;
        text-align: center;
        &:hover {
            cursor: pointer;
        }
        &[data-mobile="false"] {
            display:none;
        }
        &.compact {
            span {
                display: none;
                margin-inline-start:0;
            }
        }
    }
    button:disabled:not(.button-secondary, .button-border, .button-flat), button-dropdown[disabled="true"]:not(.button-secondary, .button-border, .button-flat) {
        background-color: var(--background-button-disabled);;
        border: var(--border-button-disabled);
        border-radius: 5px;
        color: var(--color-button-disabled);
        &:hover {
            background-color: var(--background-button-disabled);;
            border: var(--border-button-disabled);
            color: var(--color-button-disabled);
        }
    }
    .button-standard {
        background-color: var(--background-button-standard);
        border: var(--border-button-standard);
        border-radius: 8px;
        color: var(--color-button-standard);
        padding: 0.5em 1em;
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
        &:hover {
            background-color: var(--background-button-standard-hover);
            border: var(--border-button-standard-hover);
            color: var(--color-button-standard-hover);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
        i {
            font-size: var(--font-size-button-icon);
        }
        span {
            font-weight: 500;
            margin-inline-start: 0.25em;
            text-wrap: nowrap;
            letter-spacing: 0.01em;
        }
        .bold {
            -webkit-text-stroke: 0.5px;
        }
        &.primary {
            background-color:var(--color-primary);
            color:white;
            &:hover {
                background-color: var(--color-primary-dark);
            }
        }
    }
    .button-secondary {
        color: var(--color-white);
        border-radius: 5px;
        border: 1px solid var(--color-xlight);
        background: var(--color-green);
        i {
            font-size: var(--font-size-button-icon);
        }
        span {
            font-weight: 500;
            margin-inline-start: 0.25em;
            text-wrap:nowrap;
        }
        .bold {
            -webkit-text-stroke: 0.5px;
        }
        &:hover {
            /* color: var(--color-primary); */
            border-color: var(--color-green);
            background: var(--color-green-dark);
        }
        &:disabled, &[disabled="true"] {
            background:transparent;
            opacity: 0.5;
            border: 1px solid var(--color-xlight);
            &:hover {
                background:transparent;
                cursor:default;
                border:1px solid var(--color-xlight);
            }
        }
    }
    .button-border {
        background:transparent;
        border: 1px solid var(--color-primary);
        border-radius: 8px;
        color: var(--color-primary);
        padding: 0.5em 1em;
        transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        i {
            font-size: var(--font-size-button-icon);
        }
        span {
            font-weight: 500;
            margin-inline-start: 0.25em;
            text-wrap:nowrap;
            letter-spacing: 0.01em;
        }
        .bold {
            -webkit-text-stroke: 0.5px;
        }
        &:hover {
            border-color: var(--color-primary-xdark);
            color: var(--color-primary-xdark);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            cursor:pointer;
        }
        &:disabled, &[disabled="true"] {
            background:transparent;
            opacity:0.5;
            border: 1px solid var(--color-primary);
            &:hover {
                background:white;
                cursor:default;
                border: 1px solid var(--color-primary);
                color: var(--color-primary);
            }
        }
        &.compact {
            border:0;
            &:hover {
                background: var(--color-primary-xlight);
            }
        }
    }
    .button-flat {
        background:transparent;
        border: none;
        border-radius: 8px;
        color: var(--color-gray);
        padding: 0.5em 1em;
        transition: background-color 0.15s ease, color 0.15s ease;
        i {
            font-size: var(--font-size-button-icon);
        }
        span {
            font-weight: 500;
            margin-inline-start: 0.25em;
            text-wrap:nowrap;
            letter-spacing: 0.01em;
        }
        .bold {
            -webkit-text-stroke: 0.5px;
        }
        &:hover {
            background: var(--color-gray-light);
            color: var(--color-gray);
            cursor:pointer;
        }
        &:disabled, &[disabled="true"] {
            background:transparent;
            opacity:0.5;
            &:hover {
                background:transparent;
                cursor:default;
                color: var(--color-gray);
            }
        }
        &.compact {
            &:hover {
                background: var(--color-gray-light);
            }
        }
    }
    .button-return {
        display:flex;
        flex-direction: row;
        gap:0.25em;
        text-decoration: none;
        color:var(--color-black);
        i {
            -webkit-text-stroke: 1px;
        }
        &:hover {
            color:var(--color-primary-dark);
        }
    }

    .button-standard-danger {
        background-color: var(--color-danger);
        border: 1px solid transparent;
        border-radius: 8px;
        color: var(--color-button-standard);
        padding: 0.5em 1em;
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
        &:hover {
            background-color: var(--color-danger-dark);
            border: 1px solid transparent;
            color: var(--color-button-standard-hover);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
        i {
            font-size: var(--font-size-button-icon);
        }
        span {
            font-weight: 500;
            margin-inline-start: 0.5em;
            text-wrap: nowrap;
            letter-spacing: 0.01em;
        }
        .bold {
            -webkit-text-stroke: 0.5px;
        }
    }
    .button-standard-success {
        background-color: var(--color-green);
        border: 1px solid transparent;
        border-radius: 8px;
        color: var(--color-button-standard);
        padding: 0.5em 1em;
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
        &:hover {
            background-color: var(--color-green-dark);
            border: 1px solid transparent;
            color: var(--color-button-standard-hover);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
        i {
            font-size: var(--font-size-button-icon);
        }
        span {
            font-weight: 500;
            margin-inline-start: 0.5em;
            text-wrap: nowrap;
            letter-spacing: 0.01em;
        }
        .bold {
            -webkit-text-stroke: 0.5px;
        }
    }
    .button-icon {
        background-color: var(--background-button-icon);
        border: var(--border-button-icon);
        border-radius: 5px;
        color: var(--color-button-icon);
        &:hover {
            background-color: var(--background-button-icon-hover);
            border: var(--border-button-icon-hover);
            color: var(--color-button-icon-hover);
        }
        i {
            font-size: var(--font-size-button-icon);
        }
        span {
            font-weight: 500;
            margin-inline-start: 0.25em;
        }
        .bold {
            -webkit-text-stroke: 0.5px;
        }
    }
    .table-button {
        display:flex;
        padding:0;
        width:100%;
        height:100%;
        background-color: transparent;
        color: var(--color-gray-light);
        border-radius: 5px;
        border:none;
        &.primary {
            color: var(--color-primary);
            i {
                color:var(--color-primary);
            }
            &:hover {
                color: var(--color-primary-dark);
                i {
                    color: var(--color-primary-dark);
                }
            }
        }
        &.green {
            color: var(--color-green);
            i {
                color: var(--color-green);
            }
            &:hover {
                color: var(--color-green-dark);
                i {
                    color: var(--color-green-dark);
                }
            }
        }
        &:hover {
            /* background-color:var(--color-primary); */
            color: var(--color-primary);
            i {
                color: var(--color-primary);
            }
        }
    }
}

@media only screen 
and (orientation: landscape)
and (max-width: 65em) {
    button, a.button, button-dropdown {
        &[data-mobile="false"] {
            display:flex;
        }
        &[data-desktop="false"] {
            display:none;
        }
        &.compact {
            span {
                display: flex;
                margin-inline-start:0.25em;
            }
        }
    }
    .button-border {
        &.compact {
            border: 1px solid var(--color-primary);
            &:hover {
                background: transparent;
            }
        }
    }
}

@media only screen
and (min-width: 65em) {
    button, a.button, button-dropdown {
        &[data-mobile="false"] {
            display:flex;
        }
        &[data-desktop="false"] {
            display:none;
        }
        &.compact {
            span {
                display: flex;
                margin-inline-start:0.25em;
            }
        }
    }
    .button-border {
        &.compact {
            border: 1px solid var(--color-primary);
            &:hover {
                background: transparent;
            }
        }
    }
}

/* #endregion */
/* ================================================================= */


/* ================================================================= */
/* #region MODAL FORM GROUPS AND TABLES TGT */
/* TGT: .multiselect */

@media only screen {
    input[type='date'] {
        appearance:none;
    }
    .select-wrapper {
        position: relative;
        select {
            appearance:none;
            -webkit-text-fill-color: var(--color-black);
            &:has(option[value=""]:checked:disabled),
            &:has(option[value=""]:checked[data-placeholder="true"]) {
                /* Matches the search-input placeholder, which uses the same token. */
                -webkit-text-fill-color: var(--color-input-placeholder);
            }
        }
        &::after {
            font-family: 'Bootstrap-icons';
            content: '\F282';
            position:absolute;
            right:0;
            top:50%;
            transform:translateY(-50%);
            right:0.75em;
        }
    }
    .date-wrapper {
        position:relative;
        input[type="date"] {
            appearance:none;
            -webkit-text-fill-color: var(--color-black);
            text-align:left;
        }
        /* &::after {
            font-family: 'Bootstrap-icons';
            content: '\F1F6';
            position:absolute;
            right:0;
            top:50%;
            transform:translateY(-50%);
            right:0.75em;
        } */
    }
}

@media only screen {
    .modal-body {
        /* The gutter between the two cells of a .form-row. Declared here rather than on
           .form-row itself so .form-group.half-width can subtract half of it and land at
           exactly a row cell's width -- a standalone half-width field has no row to
           inherit from. Change it once and both stay in step. */
        --form-row-gap: 1em;
        .split-transaction-group {
            padding:1em;
            margin-bottom:1em;
            position:relative;
            border-radius:5px;
            border: 1px solid var(--color-border);
            background: var(--color-xlight);
            display:flex;
            flex-direction:column;
            justify-content: space-between;
            align-items: center;
            .button-icon:not(:disabled) {
                color:red;
                height:fit-content;
            }
            .button-icon:disabled {
                background:none;
            }
            .form-group {
                width:100%;
                small {
                    display:none;
                }
            }
            &:first-of-type {
                margin-top:1em;
            }
            button.button-icon {
                position: absolute;
                right:0;
                top:0;
            }
        }
        .link {
            color: var(--color-primary);
            font-weight:bold;
        }
        .link:hover {
            cursor:pointer;
            color:var(--color-primary-dark);
            text-decoration: underline;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            padding-block-end: 0.5em;
            padding-inline: 0;
            height:fit-content;
            ::placeholder {
                color: var(--color-input-placeholder);
                opacity: 1; /* Firefox */
            }
            label {
                align-items: center;
                color: var(--color-form-label);
                display: flex;
                flex-direction: row;
                font-weight: bold;
                /* justify-content: space-between; */
                margin-bottom: 0.5em;
                white-space: nowrap;
                pointer-events: none;
                gap:0.5em;
                button {
                    background:none;
                    border:none;
                    color:var(--color-primary);
                    pointer-events: auto;
                    border-radius: 5px;
                    padding:0.25em;
                    &:hover {
                        cursor:pointer;
                        background: var(--color-xlight);
                    }
                }
            }
            /* Grouped setting toggles sit flush against each other so the group reads
               as one checklist. Opt in per field via `'compact': True`. */
            &.form-group--compact {
                padding-block-end: 0;
            }
            /* A dropdown that can create the record it picks from puts a plus button
               beside the input (field spec key `add_new`). The button is a sibling of
               the input rather than wrapped with it, because both dropdown builders
               reach the modal body through container.parentElement -- so the row is
               laid out here instead. Label and validation message span both columns;
               everything stretches so the button matches the input's height. */
            &:has(> .field-add) {
                display: grid;
                grid-template-columns: 1fr auto;
                column-gap: var(--space-sm);
                > label,
                > small {
                    grid-column: 1 / -1;
                }
                /* Square: the height comes from the input it sits beside, so the
                   ratio needs border-box and no inline padding to match it. */
                .field-add {
                    aspect-ratio: 1;
                    box-sizing: border-box;
                    padding-inline: 0;
                }
            }
            &:has(> input[type="checkbox"]) {
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                gap: var(--space-sm);
                label {
                    margin-bottom: 0;
                    font-weight: var(--font-weight-medium);
                    font-size: var(--font-size-regular);
                }
                input[type="checkbox"] {
                    width: 1.1em;
                    height: 1.1em;
                    min-height: 0;
                    padding: 0;
                    border-radius: 0.2em;
                    cursor: pointer;
                    accent-color: var(--color-primary);
                    order: -1;
                }
                small { display: none; }
            }
            /* &.validation-form-group {
                label::after{
                    content:'*';
                }
            } */
            .rating-container {
                display: flex;
                flex-direction: row;
                justify-content: center;
                /* gap:0.5em; */
                .rating-star {
                    &::before {
                        font-family: 'Bootstrap-icons';
                        content: '\F588';
                        color: var(--color-xlight);
                        font-size:2.5em;
                    }
                    &.perm-half::before {
                        content: '\F587';
                        color:gold;
                    }
                    &.perm-full::before {
                        content: '\F586';
                        color:gold;
                    }
                    &.half::before {
                        content: '\F587';
                        color: gold;
                    }
                    &.full::before {
                        content: '\F586';
                        color: gold;
                    }
                    &.empty::before {
                        content: '\F588';
                        color: var(--color-xlight);
                    }
                    &:has(+.rating-star) {
                        padding-right:0.5em;
                    }
                }
            }
            input, select, textarea, search-input {
                font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                font-size: 1.25em;
                background-color: var(--background-input);
                border: var(--border-input);
                border-radius: 0.5em;
                box-sizing: border-box;
                display: block;
                max-width: 100%;
                width:100%;
                padding: 0.5em;
                text-align: left;
                text-decoration: none;
                position: relative;
                min-height: calc(1.25em + 1em);
                &:hover {
                    outline: none;
                }
                &:focus {
                    outline: none;
                    border-color: var(--color-primary);
                    box-shadow: 0 0 0 3px var(--color-primary-xlight);
                }

                &.error {
                    border: 1px solid var(--color-danger);
                }
                &.valid {
                    border: 1px solid var(--color-green);
                }
                &[type='date'] {
                    appearance: none;
                }
            }
            /* input::-webkit-calendar-picker-indicator {
                position: absolute;
                right: 0;
                height: 100%;
                width:100%;
                margin: 0;
                padding: 0;
                opacity: 0;
                cursor: pointer;
            } */
            video {
                /* display:none; */
                position:absolute;
                visibility: hidden;
            }
            textarea {
                min-height: 4em;
            }
            input[type='checkbox'] {
                accent-color: var(--color-checkbox);
                height: 1.25em;
                vertical-align: middle;
                width: 1.25em;
                &:hover {
                    cursor: pointer;
                }
                &:focus {
                    outline: 0;
                }
            }
            input[type='radio'] {
                accent-color: var(--color-radio);
                height: 1em;
                margin: 0;
                width: 1em;
                &:hover {
                    cursor: pointer;
                }
                &:focus {
                    outline: 0;
                }
            }
            select {
                cursor: pointer;
            }
            small {
                color: var(--color-danger);
                font-size: 1em;
                margin-top: 0.4em;
                min-height: 1.5em;
                opacity: 0;
                transition: opacity 0.15s ease;
                &:not(:empty) {
                    opacity: 1;
                }
            }
            .input-readonly {
                width: 100%;
                padding-left: 0;
                background-color: transparent;
                border-color: transparent;
                &:focus {
                    background-color: transparent;
                    outline: none;
                }
            }
            .input-row { /* use to put multiple inputs (typically checkboxes) in a single row */
                align-items: center;
                display: flex;
                flex-direction: row;
                span {
                    align-items: center;
                    display: flex;
                    flex-direction: row;
                    margin-inline-end: 1em;
                }
            }
            .list-input-div {
                align-items: stretch;
                display: flex;
                flex-direction: row;
                width: 100%;
                input {
                    width: 100%;
                }
            }
            .list-prompt {
                font-size: var(--font-size-modal-prompt);
                font-style: italic;
                margin-block-end: 0.5em;
                text-wrap: wrap;
            }
            .multi-select {
                font-family: Helvetica, Arial, sans-serif;
                background-color: var(--background-input);
                border: var(--border-input);
                border-radius: 0.5em;
                display: flex;
                align-items:center;
                font-size: var(--font-size-multiselect);
                padding: 0.25em;
                text-align: left;
                text-decoration: none;
                min-width: 200px;
                box-sizing: border-box;
                position: relative;
        
                input {
                    border: none;
                    border-bottom: var(--border-input);
                    padding: 0.5em;
                    border-radius: 0;
                }
                &:hover {
                    cursor:pointer;
                }
                &::after {
                    font-family: "Bootstrap-icons";
                    content: "\F229";
                    position: absolute;
                    right: 1em;
                }
                span {
                    height: 1.5em;
                }
                .selected-item-label:has(+.selected-item-label) {
                    &::after {
                        content: ',';
                        margin-right: 0.5em;
                    }
                }
                .multi-select-options {
                    z-index: 100;
                    border-radius: 0.5em;
                    overflow:hidden;
                    background-color: var(--background-input);
                    margin-top: 2em;
                    border: var(--border-input);
                    display: none;
                    min-width: 100%;
                    &.display {
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: flex;
                        flex-direction: column;
                    }
                }
                .multi-select-option {
                    display: flex;
                    align-items: center;
                    padding-inline: 1em;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    max-width:100%;
                    input[type="checkbox"] {
                        height: 1em;
                        width: 1em;
                    }  
                    &:hover {
                        &:not(.disabled) { 
                            background: var(--color-primary);
                            color: white;
                        }
                        .disabled:hover {
                            cursor: default;
                        }
                        
                    }
                }
            }
            .validation-error {
                color: var(--color-validation-error);
            }
            .validation-success {
                color: var(--color-validation-success);
            }

            &:has(input[type="file"]) {
                input {
                    display:none;
                }
                .xlsx-preview {
                    border: 3px dashed var(--color-primary-light);
                    border-radius: 5px;
                    max-height:300px;
                    height:300px;
                    overflow-y:auto;
                    overflow-x:auto;
                    position: relative;
                    &:not(:has(table)):not(:has(.pdf-name)) {
                        &.drag {
                            &::before {
                                content: 'Drop File';
                            }
                            border-color: var(--color-primary-dark);
                            background:var(--color-xlight);
                        }
                        border: 3px dashed var(--color-primary-light);
                        &::before {
                            height:100%;
                            content: 'Attach File...';
                            display:flex;
                            align-items: center;
                            justify-content: center;
                            color:var(--color-light);
                        }
                    }
                    .pdf-name {
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 1em;
                        font-weight: 500;
                        padding: 0 16px;
                        text-align: center;
                        word-break: break-all;
                    }
                    &:hover {
                        cursor:pointer;
                        border-color: var(--color-primary-dark);
                        background:var(--color-xlight);
                    }
                }
            }
            #split-transaction-container {
                display:flex;
                flex-direction: column;
                border-radius:5px;
                gap:1em;
                overflow:hidden;
                .split-transaction-item {
                    border: 1px solid var(--color-border);
                    border-radius:5px;
                    display:flex;
                    flex-direction: column;
                    padding:0.5em;
                    box-sizing:border-box;
                    position:relative;
                    background: var(--background-page);
                    row-gap:0.5em;
                    .split-buttons {
                        display:flex;
                        flex-direction: row;
                        justify-content: end;
                        gap:0.25em;
                        order: -1;
                        padding-bottom:0.5em;
                    }
                    .split-tags {
                        order:1;
                        grid-column: span 4;
                        display: flex;
                        flex-direction: row;
                        flex-wrap:wrap;
                        max-width: calc(100% - 1.25em);
                        gap: 0.25em;
                        .tag {
                            padding-block:0.25em;
                            padding-inline:0.25em;
                            display:flex;
                            flex-direction: row;
                            justify-content: space-between;
                            align-items: center;
                            background:var(--color-primary);
                            color:white;
                            border-radius:0.25em;
                            text-overflow:ellipsis;
                            font-size: calc(var(--font-size-body) * 1.3);
                            .delete-tag {
                                margin-left:0.5em;
                            }
                            .delete-tag:hover {
                                cursor:pointer;
                                color:var(--color-primary-dark);
                            }
                            .tag-link {
                                color:var(--color-light);
                                margin-left:0.25em;
                                &:hover {
                                    color:var(--color-primary);
                                }
                            }
                    }
                    }
                    &::before {
                        content: attr(data-split-num);
                        position:absolute;
                        color:var(--color-gray);
                        top:1em;
                        left:1em;
                    }
                    .form-group {
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        input {
                            background: var(--background-page);
                        }
                        label {
                            font-size:0.75rem;
                            position: absolute;
                            left:0.5em;
                            top:-0.4rem;
                            z-index:1;
                            color:var(--color-xlight);
                            background:var(--background-page);
                            background-clip: padding-box;
                            font-weight:normal;
                            padding-inline:0.25em;
                        }
                    }
                }
                .split-transaction-footer {
                    order: 1;
                    display: grid;
                    grid-template-columns: 1fr 1fr 0.5fr auto;
                    padding-inline:0.5em;
                    padding-block:0.5em;
                    border:1px solid var(--color-border);
                    border-radius:5px;
                    .difference-sum {
                        font-weight:500;
                        color:var(--color-gray);
                        grid-column: span 3; 
                        padding-right:2.25em;
                        display:flex;
                        align-items: center;
                    }
                }
            }
            &:has(#split-transaction-container) {
                grid-column:span 2;
            }
            /* Define attachments field */
            .file-attachment-form-group {
                display:flex;
                flex-direction: column;
                /* gap:0.5em; */
                .no-attachments {
                    width:100%;
                    text-align: center;
                    background:var(--color-xlight);
                    color:var(--color-muted);
                    padding-block:0.5em;
                    box-sizing: border-box;
                    border-radius:5px;
                }
                .file-attachment {
                    width:100%;
                    display:flex;
                    flex-direction: row;
                    align-items:center;
                    border-top:1px solid var(--color-border);
                    .file-icon {
                        width:1em;
                        padding:0.5em;
                        i {
                            height:100%;
                            font-size:1rem;
                        }
                    }
                    .filename {
                        width:100%;
                        text-wrap:nowrap;
                        text-overflow: ellipsis;
                        overflow:hidden;
                    }
                    .form-group {
                        width:100%;
                        input {
                            border-top-right-radius: 0;
                            border-bottom-right-radius: 0;
                        }
                    }
                    .attachment-buttons {
                        display:flex;
                        align-items:center;
                        gap:0.25em;
                        padding-inline:0.5em;
                    }
                    button {
                        border:none;
                        height:100%;
                        border-radius:5px;
                        background:transparent;
                        &.view-button {
                            border-radius: 0;
                        }
                        &:not(:disabled)&:hover {
                            background: var(--color-button);
                        }

                        &.primary:hover {
                            color: var(--color-primary-dark);
                        }
                        &.danger:hover {
                            color: var(--color-danger);
                        }
                    }
                    &:last-child {
                        border-bottom: 1px solid var(--color-border);
                    }
                    &:hover {
                        background: var(--color-xlight);
                        cursor:pointer;
                    }
                }
            }
        }
        .form-row {
            display: flex;
            flex-direction: row;
            gap: var(--form-row-gap);
            grid-column: span 2;
            .form-group {
                flex: 1;
                min-width: 0;
            }
        }
        .table-wrapper {
            grid-column: span 2;
        }
        table {
            border: none;
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
            overflow: auto;
            page-break-inside: avoid;
            
            thead {
                position: sticky;
                top: 0;
                border-inline: 1px solid var(--color-primary);
                z-index:10;
                th {
                    border-radius: 0;
                    background: var(--background-table-heading);
                    color: var(--color-table-heading);
                    overflow: hidden;
                    padding-inline: 0.5em;
                    padding-block: 1em;
                    text-align: inherit;
                    text-overflow: ellipsis;
                    text-transform: uppercase;
                    white-space: nowrap;
                }
            }
            tbody {
                tr {
                    background: var(--background-table-row);
                    td {
                        height: 2.5em;
                        max-width: 30ch;
                        &:first-child {
                            border-left:1px solid var(--color-border);
                        }
                        &:last-child {
                            border-right:1px solid var(--color-border);
                        }
                        padding-inline:0.5em;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        span {
                            padding-inline: 0.5em;
                        }
                        .form-group {
                            padding:0;
                            input, search-input {
                                border:none;
                                background:transparent;
                                border-radius:0;
                                &:disabled {
                                    pointer-events: none;
                                }
                            }
                        }
                        .button-cell {
                            display:flex;
                            align-items:center;
                            justify-content: right;
                            visibility:hidden;
                            gap:1em;
                        }
                        .inline-form {
                            align-items: stretch;
                            cursor: pointer;
                            display: flex;
                            flex-direction: row;
                            input {
                                font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                                background-color: transparent;
                                /* background-color: var(--background-input); */
                                /* border: 1px solid transparent; */
                                /* border: var(--border-input); */
                                border:none;
                                border-radius: 0.5em;
                                box-sizing: border-box;
                                display: block;
                                font-size: var(--font-size-body);
                                min-width: none;
                                width: 100%;
                                padding-inline: 0.5em;
                                text-align: left;
                                text-decoration: none;
                                &:hover {
                                    outline: none;
                                }
                                &:focus {
                                    outline: none;
                                }
                            }
                        }
                    }
                    
                    &.active {
                        background: white;
                        td {
                            .button-cell {
                                visibility: visible;
                            }
                            &:has(.form-group):hover {
                                background:white;
                            }
                        }
                        td:has(input:focus) {
                            background:white;
                        }
                    }
                    &:last-child {
                        border-bottom:1px solid var(--color-border);
                    }
                    &:nth-child(odd) {
                        background: var(--background-table-row-light);
                    }
                    &:hover {
                        background: var(--background-table-row-hover);
                    }
                    &:has(input[data-locked="true"]) {
                        background: var(--color-xlight);
                    }
                }
            }
            tfoot {
                tr {
                    td {
                        padding-inline:0.6em;
                        padding-block:0.5em;
                        font-weight:600;
                        .table-button {
                            width:100%;
                            text-align: center;
                        }
                    }
                }
            }
            /* tr:nth-child(odd) {
                background: var(--background-table-row-light);
                &:hover{
                    cursor: pointer;
                    background: var(--background-table-row-hover);
                }
            } */
        }
        .list-form {
            display:flex;
            gap:0.25em;
            .form-group {
                width:100%;
            }
        }
    }
}

/* Tablet */
@media only screen
and (orientation: landscape)
and (max-width: 65em) {
    .modal-body {
        .form-group {
            #split-transaction-container {
                border: 1px solid var(--color-border);
                gap:0;
                .split-transaction-item {
                    border:none;
                    border-radius:0;
                    display:grid;
                    column-gap:0.5em;
                    grid-template-columns: 1fr 1fr 0.5fr auto;
                    padding-left:1.5em;
                    &:has(+.split-transaction-item) {
                        border-bottom: 1px solid var(--color-border);
                    }
                    .split-buttons {
                        order:1;
                        justify-content: center;
                        align-items: center;
                        padding: 0;
                    }
                    &:nth-child(even) {
                        background:var(--background-page);
                        .form-group {
                            input {
                                background: var(--background-page);
                            }
                            label {
                                background: var(--background-page);
                                background-clip: padding-box;
                            }
                        }
                    }
                    &::before {
                        top:50%;
                        transform:translateY(-50%);
                        left:0.5em;
                    }
                    .form-group {
                        padding:0;
                    }
                    .split-tags:not(:empty) {
                        padding-top:0.5em;
                    }
                    &.five {
                        grid-template-columns: 1fr 1fr 1fr 1fr 0.5fr auto;
                        padding-left:0.5em;
                    }
                    &.four {
                        grid-template-columns: 1fr 1fr 1fr 0.5fr auto;
                    }
                    &.two {
                        grid-template-columns: 1fr 0.5fr auto;
                    }
                }
                .split-transaction-footer {
                    border:none;
                    border-top: 1px solid var(--color-border);
                    border-radius:0;
                }
            }
        }
    }
}

/* Full Screen */
@media only screen
and (min-width: 65em) {
    .modal-body {
        .form-group {
            #split-transaction-container {
                border: 1px solid var(--color-border);
                gap:0;
                .split-transaction-item {
                    border:none;
                    border-radius:0;
                    display:grid;
                    column-gap:0.5em;
                    grid-template-columns: 1fr 1fr 0.5fr auto;
                    padding-left:1.5em;
                    &:has(+.split-transaction-item) {
                        border-bottom: 1px solid var(--color-border);
                    }
                    &.five {
                        grid-template-columns: 1fr 1fr 1fr 1fr 0.5fr auto;
                        padding-left:0.5em;
                    }
                    &.four {
                        grid-template-columns: 1fr 1fr 1fr 0.5fr auto;
                    }
                    &.two {
                        grid-template-columns: 1fr 0.5fr auto;
                    }
                    .split-buttons {
                        order:1;
                        justify-content: center;
                        align-items: center;
                        padding: 0;
                    }
                    &:nth-child(even) {
                        background:var(--background-page);
                        .form-group {
                            input {
                                background: var(--background-page);
                            }
                            label {
                                background: var(--background-page);
                                background-clip: padding-box;
                            }
                        }
                    }
                    &::before {
                        top:50%;
                        transform:translateY(-50%);
                        left:0.5em;
                    }
                    .form-group {
                        padding:0;
                    }
                    .split-tags:not(:empty) {
                        padding-top:0.5em;
                    }
                }
                .split-transaction-footer {
                    border:none;
                    border-top: 1px solid var(--color-light);
                    border-radius:0;
                }
            }
        }
    }
}

/* Line Items Table (schema-driven) */
.modal-body {
    .form-group:has(.line-items-table) {
        grid-column: span 2;
    }

    .line-items-table {
        display: table;
        width: 100%;
        outline: 1px solid var(--color-border);
        border-radius: 0.5em;

        thead {
            display: table-header-group;
            position: static;
            border-inline: none;
            background: transparent;
            th {
                background: var(--background-table-row);
                color: var(--color-gray);
                font-size: 0.7rem;
                font-weight: 500;
                padding-inline: 0.5em;
                padding-block: 0.4em;
                text-transform: none;
                letter-spacing: 0;
                border-bottom: 1px solid var(--color-border);
            }
        }

        tbody {
            display: table-row-group;
            tr { display: table-row; }
        }

        tbody tr:nth-child(even) {
            --background-input: var(--background-table-row);
            td .form-group {
                input, select {
                    background: var(--background-table-row);
                }
            }
        }

        tbody tr:hover {
            --background-input: var(--background-table-row-hover);
            td .form-group {
                input, select {
                    background: var(--background-table-row-hover);
                }
            }
        }

        tbody td {
            display: table-cell;
            vertical-align: middle;
            font-size: var(--font-size-body);
            padding: 0;
            cursor: text;
            .form-group {
                height: 100%;
                padding: 0;
                input, select, search-input {
                    width: 100%;
                    box-sizing: border-box;
                    font-size: inherit;
                    height:100%;

                    &:focus {
                        box-shadow: inset 0 0 0 3px var(--color-primary-xlight)
                    }
                }
                input[type="checkbox"] {
                    width: 1em;
                    height: 1em;
                    display: block;
                    margin: auto;
                    cursor: pointer;
                    &:focus { box-shadow: none; }
                }
                select {
                    border: none;
                    border-radius: 0;
                }
                search-input {
                    display: block;
                    min-height: 2em;
                    min-width:200px;
                }
            }
            button {
                margin:0.25em;
            }
            &.line-item-delete-cell {
                padding-inline: 0.25em;
                .line-item-row-delete {
                    background: none;
                    border: none;
                    cursor: pointer;
                    color: var(--color-gray);
                    padding: 0.25em;
                    line-height: 1;
                    font-size: 1rem;
                    border-radius: 0.25em;
                    &:hover { color: var(--color-red); background: var(--background-page-secondary); }
                }
            }
            &:last-child {
                width: 1px;
                white-space: nowrap;
            }
            &:first-child, &:last-child {
                border:none;
            }
        }

        tfoot {
            display: table-footer-group;
            /* border: 1px solid var(--color-border); */
            border-radius: 0.5em;
            td {
                display: table-cell;
                font-weight: normal;
                padding-block:0;
                padding-left:0.6em;
                padding-right:0;
                button {
                    margin:0.25em;
                }
                .line-items-footer {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    #total-sum {
                        font-weight: 500;
                        color: var(--color-gray);
                    }
                }
            }
        }
    }
}

/* Read-only stat blocks inside a modal. Mirrors the .landing-total-* metric blocks used on
   landing and record pages -- those rules are all scoped under .landing-container, so the
   measurements are repeated here rather than shared. Keep the two in step. */
.modal-metrics {
    display: grid;
    /* One continuous panel: the border and rounding live on the container and the blocks
       carry none of their own, so the row reads as a single surface with no internal
       dividers. Mirrors how a landing `total` group renders three metrics. */
    background: var(--background-page);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    overflow: hidden;

    .modal-metric-block {
        padding: var(--space-md);
        min-width: 0;

        .modal-metric-label {
            font-size: var(--font-size-small);
            font-weight: var(--font-weight-semi-bold);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--color-gray);
            margin: 0 0 var(--space-xs) 0;
        }

        .modal-metric-amount {
            font-size: var(--font-size-large);
            font-weight: var(--font-weight-medium);
            color: var(--color-primary);
            margin: 0;
            font-variant-numeric: tabular-nums;
        }

        .modal-metric-subtitle {
            font-size: var(--font-size-small);
            color: var(--color-muted);
            margin: var(--space-sm) 0 0 0;
            border-top: 1px solid var(--color-border);
            padding-top: var(--space-sm);
        }

        &.modal-metric-block--orange .modal-metric-amount { color: var(--color-orange); }
        &.modal-metric-block--red    .modal-metric-amount { color: var(--color-danger); }
        &.modal-metric-block--blue   .modal-metric-amount { color: var(--color-blue); }
        &.modal-metric-block--green  .modal-metric-amount { color: var(--color-green); }
        &.modal-metric-block--muted  .modal-metric-amount { color: var(--color-muted); }
    }
}

/* Stack the blocks rather than squeezing three across a phone-width modal. */
@media (max-width: 65em) {
    .modal-metrics {
        grid-template-columns: 1fr !important;
    }
}

/* Readonly schema-table cell: text in place of an input, with the value carried by a
   sibling hidden input so parseForm still collects it. Padding is set here because
   .line-items-table zeroes td padding, expecting a .form-group input to supply its own. */
.line-item-readonly {
    display: block;
    /* The cell's .form-group is a full-height column flex container, so vertical-align on
       the td does nothing for this text -- it pins to the top of the flex line. Auto block
       margins centre it instead, which matters because the row's height is set by the
       taller editable cells beside it (the category picker). */
    margin-block: auto;
    padding-inline: var(--space-sm);
    padding-block: var(--space-xs);
    font-size: var(--font-size-body);
}

/* Scroll container for a line_items table (opt-in via the field's `scrollable` flag). The
   frame moves here from .line-items-table, since the table's own outline would scroll out
   of view along with it. */
.line-items-scroll {
    /* Tall enough that an import reads as a table to review rather than a peephole; the
       modal body still scrolls if the viewport cannot fit it. */
    max-height: 30em;
    overflow-y: auto;
    border-radius: var(--radius-base);
    outline: 1px solid var(--color-border);

    .line-items-table {
        outline: none;
        border-radius: 0;
    }
}

/* Parsed-transaction preview in the import confirm modal -- a line_items schema table
   with fixed rows, so it scrolls rather than growing the modal without bound. */
.parse-preview-table {
    /* Keep column context while scrolling. Sticky goes on the th, not the thead:
       .line-items-table pins thead to position: static, and thead-level sticky is less
       reliable across browsers than cell-level. The th background is already opaque, so
       rows pass underneath rather than showing through.

       The z-index has to clear the search-input's placeholder, which its shadow CSS paints
       at z-index 10 -- a <search-input> host establishes no stacking context, so that value
       competes directly with this one and otherwise bleeds over the header while scrolling.
       It stays far below the options dropdown's z-index 1000000, so an open dropdown still
       renders above the header. */
    thead th {
        position: sticky;
        top: 0;
        z-index: 20;
    }
}

/* Import review: the account's existing transactions for the statement period beside the rows
   the file carries. Two independent lists read against each other by eye, so they sit in equal
   columns and keep identical row heights and column order. */
.compare-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    width: 100%;
}

/* Nothing recorded over the period, so there is no list to compare against and the incoming rows
   take the whole width instead of half of it beside an empty column. */
.compare-columns--single {
    grid-template-columns: 1fr;
}

.compare-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    /* Without this a wide memo forces the grid track wider than its share, breaking the equal
       columns the comparison depends on. min-width:0 lets the track shrink and the table scroll
       inside it instead. */
    min-width: 0;
}

.compare-panel-heading {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
}

/* The framed area: the rows and the count bar beneath them. The outline lives here rather than on
   the scroll wrapper so the footer reads as part of the same table, the way .pagination-container
   does under the app's other tables. */
.compare-box {
    display: flex;
    flex-direction: column;
    /* Lets the scroll wrapper's max-height govern instead of the content forcing the box taller. */
    min-height: 0;
    /* Fills the panel, which the grid already stretches to the taller of the two columns, so both
       frames end on the same line and the two footers can be read against each other. Without it
       the panel stretches and the frame inside it stays at content height.

       Basis stays auto rather than the 0% that the `flex: 1` shorthand sets: the grid row is
       auto-sized from its items, so a zero basis would have this contribute no height and collapse
       both panels to their headings. Auto keeps the content sizing the row and grow does the rest. */
    flex: 1 1 auto;
    outline: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    /* Stops the scroll wrapper's square corners poking past the frame's rounded ones. */
    overflow: hidden;
}

.compare-scroll {
    width: 100%;
    /* Takes up whatever height the frame gained from matching the other column, so the shorter
       list ends with empty rows area rather than a footer floating mid-frame. Basis auto for the
       same reason as .compare-box, and min-height: 0 so it can shrink under its content, which is
       what lets it scroll once the cap below bites. */
    flex: 1 1 auto;
    min-height: 0;
    /* Only the block axis scrolls. Leaving both axes on auto lets them trigger each other: this
       box takes its height from its content, so a horizontal scrollbar would eat height inside a
       scrollport already sized without it, forcing a vertical scrollbar, which narrows the width
       and can re-arm the horizontal one -- a few pixels of scroll at any row count. Nothing here
       needs to scroll sideways: date and amount are nowrap at fixed width and the cells between
       them truncate. */
    overflow-x: hidden;
    overflow-y: auto;
    /* Roughly fourteen rows rather than six. Two bounds because either one alone fails at an
       extreme: the dvh term keeps the lists inside a short viewport, since .modal-dialog is
       capped at 95dvh and the body would otherwise take over the scrolling and carry the two
       headings off screen; the em term stops a tall monitor stretching the panel to a height
       nobody scans. Whichever is smaller wins. */
    max-height: min(55dvh, 34em);
}

.compare-table {
    display: table;
    width: 100%;
    border-collapse: collapse;

    /* .modal-body table styles every table inside a modal, and it assumes one that frames itself:
       a border-left on each row's first cell, a border-right on its last, a border-bottom on the
       last row, and blue border-inline on the thead. Correct for those tables, wrong here -- this
       table's frame is .compare-box's outline, so each of those sits directly on top of it and
       reads as a doubled edge, and the last row's border stacks with the footer's border-top. The
       right edge escapes only by accident, its border landing on the hidden fields cell.

       The .compare-box prefix is what makes these win. Written as bare descendants of
       .compare-table they only tie .modal-body table's selectors at (0,2,4) and depend on coming
       later in the file; the extra class puts them a whole class level clear of the tie. */
    .compare-box & thead {
        border-inline: none;
        background: transparent;
        /* .modal-body table pins thead sticky itself. The sticky here goes on the th instead, the
           way .line-items-table and .parse-preview-table do it, since cell level sticky is the
           more reliable of the two -- so the group is released to avoid two stacked sticky
           ancestors fighting over the same offset. */
        position: static;
    }

    .compare-box & tbody tr td:first-child,
    .compare-box & tbody tr td:last-child {
        border-inline: none;
    }

    .compare-box & tbody tr:last-child {
        border-bottom: none;
    }

    /* The same header treatment as .line-items-table: muted small caps-free labels on the row
       background, not the app's blue table heading. It needs the .compare-box prefix for the same
       reason .line-items-table gets its look from sitting inside .modal-body -- that puts it at two
       classes, which is what beats .modal-body table thead th. Without it this rule sits at one
       class against that rule's three elements and loses, which is what left the heading row blue
       and uppercased while the rest of the table already matched. */
    .compare-box & thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--background-table-row);
        color: var(--color-gray);
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-medium);
        text-align: start;
        padding-inline: var(--space-sm);
        padding-block: var(--space-xs);
        border-bottom: 1px solid var(--color-border);
        /* Both neutralize the modal table's heading, which uppercases and tracks its labels. The
           column names are already written in title case, as the line_items schemas write theirs. */
        text-transform: none;
        letter-spacing: 0;
    }

    tbody td {
        vertical-align: middle;
        font-size: var(--font-size-body);
        color: var(--color-black);
        padding-inline: var(--space-sm);
        padding-block: var(--space-xs);
    }

    /* No row striping here. .modal-body table already stripes at the tr level and paints its hover
       there too, and a background on the td would sit on top of both -- the stripe would look right
       while the hover silently did nothing, since a cell background always covers its row's. */

    .compare-tick {
        width: 1%;
        .form-group {
            /* Centring is done by this flex box, not by the cell. vertical-align: middle on a
               .modal-body table td does not centre a block-level child -- it pins to the top of the
               flex line, which .line-item-readonly documents for the same reason -- so the group has
               to fill the cell and centre the tick itself. Filling is safe alongside the scroll
               container's max-height because padding is zeroed here: with no padding of its own
               there is nothing for the percentage height to resolve past and overflow the row with.
               .form-group's own 0.5em block-end padding is what left the tick sitting high. */
            height: 100%;
            padding: 0;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        input[type="checkbox"] {
            /* The browser default margin on a checkbox is asymmetric (3px 3px 3px 4px), which is
               enough to read as off-centre in a column this narrow. */
            margin: 0;
            width: 1em;
            height: 1em;
        }
    }

    /* Date and amount are short fixed-shape values that must not wrap and steal row height.
       Memo and category absorb the slack: they truncate rather than widen the table, because a
       long category name would otherwise push the amount out of view. Both carry a title
       attribute, so the full text is one hover away. */
    .compare-cell--date,
    .compare-cell--amount {
        white-space: nowrap;
        width: 1%;
    }
    .compare-cell--amount {
        text-align: end;
    }
    .compare-cell:not(.compare-cell--date):not(.compare-cell--amount) {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Shown but not actionable: a locked or reconciled record, one carrying attachments or splits,
   and every transfer leg, since a leg belongs to a second account this screen is not scoped to. */
.compare-row--locked td {
    color: var(--color-gray);
}

.compare-locked-flag {
    font-size: var(--font-size-small);
    color: var(--color-gray);
}

/* The existing list's delete/undo toggle. Its label is the action the click performs, so a marked
   row reads "Undo" beside its struck-through values. min-width holds the column steady through the
   swap, since "Undo" is two characters shorter and the column is sized to its content. */
.compare-delete-btn {
    background: none;
    border: none;
    padding: 0;
    min-width: 4em;
    white-space: nowrap;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--color-danger);
    cursor: pointer;

    &:hover {
        color: var(--color-danger-dark);
        text-decoration: underline;
    }
}

/* Undoing is not the destructive direction, so it drops the danger colour. */
.compare-delete-btn--undo {
    color: var(--color-primary);

    &:hover {
        color: var(--color-primary-dark);
    }
}

/* Excluded from the result, on either list: a record marked for deletion, or an incoming row that
   will not be imported. Both mean this row will not exist once the user submits, so both read the
   same. Scoped to .compare-cell so the strike lands on the record's own values and not on the
   toggle or tick sharing the row. .compare-row--locked stays muted but never struck, so an
   untouchable row is not mistaken for an excluded one. */
.compare-row--excluded .compare-cell {
    color: var(--color-gray);
    text-decoration: line-through;
}

/* Running tally at the foot of the frame, styled after .pagination-container: its own band, ruled
   off from the rows, count at the start. padding-inline matches the table cells' so the count
   lines up with the tick column it is counting. */
.compare-panel-footer {
    border-top: 1px solid var(--color-border);
    background: var(--background-pagination);
    padding-inline: var(--space-sm);
    padding-block: var(--space-xs);
    font-size: var(--font-size-small);
    color: var(--color-gray);

    strong {
        color: var(--color-black);
        font-weight: var(--font-weight-medium);
    }
}

/* A pending deletion reads as one whatever the scroll position, and matches the Delete buttons
   that queued it. The doubled class is deliberate: a single one would only tie the rule above. */
.compare-panel-footer.compare-panel-footer--alert strong {
    color: var(--color-danger);
}

/* Side by side stops working long before the modal does. Stacked, the two lists still read in
   order -- existing first, incoming second -- which is the same comparison, just vertically. */
@media (max-width: 65em) {
    .compare-columns {
        grid-template-columns: 1fr;
    }
}

.line-items-add-btn {
    color: var(--color-primary);
    background: none;
    border: none;
    border-radius: 5px;
    display: flex;
    align-items: center;
    i {
        font-size: var(--font-size-button-icon);
        -webkit-text-stroke: 0.5px;
    }
    span {
        font-weight: 500;
        margin-inline-start: 0.25em;
    }
    &:hover {
        color: var(--color-primary-dark);
        background: none;
        border: none;
        text-decoration: underline;
    }
}

/* Line Items Table — mobile card view */
@media (max-width: 65em) {
    .modal-body .line-items-table {
        display: block;
        outline:none;

        thead {
            display: none !important;
        }

        tbody {
            display: block;
            tr.input-group {
                display: flex;
                flex-direction: column;
                border: 1px solid var(--color-border);
                border-radius: 0.5em;
                padding: 0.5em;
                margin-bottom: 0.5em;
                background: var(--background-page);
            }
        }

        tbody tr:nth-child(even) {
            --background-input: transparent;
            td .form-group {
                input, select {
                    background: transparent;
                }
            }
        }

        tbody tr:hover {
            --background-input: transparent;
            td .form-group {
                input, select {
                    background: transparent;
                }
            }
        }

        tbody td {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            height: auto;
            padding-block: 0.25em;
            border: none !important;
            .form-group {
                input, select, search-input {
                    border: 1px solid var(--color-border);
                    font-size:initial;
                    border-radius: 0.5em;
                    &:focus {
                        border: 1px solid var(--color-primary-dark);
                        box-shadow: 0 0 0 3px var(--color-primary-xlight);
                    }
                }
            }
            &::before {
                content: attr(data-label);
                display: block;
                font-size: 0.75rem;
                color: var(--color-gray);
                font-weight: normal;
                padding-inline: 0.5em;
                padding-block: 0.25em;
            }
            &:last-child {
                order: -1;
                width: auto;
                align-self: flex-end;
                padding: 0;
                &::before {
                    padding:0;
                }
                button {
                    margin:0;
                }
            }
        }

        tbody td:has(input[type="checkbox"]) {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: var(--space-xs);
            padding-block: var(--space-xs);
            &::before {
                padding: 0;
                color: var(--color-gray);
                font-size: var(--font-size-body);
            }
            .form-group {
                flex: 0;
                input[type="checkbox"] {
                    border: none;
                    border-radius: 0;
                    box-shadow: none;
                    width: 1.1em;
                    height: 1.1em;
                    display: block;
                }
            }
        }

        tfoot {
            display: block;
            border: 1px solid var(--color-border);
            td { display: block; }
            tr {
                display:block;
            }
        }
    }
}

/* #endregion */
/* ================================================================= */

/* ================================================================= */
/* #region MODAL DIVIDER */
.modal-body {
    .form-group.modal-divider {
        padding-block: var(--space-xs) var(--space-md);
        border-bottom: 2px solid var(--color-border);

        &.modal-divider--labeled {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: var(--space-sm);
            border-bottom: none;
            &::before {
                content: '';
                flex: 0 0 var(--space-md);
                height: 2px;
                background: var(--color-border);
            }
            &::after {
                content: '';
                flex: 1;
                height: 2px;
                background: var(--color-border);
            }
            .modal-divider-label {
                font-size: var(--font-size-body);
                font-weight: var(--font-weight-semi-bold);
                color: var(--color-primary);
                white-space: nowrap;
            }
        }

        small { display: none; }
    }
}
/* #endregion */
/* ================================================================= */

/* ================================================================= */
/* #region MODAL GROUP LABEL */
.modal-body {
    .form-group.modal-group-label {
        padding-block-end: var(--space-xs);
        label {
            font-size: var(--font-size-body);
            font-weight: var(--font-weight-semi-bold);
            color: var(--color-form-label);
            margin-bottom: 0;
        }
        small { display: none; }
    }
}
/* #endregion */
/* ================================================================= */

/* ================================================================= */
/* #region LINE ITEM CARDS */
.modal-body {
    & .form-group:has(.line-items-cards) {
        grid-column: span 2;
    }
}

.line-items-cards {
    width: 100%;
}

.line-item-card {
    position: relative;
    padding: 0.5em 0;
    padding-left: 1.6em;
    padding-right: 2.5em;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.5em;

    &:last-of-type { border-bottom: none; }

    & .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.2em;
        padding: 0;
        & label.modal-label {
            font-size: 0.75rem;
            color: var(--color-gray);
            font-weight: 500;
            display:none;
        }
        & input.modal-input, & select.modal-input {
            width: 100%;
            box-sizing: border-box;
        }
    }
}

.line-items-cards-body {
    &.line-items-cards-body--no-divider {
        .line-item-card {
            border-bottom:0;
        }
    }
}

.line-item-card-primary {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 0;
    color: var(--color-green);
    font-size: 0.85rem;
    pointer-events: none;
}

.line-item-card-row {
    display: flex;
    gap: 0.5em;
    & .form-group { flex: 1; min-width: 0; }
}

.line-item-card-delete {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray);
    padding: 0.25em;
    line-height: 1;
    font-size: 1rem;
    border-radius: 0.25em;
    &:hover { color: var(--color-red); background: var(--background-page-secondary); }
}

.line-items-cards-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.5em 0 0.1em;
    gap: 0.4em;
    font-size: 0.85rem;
    color: var(--color-text);
    background: none;
    border: none;
    cursor: pointer;
    &:hover { color: var(--color-primary); }
    & i { color: var(--color-primary); font-size: 1.1rem; }
    &::after {
        content: '';
        display: block;
        flex: 1;
        height: 1px;
        background: var(--color-border);
    }
}
/* #endregion */
/* ================================================================= */



/* ================================================================= */
/* #region DOMAIN CHANGER */
@media only screen {
    .sidebar-logo {
        position: relative;
    }
    .sidebar-logo:hover {
        .domain-changer {
            display:flex;
            flex-direction: column;
            position: absolute;
            z-index:4;
            top:0;
            left:100%;
            padding-block:1.5em;
            background: var(--background-page);
            box-shadow: 0 2px 5px 0 var(--color-shadow);
            .subdomain {
                display:flex;
                align-items: center;
                gap:0.5em;
                color: var(--color-black);
                font-weight:500;
                font-size:1.15em;
                text-decoration: none;
                padding:1em;
                padding-inline:2em;
                text-wrap:nowrap;
                img {
                    box-sizing: border-box;
                    height:60px;
                }
                i {
                    height:35px;
                    width:35px;
                    font-size:2em;
                    text-align: center;
                }
                &:hover {
                    background: var(--background-tile-hover);
                }
            }
        }
    }
    .domain-changer {
        display:none;
    }
}

/* #endregion DOMAIN CHANGER */
/* ================================================================= */




/* ================================================================= */
/* #region UPPY */
@media only screen {
    .modal-body {
        .form-group[data-field="uppy"] .uppy-container {
            border-radius: 5px;
            /* border: 2px dashed var(--color-border); */
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: white;
            /* overflow:hidden; */
            .scan-document-button {
                width:fit-content;
                padding-inline:1em;
                background:transparent;
                color:var(--color-primary);
                border: 1px solid var(--color-primary);
                font-weight:bold;
                font-size:1.25em;
                &:hover {
                    background:var(--color-primary-xlight);
                    color:var(--color-primary-dark);
                }
            }
            /* &:has(#uppy .uppy-Dashboard-files) {
                border: 1px solid var(--color-border);
            } */
            #uppy {
                width:100%;
                display:flex;
                .uppy-Root {
                    width:100%;
                    display:flex;
                    .uppy-Dashboard {
                        width:100%;
                        display:flex;
                        .uppy-Dashboard-inner {
                            width:100%;
                            display:flex;
                            background:transparent;
                            .uppy-Dashboard-close {
                                display:none;
                            }
                            .uppy-Dashboard-innerWrap {
                                width:100%;
                                display:flex;
                                flex-direction: column;
                                min-height:150px;
                                justify-content: center;
                                align-items:center;
                                .uppy-Dashboard-dropFilesHereHint {
                                    background-image:none;
                                    padding-top:0;
                                }
                                .uppy-Dashboard-AddFiles {
                                    width:100%;
                                    display:flex;
                                    flex-direction: column;
                                    align-items: center;
                                    border:none;
                                    margin:0;
                                    /* padding:2em; */
                                    .uppy-Dashboard-AddFiles-title {
                                        width:100%;
                                        flex-direction: row;
                                        display:flex;
                                        align-items: center;
                                        justify-content: center;
                                        display:flex;
                                        font-size:17px;
                                        color:var(--color-gray);
                                        gap:0.25em;
                                        .uppy-Dashboard-browse {
                                            font-size:17px;
                                            padding:0;
                                            border:none;
                                            background:transparent;
                                            color: var(--color-primary-light);
                                            &:hover {
                                                color:var(--color-primary-dark);
                                            }
                                        }
                                    }
                                    .uppy-Dashboard-AddFiles-list {
                                        margin-top:0;
                                    }
                                    .uppy-Dashboard-AddFiles-info {
                                        display:none;
                                    }
                                }
                                &:has(.uppy-Dashboard-files) {
                                    align-items: normal;
                                    .scan-document-button {
                                        display:none;
                                    }
                                }
                            }
                        }
                        &.uppy-Dashboard--isDraggingOver {
                            .scan-document-button {
                                display:none;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media only screen
and (orientation: landscape)
and (max-width: 65em) {
    .modal-body {
        .form-group[data-field="uppy"] .uppy-container .scan-document-button {
            display:none;
        }
    }
}

@media only screen
and (min-width: 65em) {
    .modal-body {
        .form-group[data-field="uppy"] .uppy-container .scan-document-button {
            display:none;
        }
    }
}
/* #endregion UPPY */
/* ================================================================= */





/* ================================================================= */
/* #region TAG CARDS */
.expanding-container {
    .card-section {
        display:flex;
        flex-direction: column;
        .card-section-title {
            margin:0;
            text-align: center;
            margin-bottom:0.25em;
            color:var(--color-gray-light);
            font-weight:500;
        }
        &:has(+.card-section) {
            margin-bottom:1.5em;
        }
    }
    .card {
        border:1px solid var(--color-border);
        border-radius: 5px;
        padding:1.5em;
        display:flex;
        flex-direction: row;
        gap:1.5em;
        background:var(--background-page-secondary);
        .card-left {
            font-size:1.5em;
            i {
                background: var(--background-page);
                border-radius: 5px;
                padding:0.25em;
                aspect-ratio: 1;
                display:flex;
                height:25px;
                width:25px;
                align-items: center;
                justify-content: center;
            }
        }
        .card-right {
            .card-heading-container {
                font-size:1.5em;
                display:flex;
                flex-direction: row;
                gap:0.25em;
                .card-heading {
                    margin:0;
                    font-weight:bold;
                }
            }
            .card-body {
                display:flex;
                flex-direction: column;
                gap:0.25em;
            }
            .card-info {
                display:flex;
                flex-direction: row;
                gap:0.25em;
                color:var(--color-gray);
                .card-info-text {
                    margin:0;
                }
            }
        }
        &:hover {
            cursor:pointer;
            box-shadow: 0 2px 5px 0px var(--color-shadow);
            background:var(--background-tile-hover);
        }
        &:has(+.card) {
            margin-bottom:1.5em;
        }
        &.active {
            /* background: var(--color-primary); */
            box-shadow: inset -10px 0 var(--color-primary);
        }
    }
}

/* #endregion TAG CARDS */
/* ================================================================= */

/* ================================================================= */
/* #region CARD COMPONENT */

.card {
    border: var(--border-modal-container);
    border-radius: 5px;
    background: var(--background-page-secondary);
    color: var(--color-card-text);
    display: flex;
    flex-direction: column;
    margin-block: 0.5em;
    max-width: 100%;
    position: relative;
    .card-heading-container {
        display: flex;
        flex-direction: row;
        overflow: visible;
        padding: 1.5em 1.5em 0 1.5em;
        .card-icon {
            height: fit-content;
            padding: 0.5em;
            border-radius: 5px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            color: var(--color-primary);
            background: var(--background-page);
            margin-inline-end: 1em;
            font-size: 1.25em;
            font-weight: bold;
            i {
                font-size: 1.5rem;
            }
            .initials-icon {
                align-items: center;
                background-color: var(--color-primary);
                border-radius: 100%;
                color: var(--color-white);
                display: flex;
                flex-direction: row;
                height: 2.25em;
                justify-content: center;
                margin-inline-end: 0.5em;
                width: 2.25em;
            }
        }
        .card-title-field-container {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .card-title {
                font-size: 1.25em;
                display: inline-block;
                font-weight: 600;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 100%;
                i {
                    margin-inline-end: 0.5em;
                }
            }
            .card-title-inactive {
                color: var(--color-card-title-inactive);
                display: inline-block;
                font-weight: 600;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 100%;
                &::before {
                    font-family: 'Bootstrap-icons';
                    content: '\F47A';
                    margin-right: 0.5em;
                }
            }
            .card-field-container {
                display: flex;
                flex-direction: column;
                .card-field-row {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 0.25em;
                    font-size: var(--font-size-small);
                    justify-content: flex-start;
                    margin-block-start: 0.5em;
                    .field-part-muted {
                        color: var(--color-muted);
                    }
                    .field-part-label {
                        color: var(--color-muted);
                        text-transform: uppercase;
                        font-size: 0.85em;
                    }
                    .card-field-right {
                        color: var(--color-gray);
                        margin-left: auto;
                        padding-left: 1em;
                    }
                    i {
                        margin-inline-end: 0;
                    }
                }
            }
        }
    }
    &:has(.card-body-toggle) .card-body {
        padding-bottom: 0;
    }
    .card-body {
        color: black;
        padding-bottom: 1.5em;
        padding-inline: 1.5em;
        &.card-body--clamped {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            padding-bottom: 0;
        }
    }
    .card-body-toggle {
        background: none;
        border: none;
        cursor: pointer;
        display: block;
        font-size: var(--font-size-body);
        padding-bottom: 1.5em;
        padding-inline: 1.5em;
        text-align: left;
        .card-body-toggle-dots {
            color: var(--color-text);
        }
        .card-body-toggle-label {
            color: var(--color-gray);
        }
        &:hover {
            text-decoration: underline;
            .card-body-toggle-dots,
            .card-body-toggle-label {
                color: var(--color-primary);
            }
        }
    }
    .card-field-container {
        .card-field-row {
            font-size: var(--font-size-small);
            color: var(--color-gray);
            i.record-open { color: var(--color-primary); }
            i.record-approved { color: var(--color-green); }
            i.record-danger { color: var(--color-danger); }
            i.record-gray { color: var(--color-gray); }
        }
    }
    .card-pin-button.pinned {
        color: var(--color-primary);
    }
    .card-button-container {
        align-items: center;
        align-self: flex-start;
        display: flex;
        flex-direction: row;
        flex-shrink: 0;
        margin-left: auto;
        button {
            padding-block: 0;
            &:hover {
                background-color: var(--background-card-button-hover);
            }
        }
    }
    &.card--comment {
        border: none;
        background: none;
        .card-heading-container {
            padding: 0 0 var(--space-xs) 0;
        }
        .card-comment-header {
            display: flex;
            align-items: flex-start;
            gap: var(--space-sm);
            flex: 1;
        }
        .card-comment-content {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
            flex: 1;
        }
        .card-comment-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .card-avatar {
            height: 1.5rem;
            width: 1.5rem;
            min-width: 1.5rem;
            border-radius: var(--radius-pill);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: var(--font-size-small);
            font-weight: var(--font-weight-semi-bold);
            flex-shrink: 0;
        }
        .card-comment-meta {
            display: flex;
            align-items: center;
            .card-comment-author {
                font-size: var(--font-size-small);
                color: var(--color-muted);
            }
            .card-comment-date {
                font-size: var(--font-size-small);
                color: var(--color-muted);
            }
        }
        .card-body {
            background: var(--background-container);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-base);
            padding: var(--space-xs) var(--space-sm);
            font-size: var(--font-size-regular);
        }
    }
    &.card-inactive {
        background-color: var(--background-card-inactive);
    }
    &.card-clickable {
        &:hover {
            box-shadow: var(--box-shadow-card-hover);
            cursor: pointer;
            .card-heading-container {
                .card-icon { color: var(--color-card-text-hover); }
                .card-title-field-container {
                    .card-title { color: var(--color-card-text-hover); }
                }
            }
        }
    }
}

/* #endregion CARD COMPONENT */
/* ================================================================= */

/* ================================================================= */
/* #region NOTE CARDS PAGE */

.note-cards-container {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    /* Carries its own surface rather than letting the grey page body show through,
       matching the card lists. Nested uses (the record side column, the comments
       drawer) already sit on white, so this is a no-op there. */
    background: var(--background-page);
    .empty-message {
        text-align: center;
        color: var(--color-muted);
    }
}

/* #endregion NOTE CARDS PAGE */
/* ================================================================= */





/* ================================================================= */
/* #region MODAL */

@media only screen {
    .modal-fade {
        align-items: center;
        background-color: var(--background-modal-fade);
        display: none;
        flex-direction: row;
        height: 100%;
        justify-content: center;
        left: 0;
        position: fixed;
        top: 0;
        width: 100dvw;
        z-index: 3;
        .modal-dialog { 
            background-color: var(--background-modal);
            border-radius: 0.5em;
            box-shadow: var(--box-shadow-modal);
            display: flex;
            flex-direction: column;
            max-height: 95dvh;
            overflow: hidden;
            position: relative;
            width: 95dvw;
            .modal-header {
                align-items: center;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding-block-start: 1em;
                padding-block-end: 1em;
                padding-inline: 1em;
                .modal-title-container {
                    color: var(--color-modal-title);
                    display: flex;
                    flex-direction: column;
                    .modal-title {
                        font-size:1.25rem;
                        font-weight:bold;
                        margin-block: 0;
                        margin-inline-end: 2em;
                        margin-inline-start: 0;
                        button-dropdown {
                            font-size: 0.70em;
                            font-weight:500;
                        }
                        button {
                            font-size: 0.70em;
                        }
                    }
                    .modal-title.color-danger {
                        color: var(--color-modal-title-danger);
                    }
                    .modal-subtitle {
                        font-weight: 400;
                        font-size: 0.9rem;
                        color: var(--color-gray);
                    }
                }
                .modal-button-container {
                    display: flex;
                    flex-direction: row;
                    &:empty {
                        display:none;
                    }
                }
                .modal-button-close {
                    background-color: var(--background-button-modal);
                    border: var(--border-button-modal);
                    border-radius: 0.25em;
                    color: var(--color-button-modal);
                    height: 2em;
                    padding: 0;
                    position: relative;
                    right: 0;
                    top: 0;
                    width: 2em;
                    -webkit-text-stroke: 1px;
                    &:hover {
                        background-color: var(--background-button-modal-hover);
                        border: var(--border-button-modal-hover);
                        color: var(--color-button-modal-hover);
                    }
                }
            }
            .modal-body {
                display: flex;
                flex-direction: column;
                height: 100%;
                overflow: auto;
                padding-inline: 1em;
                .modal-prompt {
                    font-size: var(--font-size-modal-prompt);
                    color: var(--color-gray);
                    text-wrap: wrap;
                }
                .delete-summary {
                    display: flex;
                    flex-direction: column;
                    gap: var(--space-sm);
                    background-color: var(--background-container);
                    border-radius: var(--radius-md);
                    padding: var(--space-md);

                    small { display: none; }

                    .delete-summary-title {
                        font-size: var(--font-size-small);
                        font-weight: var(--font-weight-semi-bold);
                        letter-spacing: 0.05em;
                        text-transform: uppercase;
                        color: var(--color-gray);
                    }

                    .delete-summary-list {
                        list-style: disc;
                        margin: 0;
                        padding-inline-start: var(--space-md);
                        display: flex;
                        flex-direction: column;
                        gap: var(--space-sm);
                    }

                    .delete-summary-item {
                        font-size: var(--font-size-body);
                        color: var(--color-black);
                    }
                }
                .color-swatch-row {
                    display: flex;
                    gap: 0.5em;
                    flex-wrap: wrap;
                    .color-swatch {
                        width: 2rem;
                        height: 2rem;
                        border-radius: 50%;
                        border: none;
                        cursor: pointer;
                        padding: 0;
                        transition: box-shadow 0.15s, transform 0.15s;
                        &:hover { transform: scale(1.1); }
                        &.color-swatch--selected {
                            transform: scale(1.1);
                            box-shadow: 0 0 0 1.5px white, 0 0 0 3px var(--color-black);
                        }
                    }
                }
            }
            .modal-body.table-modal {
                .table-modal-utils-container {
                    grid-column: span 2;
                }
                .table-modal-utils-container {
                    padding-block:0.5em;
                    border-top: 2px solid var(--color-primary);

                    form {
                        position: relative;
                        display:flex;
                        flex-direction: row;
                        gap: 1em;
                        .filter-option {
                            display:flex;
                            flex-direction: column;
                            input, select, search-input {
                                font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                                background-color: var(--background-input);
                                border: var(--border-input);
                                border-radius: 0.5em;
                                box-sizing: border-box;
                                display: inline-block;
                                /* max-width: 100%; */
                                width:100%;
                                padding: 0.25em;
                                text-align: left;
                                text-decoration: none;
                                position: relative;
                                &:hover {
                                    outline: none;
                                }
                                &:focus {
                                    outline: none;
                                }
                            }
                            search-input {
                                width: 200px;
                            }
                            /* input::-webkit-calendar-picker-indicator {
                                position: absolute;
                                left: 0;
                                width: 100%;
                                background:red;
                                height: 100%;
                                margin: 0;
                                padding: 0;
                                opacity: 0;
                                cursor: pointer;
                            } */
                        }
                        .form-buttons {
                            height:100%;
                            position:absolute;
                            right:0;
                            display:flex;
                            flex-direction: row;
                            gap:1em;
                            align-items:center;
                            justify-content: center;
                        }
                    }
                }

                .table-wrapper {
                    min-height:75vh;
                    max-height:75vh;
                    overflow-y:auto;
                    table {
                        thead {
                            tr {
                                th {
                                    &.select-cell {
                                        padding-inline:0.25em;
                                        text-align:center;
                                    }
                                    &.heading-cell-icon {
                                        text-align:center;
                                        font-size:1.2em;
                                        padding-inline:0.75em;
                                    }
                                    &[data-align="right"] {
                                        text-align:right;
                                    }
                                    &:last-child {
                                        box-sizing: border-box;
                                        padding-right:1.25em;
                                    }
                                }
                            }
                        }
                        tbody {
                            tr {
                                background: var(--background-table-row-light);
                                border:none;
                                td {
                                    border:none;
                                    overflow:hidden;
                                    text-overflow:ellipsis;
                                    white-space: nowrap;
                                    span {
                                        padding:0;
                                    }
                                    &.select-cell {
                                        padding-inline:0.25em;
                                        text-align:center;
                                    }
                                    &.heading-cell-icon {
                                        text-align:center;
                                        font-size:1.2em;
                                        padding-inline:0.75em;
                                    }
                                    &[data-align="right"] {
                                        text-align:right;
                                    }
                                    &:last-child {
                                        box-sizing: border-box;
                                        padding-right:1.25em;
                                    }
                                }
                                /* &:nth-child(even) {
                                    background: var(--background-table-row);
                                } */
                                &:hover {
                                    background: var(--background-table-row-hover);
                                }
                            }
                        }
                    }
                }
            }
            .modal-footer {
                background: var(--background-modal);
                align-items: center;
                display: flex;
                flex-direction: row;
                justify-content: right;
                width: 100%;
                button {
                    font-size: 0.95em;
                    background-color: var(--background-button-modal);
                    border: var(--border-button-modal);
                    border-radius: 8px;
                    color: var(--color-button-modal);
                    font-weight: 500;
                    letter-spacing: 0.01em;
                    margin-block-end: 1em;
                    margin-block-start: 1em;
                    margin-inline-end: 1em;
                    padding: 0.5em 1em;
                    transition: background-color 0.15s ease, box-shadow 0.15s ease;
                    &:hover {
                        background-color: var(--background-button-modal-hover);
                        border: var(--border-button-modal-hover);
                        color: var(--color-button-modal-hover);
                    }
                }
                .modal-button-submit {
                    padding-inline: 1em;
                    background-color: var(--background-modal-submit);
                    color: var(--color-button-modal-submit);
                    &:hover {
                        background-color: var(--background-modal-submit-hover);
                        color: var(--color-button-modal-submit);
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                    }
                    &:disabled {
                        opacity: 0.5;
                        cursor:default;
                    }
                }
                .modal-button-submit.color-danger {
                    color: var(--color-modal-submit-danger);
                    &:hover {
                        border: var(--border-modal-submit-danger-hover);
                        color: var(--color-modal-submit-danger-hover);
                    }
                }
                .modal-button-cancel {
                    padding-inline:1em;
                    background-color: var(--background-modal-cancel);
                    /* The footer's shared button rule sets a transparent 1px border, so
                       making it visible here costs no layout shift. */
                    border: var(--border-button-standard);
                    &:hover {
                        background-color: var(--color-xlight);
                    }
                    &:disabled {
                        opacity: 0.5;
                        cursor:default;
                    }
                }
                .modal-keep-adding {
                    display: flex;
                    align-items: center;
                    gap: var(--space-xs);
                    margin-right: auto;
                    color: var(--color-gray);
                    font-size: var(--font-size-body);
                    padding-inline-start: var(--space-sm);
                    label {
                        cursor: pointer;
                        user-select: none;
                    }
                    input[type="checkbox"] {
                        accent-color: var(--color-primary);
                        cursor: pointer;
                    }
                }
            }
            &.color-danger {
                .modal-header {
                    .modal-title-container {
                        .modal-title {
                            color:var(--color-danger);
                        }
                        .modal-subtitle {
                            color:var(--color-gray);
                        }
                    }
                }
                .modal-footer {
                    .modal-button-submit {
                        background-color: var(--color-danger);
                        &:hover {
                            background-color: var(--color-danger-dark);
                        }
                    }
                }
            }
        }
        .modal-dialog.full {
            width: calc(100% - 2em);
            .modal-body {
                display:grid;
                grid-template-columns: 1fr 1fr;
                column-gap: 2em;
                
                .form-group {
                    &:has(table), &:has(.file-attachment-form-group), &:has(#uppy), &:has(textarea), &:has(.ql-container) {
                        grid-column: span 2;
                    }
                    padding-block-end:0;
                    /* Toggles are single-line rows, so without this they collide with the
                       row beneath them. Grouped settings opt out via `'compact': True`. */
                    &:has(> input[type="checkbox"]):not(.form-group--compact) {
                        padding-block-end: var(--space-sm);
                    }
                }
            }
        }
        .modal-dialog:has(.modal-body.SCAN-DOC) {
            height:100%;
            border-radius:0;
            max-height:100dvh;
            width:100dvw;
            .modal-header {
                display: none;
            }
            .modal-body {
                padding:0;
                #result {
                    touch-action: none;
                }
            }
        }
        /* .modal-dialog.large {
            width: calc(85% - 2em);
            .modal-body {
                display:grid;
                grid-template-columns: 1fr 1fr;
                column-gap: 2em;
                
                .form-group {
                    &:has(table), &:has(.file-attachment-form-group), &:has(#uppy), &:has(textarea) {
                        grid-column: span 2;
                    }
                    padding-block-end:0;
                }
            }
        } */
        .modal-dialog.medium {
            width: calc(70% - 2em);
            .modal-body {
                display:grid;
                grid-template-columns: 1fr 1fr;
                column-gap: 2em;

                .form-group {
                    &:has(table), &:has(.file-attachment-form-group), &:has(#uppy), &:has(textarea), &:has(.ql-container), &.fullwidth {
                        grid-column: span 2;
                    }
                    padding-block-end:0;
                    /* Toggles are single-line rows, so without this they collide with the
                       row beneath them. Grouped settings opt out via `'compact': True`. */
                    &:has(> input[type="checkbox"]):not(.form-group--compact) {
                        padding-block-end: var(--space-sm);
                    }
                }
            }
        }
        .modal-dialog:not(.full):not(.medium) {
            .modal-body {
                /* A .form-row splits its width as (100% - gap) / 2, so a half-width field
                   has to subtract half the gap to line up with the cells of the rows above
                   and below it. A flat 50% overhangs them by half a gutter.
                   Fields inside a .form-row are unaffected: .form-row .form-group sets
                   flex: 1, whose flex-basis: 0% takes precedence over width. */
                .form-group:has(input[type="date"]) {
                    width: calc(50% - var(--form-row-gap) / 2);
                }
                .form-group.half-width {
                    width: calc(50% - var(--form-row-gap) / 2);
                }
            }
        }
        .modal-dialog.fit-content {
            width: fit-content;
            max-width: 95dvw;
        }
    }
}

@media only screen and (max-width: 40em) {
    .modal-fade {
        .modal-dialog,
        .modal-dialog.full,
        .modal-dialog.medium {
            width: calc(100dvw - var(--space-sm));
        }
        .modal-dialog.full .modal-body,
        .modal-dialog.medium .modal-body {
            display: flex;
            flex-direction: column;
        }
        .modal-dialog:not(.full):not(.medium) .modal-body {
            .form-group:has(input[type="date"]) {
                width: 100%;
            }
            .form-group.half-width {
                width: 100%;
            }
        }
    }
}

@media only screen {
    .modal-dialog-tab-gallery {
        background-color: var(--background-modal);
        border-radius: 0.5em;
        box-shadow: var(--box-shadow-modal);
        display: flex;
        flex-direction: row;
        overflow: hidden;
        position: relative;
        width: 97dvw;
        max-height: 97dvh;
        height: 97dvh;
        .modal-header {
            align-items: center;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding-block-start: 1em;
            padding-block-end: 1em;
            padding-inline: 1em;
            min-height:36px;
            .modal-title-container {
                color: var(--color-modal-title);
                display: flex;
                flex-direction: column;
                overflow: hidden;
                .modal-title {
                    margin-block: 0;
                    margin-inline-end: 2em;
                    margin-inline-start: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 100%;
                    .modal-title-file-heading {
                        display:flex;
                        .modal-title-file-buttons {
                            display:flex;
                            width:fit-content;
                            gap:0.25em;
                            padding-right:0.5em;
                            margin-right:1em;
                            border-right:1px solid var(--color-border);
                        }
                        .modal-title-file-data {
                            display:flex;
                            flex-direction: column;
                            justify-content: center;
                            gap:0.25em;
                            .modal-title-text {
                                margin:0;
                                font-weight:500;
                                font-size:1.25em;
                            }
                        }
                    }
                }
                a.modal-title-link {
                    text-decoration: none;
                    .modal-title {
                        color: var(--color-primary);
                        &:hover {
                            color: var(--color-primary-dark);
                        }
                    }
                    &:hover {
                        color: var(--color-primary-dark);
                        text-decoration: underline;
                    }
                }
                .modal-title.color-danger {
                    color: var(--color-modal-title-danger);
                }
                .modal-subtitle {
                    font-weight: bold;
                    .breadcrumbs {
                        display:flex;
                        flex-direction: row;
                        text-wrap:nowrap;
                        .breadcrumb {
                            display:block;
                            color: var(--color-primary);
                            max-width:50ch;
                            overflow:hidden;
                            text-overflow: ellipsis;
                            &:has(+.breadcrumb) {
                                margin-right:1em;
                            }
                        }
                        .breadcrumb:hover {
                            color: var(--color-primary-dark);
                            cursor:pointer;
                            text-decoration: underline;
                        }
                    }
                }
            }
            .modal-button-close {
                background-color: var(--background-button-icon);
                border: var(--border-button-icon);
                color: var(--color-button-icon);
                height: 2em;
                padding: 0;
                position: relative;
                right: 0;
                top: 0;
                width: 2em;
                -webkit-text-stroke: 1px;
                &:hover {
                    background-color: var(--background-button-icon-hover);
                    border: var(--border-button-icon-hover);
                    color: var(--color-button-icon-hover);
                }
            }
        }
        .modal-gallery-sidebar {
            box-sizing: border-box;
            background-color: var(--background-page-secondary);
            width: 260px;
            min-width: 260px;
            transition: width 0.2s ease, min-width 0.2s ease, border 0.2s ease;
            border-right: 1px solid var(--color-border);
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            &.collapsed {
                width: 0;
                min-width: 0;
                border-right: none;
            }
            .sidebar-header {
                display: flex;
                align-items: center;
                padding-block: 1em;
                padding-inline: 1em;
                border-bottom: 1px solid var(--color-border);
                flex-shrink: 0;
                min-height:36px;
                background: var(--background-page);
                .sidebar-title {
                    margin: 0;
                    font-weight: 500;
                    font-size: 1.05em;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            .sidebar-content {
                flex: 1 1 0;
                overflow: hidden;
                overflow-y: auto;
                scrollbar-width: thin;
                display: flex;
                flex-direction: column;
                .sidebar-section {
                    border-bottom: 1px solid var(--color-border);
                    .sidebar-section-header {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0.6em 1em;
                        .sidebar-section-title {
                            font-weight: 600;
                            font-size: 0.78em;
                            text-transform: uppercase;
                            letter-spacing: 0.05em;
                            color: var(--color-gray);
                        }
                        .sidebar-section-toggle {
                            border: none;
                            background: transparent;
                            color: var(--color-gray);
                            padding: 0;
                            font-size: 0.85em;
                            &::after {
                                font-family: 'Bootstrap-icons';
                                content: '\F282';
                            }
                        }
                    }
                    .sidebar-section-body {
                        display: flex;
                        flex-direction: column;
                    }
                    &.collapsed {
                        .sidebar-section-body { display: none; }
                        .sidebar-section-toggle::after { content: '\F285'; }
                    }
                    &.sidebar-info {
                        .sidebar-section-body {
                            padding: 0.75em 1em;
                            gap: 0.5em;
                            .overview-header {
                                padding: 0.25em 0 0.5em;
                                border-bottom: 1px solid var(--color-border);
                                margin-bottom: 0.25em;
                                .overview-header-name {
                                    font-size: 1em;
                                    font-weight: 600;
                                    color: var(--color-primary);
                                    text-decoration: none;
                                    &:is(a):hover { text-decoration: underline; }
                                }
                                .overview-header-subname {
                                    margin: 0.1em 0 0;
                                    font-size: 0.85rem;
                                    color: var(--color-gray);
                                }
                            }
                            .overview-group {
                                display: flex;
                                flex-direction: column;
                                gap: 0.15em;
                                &:has(+ .overview-group) { padding-bottom: 0.35em; }
                                label {
                                    font-size: 0.75em;
                                    color: var(--color-gray);
                                    text-transform: uppercase;
                                    letter-spacing: 0.03em;
                                }
                                .overview-value {
                                    font-weight: 500;
                                    display: flex;
                                    flex-direction: column;
                                    gap: 0.5em;
                                    word-break: break-word;
                                    &:empty::before {
                                        font-family: 'Bootstrap-icons';
                                        content: '\F63B';
                                        color: var(--color-gray-light);
                                    }
                                    &.overview-value-empty {
                                        color: var(--color-gray-light);
                                        font-weight: 400;
                                    }
                                    .overview-subvalue {
                                        display: flex;
                                        flex-direction: row;
                                        gap: 0.5em;
                                        align-items: center;
                                        .overview-subvalue-tag {
                                            font-size: 0.75rem;
                                            font-weight: 500;
                                            color: var(--color-gray);
                                            text-transform: uppercase;
                                            letter-spacing: 0.04em;
                                        }
                                        .overview-subvalue-icon {
                                            i.green { color: var(--color-green); }
                                        }
                                    }
                                }
                                &.nobold .overview-value { font-weight: normal; }
                                a.link {
                                    color: var(--color-primary) !important;
                                    text-decoration: none !important;
                                    &:hover {
                                        color: var(--color-primary-dark) !important;
                                        text-decoration: underline !important;
                                    }
                                }
                            }
                        }
                    }
                    &.sidebar-files {
                        flex: 1;
                        overflow: hidden;
                        display: flex;
                        flex-direction: column;
                        .sidebar-section-body {
                            gap: 0;
                            flex: 1;
                            overflow-y: auto;
                            scrollbar-width: thin;

                            /* ── Shared row baseline ── */
                            .folder-label,
                            .file {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                width: 100%;
                                box-sizing: border-box;
                                overflow: hidden;
                                flex-wrap: nowrap;
                                padding-block: calc(5px + 0.2em);
                                padding-inline: 0.75em;
                                gap: 0.35em;
                                cursor: pointer;
                                &:hover { background: var(--color-xlight); }
                            }

                            /* ── Folder ── */
                            .folder {
                                display: flex;
                                flex-direction: column;
                                width: 100%;

                                .folder-label {
                                    span {
                                        text-wrap: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        flex: 1;
                                    }
                                    &::before {
                                        font-family: 'Bootstrap-icons';
                                        color: var(--color-folder);
                                        content: '\F3D1';
                                        flex-shrink: 0;
                                    }
                                    &::after {
                                        font-family: 'Bootstrap-icons';
                                        content: '\F282';
                                        color: var(--color-light);
                                        font-size: 0.8em;
                                        flex-shrink: 0;
                                        margin-inline-start: auto;
                                    }
                                }

                                .folder-children {
                                    display: none;
                                    flex-direction: column;
                                    margin-inline-start: 1.35em;
                                }

                                &.open {
                                    > .folder-label {
                                        &::before { content: '\F3D1'; }
                                        &::after { 
                                            font-weight:bold; 
                                            color: var(--color-primary); 
                                            content: '\F282';
                                        }
                                    }
                                    > .folder-children { display: flex; }
                                }

                                &:has(.active) > .folder-children { display: flex; }
                            }

                            /* ── File ── */
                            .file {
                                justify-content: space-between;
                                padding-right:0.1em;
                                &.active {
                                    background: var(--background-table-row-hover);
                                    /* i { color: white; } */
                                    /* span { color: white; } */
                                    /* button-dropdown { color: white; i { color: white; } } */
                                    &:hover { background: var(--background-table-row-hover); }
                                }
                                .file-text-container {
                                    display: flex;
                                    align-items: center;
                                    gap: 0.5em;
                                    overflow: hidden;
                                    flex: 1;
                                }
                                span {
                                    text-wrap: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                                button-dropdown {
                                    flex-shrink: 0;
                                    padding: 0 4px !important;
                                    align-self: stretch;
                                    display: flex;
                                    align-items: center;
                                    font-size: 0.85em;
                                    &:hover { background: transparent; }
                                }
                            }

                            /* ── Tree connector lines ── */
                            .folder-children {
                                /* Files: L-shape stops at center; vertical extension to next sibling */
                                > .file {
                                    padding-inline-start: 0.75em;
                                    position: relative;
                                    &::before {
                                        content: '';
                                        position: absolute;
                                        left: 0;
                                        top: 0;
                                        height: 50%;
                                        width: 0.75em;
                                        border-left: 1px solid var(--color-border);
                                        border-bottom: 1px solid var(--color-border);
                                        pointer-events: none;
                                    }
                                    &:not(:last-child)::after {
                                        content: '';
                                        position: absolute;
                                        left: 0;
                                        top: 50%;
                                        bottom: 0;
                                        border-left: 1px solid var(--color-border);
                                        pointer-events: none;
                                    }
                                }
                                /* Folders: L-shape to center of folder-label; vertical extension down */
                                > .folder {
                                    position: relative;
                                    > .folder-label { padding-inline-start: 0.75em; }
                                    &::before {
                                        content: '';
                                        position: absolute;
                                        left: 0;
                                        top: 0;
                                        height: calc(5px + 0.2em + 0.6em);
                                        width: 0.75em;
                                        border-left: 1px solid var(--color-border);
                                        border-bottom: 1px solid var(--color-border);
                                        pointer-events: none;
                                    }
                                    &:not(:last-child)::after {
                                        content: '';
                                        position: absolute;
                                        left: 0;
                                        top: calc(5px + 0.2em + 0.6em);
                                        bottom: 0;
                                        border-left: 1px solid var(--color-border);
                                        pointer-events: none;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .sidebar-toggle-btn {
            position: absolute;
            top: 0;
            left: calc(260px - 2.1em);
            padding-block: 1em;
            z-index: 2;
            background: var(--background-page);
            border: none;
            color: var(--color-primary);
            cursor: pointer;
            line-height: 1;
            display: flex;
            align-items: center;
            transition: left 0.2s ease;
            height:60px;
            padding-block:1em;
            &::after {
                font-family: 'Bootstrap-icons';
                content: '\F22D';
            }
            &.collapsed {
                left: 0;
                border-right: 1px solid var(--color-border);
                /* border-bottom: 1px solid var(--color-border); */
                &::after { content: '\F231'; }
            }
            &:hover { color: var(--color-primary-dark); background: var(--color-xlight); }
        }
        .modal-body {
            display: flex;
            flex: 1 1 100%;
            flex-direction: column;
            overflow:hidden;

            .modal-tab-container {
                border: var(--border-modal-container);
                border-radius: 0.5em;
                margin-right:1em;
                box-shadow: var(--box-shadow-modal);
                display: flex;
                flex-direction: column;
                width: 100%;
                .modal-tabs {
                    align-items: center;
                    border-bottom: var(--border-modal-container);
                    display: grid;
                    gap: 0;
                    grid-auto-columns: 1fr;
                    grid-auto-flow: column;
                    grid-template-rows: 1fr;
                    .button-tab {
                        align-items: center;
                        background-color: var(--background-modal);
                        border: none;
                        color: var(--color-modal-tab);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        overflow: hidden;
                        padding-block: 1em;
                        &:hover {
                            background-color: var(--background-modal-tab-hover);
                            color: var(--color-modal-tab-hover);
                            cursor: pointer;;
                        }
                    }
                    .button-tab-active {
                        align-items: center;
                        background-color: var(--background-modal-tab-active);
                        border: none;
                        color: var(--color-modal-tab-active);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        overflow: hidden;
                        padding-block: 1em;
                        &:first-child {
                            &:last-child {
                                display: none;
                            }
                        }
                    }
                    .tab-text {
                        font-size: var(--font-size-modal-tab-text);
                        margin: 0;
                        overflow: hidden;
                        text-align: center;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width: 90%;
                    }
                    .tab-icon {
                        font-size: var(--font-size-modal-tab-icons);
                    }
                }
                .modal-tab-header {
                    align-items: stretch;
                    background-color: var(--background-modal);
                    border-bottom: var(--border-modal-container);
                    border-bottom: var(--border-modal-tab-header);
                    display: flex;
                    flex-direction: column;

                    .modal-button-container {
                        display: flex;
                        flex-direction: row;
                        justify-content:right;
                        &:has(select, search-input) {
                            justify-content:space-between;
                        }
                        &:empty {
                            display:none;
                        }
                        search-input {
                            font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                            background-color: var(--background-input);
                            border: var(--border-input);
                            border-radius: 0.5em;
                            box-sizing: border-box;
                            display: block;
                            width:100%;
                            max-width: 100%;
                            padding: 0.5em;
                            text-align: left;
                            text-decoration: none;
                            position: relative;
                            &:hover {
                                outline: none;
                            }
                            &:focus {
                                outline: none;
                            }
            
                            &.error {
                                border: 1px solid var(--color-danger);
                            }
                            &.valid {
                                border: 1px solid var(--color-green);
                            }
                        }
                        padding-block: 0.5em;
                        padding-inline: 1em;
                        button {
                            margin-inline-start: 0.5em;
                            span {
                                display: none;
                            }
                        }
                        select {
                            background-color: var(--background-input);
                            border: var(--border-input);
                            border-radius: 0.5em;
                            box-sizing: border-box;
                            cursor: pointer;
                            display: block;
                            flex: 1 1 0px;
                            margin-inline-end: 0.5em;
                            font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                            padding: 0.5em;
                            text-align: left;
                            text-decoration: none;
                            max-width: 30ch;
                            &:hover {
                                outline: none;
                            }
                            &:focus {
                                outline: none;
                            }
                        }
                    }
                    .options-container {
                        /* border-top: var(--border-modal-container); */
                        justify-content: space-between;
                        display: flex;
                        flex-direction: row;
                        font-size: 0.8rem;
                        align-items: center;
                        padding-block: 0.25em;
                        padding-inline: 1em;
                        .toggle-container {
                            display: flex;
                            flex-direction: row;
                        }
                    }
                    /* .options-container:has(>.toggle-container:empty) {
                        display:none;
                    } */
                    .multiselect-container {
                        color: var(--color-modal-tab-options-multiselect);
                        align-items:center;
                        border-top: var(--border-modal-container);
                        display:flex;
                        flex-direction: row;
                        font-size: var(--font-size-modal-tab-options-multiselect);
                        justify-content: space-between;
                        padding-block: 0.25em;
                        padding-inline: 1em;
                        .select-button-container {
                            align-items: center;
                            display: flex;
                            flex-direction: row;
                            .active {
                                color: var(--color-modal-tab-options-multiselect);
                            }
                            .inactive {
                                color: var(--color-modal-tab-options-multiselect-inactive);
                            }
                            
                            button {
                                padding-block: 0;
                            }
                            button:disabled {
                                background-color: transparent;
                                color: var(--color-modal-tab-options-multiselect-inactive);
                            }
                            i {
                                font-size:1rem;
                            }
                        }
                        .select-input-container {
                            align-items: center;
                            display: flex;
                            flex-direction: row;
                            input[type='checkbox'] {
                                cursor: pointer;
                                height: 1.25em;
                                margin-inline: 0;
                                width: 1.25em;
                            }
                            .multiselect-count {
                                margin-inline-start: 0.25em;
                            }
                        }
                    }
                    .modal-search-container {
                        display: flex;
                        flex-direction: row;
                        padding-block: 0.5em;
                        padding-inline: 1em;
                        .search-input {
                            background-color: var(--background-input);
                            border: var(--border-input);
                            border-radius: 0.5em;
                            box-sizing: border-box;
                            display: block;
                            font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                            padding: 0.5em;
                            text-align: left;
                            text-decoration: none;
                            width: 100%;
                            &:hover {
                                outline: none;
                            }
                            &:focus {
                                outline: none;
                            }
                        }
                        button {
                            padding-block: 0;
                        }
                        i {
                            font-size: 1.25rem;
                        }
                    }
                }
                .modal-tab-content {
                    display: flex;
                    flex-direction: column;
                    flex: 1 1 0px;
                    overflow-y: auto;
                    .form-group {
                        padding-inline:1em;
                        &:first-child {
                            padding-top:1em;
                        }
                        .form-group {
                            padding:0;
                        }
                    }
                    .card-section-header {
                        width:100%;
                        text-align: center;
                        margin-top:1em;
                        font-weight:bold;
                        color: var(--color-gray);
                        padding-bottom:0.25em;
                    }
                    .file {
                        align-items: center;
                        color: var(--color-card-text);
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        padding-block: 0.25em;
                        width: 100%;
                        &:hover {
                            background-color: var(--background-file-hover);
                            cursor: pointer;
                            .file-name {
                                color: var(--color-file-hover);
                            }
                        }
                        .initials-icon {
                            display: none;
                            /* align-items: center;
                            background-color: var(--color-primary);
                            border-radius: 100%;
                            color: var(--color-white);
                            display: flex;
                            flex-direction: row;
                            height: 1em;
                            justify-content: center;
                            margin-inline-end: 0.5em;
                            width: 1em; */
                        }
                        .file-row {
                            display: flex;
                            flex-direction: row;
                            overflow: hidden;
                            .multiselect-div {
                                display: flex;
                                flex-direction: row;
                                input[type='checkbox'] {
                                    cursor: pointer;
                                    height: 1.1em;
                                    margin-inline-start: 0.5em;
                                    width: 1.1em;
                                }
                            }
                            .file-icon-name {
                                display: flex;
                                flex-direction: row;
                                overflow: hidden;
                                i {
                                    margin-inline-start: 0.5em;
                                }
                                span {
                                    margin-inline: 0.5em;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }
                        }
                        .file-button-container {
                            align-items: center;
                            display: flex;
                            flex-direction: row;
                            justify-content: end;
                            button {
                                margin-inline-end: 0.5em;
                                padding-block: 0;
                                &:hover {
                                    background-color: var(--background-card-button-hover);
                                }
                            }
                        }
                    }
                    /* .file:has(+.card-section-header), .card:has(+.card-section-header) {
                        margin-bottom:1em;
                    } */
                    .modal-field-item {
                        display: flex;
                        flex-direction: column;
                        margin-block: 1em;
                        margin-inline: 1em;
                        .modal-field-title {
                            font-weight: bold;
                        }
                        .link {
                            color: var(--color-flexbox-link);
                            font-weight: 600;
                            &:hover {
                                color: var(--color-flexbox-link-hover);
                                cursor: pointer;
                                text-decoration: underline;
                            }
                        }
                        .address {
                            display: flex;
                            flex-direction: column;
                        }
                    }
                    .correspondence-container {
                        border: var(--border-modal-container);
                        border-radius: 0.25em;
                        margin-block: 0.5em;
                        padding: 1em;
                        .correspondence-header{
                            align-items: center;
                            border-bottom: var(--border-modal-container);
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            .correspondence-header-info {
                                align-items: center;
                                
                                display: flex;
                                flex-direction: row;
                                .header-data {
                                    display: flex;
                                    flex-direction: column;
                                }
                                .icon {
                                    align-items: center;
                                    background-color: var(--color-primary);
                                    border-radius: 100%;
                                    color: var(--color-white);
                                    display: flex;
                                    flex-direction: row;
                                    height: 2.25em;
                                    justify-content: center;
                                    margin-inline-end: 0.5em;
                                    width: 2.25em;
                                }
                            }

                        }
                    }

                    .active-review-container {
                        /* height:100%; */
                        .active-review-buttons {
                            align-items: stretch;
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                            margin-inline: 1em;
                            padding-block-end: 1em;
                            button {
                                margin-block: 0.25em;
                                margin-inline: 0.25em;
                                width: 100%;
                            }
                        }

                        .files-heading {
                            align-items: center;
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                            margin-inline: 1em;
                            position: relative;
                            .line-behind {
                                border-top: var(--border-modal-dashed-line);
                                content: " ";
                                position: absolute;
                                top: 50%;
                                width: 100%;
                                z-index: 0;
                            }
                            .files-heading-text {
                                background: var(--background-modal);
                                color: var(--color-gray);
                                padding: 1em;
                                z-index: 1;
                            }
                        }
                        .active-review-files {
                            .card-heading-container {
                                overflow: hidden;
                                position: relative;
                                &::after {
                                    align-items: center;
                                    display: flex;
                                    flex-direction: row;
                                    font-size: 3rem;
                                    font-weight: 600;
                                    height: 100%;
                                    justify-content: center;
                                    opacity: 25%;
                                    position: absolute;
                                    rotate: 10deg;
                                    width: 100%;
                                    z-index: 100;
                                } 
                            }
                        }
                    }
                    .active-review-container[data-state="-2"] {
                        .active-review-files {
                            .card-heading-container {
                                &::after {
                                    content: "CANCELED";
                                } 
                            }
                        }
                    }
                    .active-review-container[data-state="-1"], .active-review-container[data-state="0"] {
                        .active-review-files {
                            .card-heading-container {
                                &::after {
                                    content: "DRAFT";
                                    color: var(--color-primary);
                                } 
                            }
                        }
                    }
                    .active-review-container[data-state="1"] {
                        .active-review-files {
                            .card-heading-container {
                                &::after {
                                    content: "REJECTED";
                                    color: var(--color-danger);
                                } 
                            }
                        }
                    }
                    .review-container {
                        &:first-child {
                            margin-top:0.5em;
                        }
                        &:not(:last-child) {
                            margin-bottom:0.5em;
                            padding-bottom:0.5em;
                            border-bottom: 1px solid var(--color-border);
                        }
                    }
                    .scope-of-work-container {
                        .comment-header {
                            display:flex;
                            width:100%;
                            align-items: center;
                            justify-content: center;
                            color: var(--color-gray);
                        }
                        &:first-child {
                            margin-top: 0.5em;
                        }
                        &:not(:last-child) {
                            margin-bottom: 0.5em;
                            padding-bottom:0.5em;
                            border-bottom: 1px solid var(--color-border);
                        }
                    }
                    .overview-header {
                        padding: 0.75em 1em 0.4em;
                        border-bottom: 1px solid var(--color-border);
                        .overview-header-name {
                            font-size: 1em;
                            font-weight: 600;
                            color: var(--color-primary);
                            text-decoration: none;
                            &:is(a):hover { text-decoration: underline; }
                        }
                        .overview-header-subname {
                            margin: 0.1em 0 0;
                            font-size: 0.85rem;
                            color: var(--color-gray);
                        }
                    }
                    .overview-group {
                        display: flex;
                        flex-direction: column;
                        gap: 0.15em;
                        padding: 0.6em 1em;
                        border-bottom: 1px solid var(--color-border);
                        &:last-child { border-bottom: none; }
                        label {
                            font-size: 0.75em;
                            color: var(--color-gray);
                            text-transform: uppercase;
                            letter-spacing: 0.03em;
                        }
                        .overview-value {
                            font-weight: 500;
                            word-break: break-word;
                            display: flex;
                            flex-direction: column;
                            gap: 0.5em;
                            &.overview-value-empty {
                                color: var(--color-gray-light);
                                font-weight: 400;
                            }
                            &.link {
                                color: var(--color-primary);
                                text-decoration: none;
                                cursor: pointer;
                                &:hover { text-decoration: underline; }
                            }
                            .overview-subvalue {
                                display: flex;
                                flex-direction: row;
                                gap: 0.5em;
                                align-items: center;
                                .overview-subvalue-tag {
                                    font-size: 0.75rem;
                                    font-weight: 500;
                                    color: var(--color-gray);
                                    text-transform: uppercase;
                                    letter-spacing: 0.04em;
                                }
                                .overview-subvalue-icon {
                                    i.green { color: var(--color-green); }
                                }
                            }
                        }
                        a.overview-value.link {
                            color: var(--color-primary);
                            text-decoration: none;
                            &:hover { text-decoration: underline; }
                        }
                    }
                }
            }
            .modal-gallery-panel {
                display: flex;
                flex: 1 1;
                flex-direction: column;
                box-sizing: border-box;
                overflow: hidden;
                position: relative;
                height: calc(97dvh - 36px);
                border-top: 1px solid var(--color-border);

                .modal-gallery-view {
                    flex: 1 1;
                    position: relative;
                    overflow: hidden;
                    background: transparent;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .gallery-empty-state {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        color: var(--color-gray-light);
                        gap: 0.5em;
                        pointer-events: none;
                        i { font-size: 3rem; }
                        p { margin: 0; }
                    }
                    .gallery-spinner {
                        display: none;
                        position: absolute;
                        inset: 0;
                        align-items: center;
                        justify-content: center;
                        z-index: 1;
                        &.active { display: flex; }
                        .gallery-spinner-inner {
                            width: 2.5em;
                            height: 2.5em;
                            border: 3px solid var(--color-primary);
                            border-top-color: transparent;
                            border-radius: 50%;
                            animation: gallery-spin 0.7s linear infinite;
                        }
                    }
                    .file-content {
                        &.display {
                            position: absolute;
                            inset: 0;
                            width: 100%;
                            height: 100%;
                            border: none;
                            background: var(--background-page);
                        }
                        &:not(.display) { display: none; }
                        &.no-display {
                            background: var(--background-page);
                        }
                    }
                    img.file-content.display {
                        object-fit: contain;
                        background-color: var(--color-gray-light);
                        height: auto;
                        max-height: 100%;
                        position: relative;
                        inset: unset;
                    }
                    video.file-content.display {
                        background-color: var(--color-gray);
                    }
                    div.file-content.display {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        i { color: var(--color-gray-light); font-size: 2rem; }
                        p { color: var(--color-gray-light); }
                    }
                }
                .modal-gallery-file-bar {
                    display: none;
                    flex-shrink: 0;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0.5em 1em;
                    border-top: 1px solid var(--color-border);
                    gap: 1em;
                    background: var(--background-modal);
                    &.visible { display: flex; }
                    .file-bar-left {
                        display: flex;
                        flex-direction: column;
                        overflow: hidden;
                        gap: 0.1em;
                        .file-bar-name {
                            margin: 0;
                            font-weight: 500;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .file-bar-meta {
                            display: flex;
                            gap: 1em;
                            color: var(--color-gray);
                            font-size: 0.82em;
                            .file-bar-meta-item {
                                display: flex;
                                align-items: center;
                                gap: 0.25em;
                            }
                        }
                    }
                    .file-bar-right {
                        display: flex;
                        align-items: center;
                        gap: 0.5em;
                        flex-shrink: 0;
                        .version-status {
                            font-size: 1.25em;
                            &.current-version { color: var(--color-green); }
                            &.superseded-version { color: var(--color-modal-version-superseded); }
                        }
                        .gallery-version-select {
                            background-color: var(--background-input);
                            border: var(--border-input);
                            border-radius: 0.5em;
                            box-sizing: border-box;
                            cursor: pointer;
                            font-family: inherit;
                            padding: 0.4em 0.5em;
                            max-width: 15ch;
                            &:hover, &:focus { outline: none; }
                        }
                    }
                }

            }
        }
    }
}

@keyframes gallery-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.modal-processing-icon {
    display: inline-block;
    animation: gallery-spin 1s linear infinite;
}

@media only screen {
    .modal-fade {
        .modal-dialog-tab-gallery {
            .modal-footer {
                display: none;
            }
        }
    }
}

@media only screen
and (min-width: 65em) {
    .modal-fade {
        .modal-dialog {
            width: 40dvw;
            .modal-footer {
                button {
                    font-size:1.15em;
                }
            }
        }
        .modal-dialog-tab-gallery {
            .modal-gallery-sidebar {
                display: flex;
                &.collapsed {
                    width: 0;
                    min-width: 0;
                    border-right: none;
                }
            }
            .modal-body {
                padding: 0;
                .modal-gallery-panel {
                    display: flex;
                    flex: 1 1;
                    box-sizing: border-box;
                    overflow: hidden;
                    position: relative;
                    height: calc(97dvh - 36px);
                }
            }
        }
        .modal-dialog.large {
            width: calc(85% - 2em);
            .modal-body {
                display:grid;
                grid-template-columns: 1fr 1fr;
                column-gap: 2em;
                
                .form-group {
                    &:has(table), &:has(.file-attachment-form-group), &:has(#uppy), &:has(textarea), &:has(.ql-container) {
                        grid-column: span 2;
                    }
                    padding-block-end:0;
                }
            }
        }
    }
}

/* #endregion */
/* ================================================================= */

.table-select-count {
    /* padding-inline:1em; */
    &.circle {
        background: var(--color-xlight);
        color:var(--color-primary);
        aspect-ratio: 1;
        width:21px;
        font-weight:bold;
        display:flex;
        align-items: center;
        justify-content: center;
        border-radius:100%;
        font-size: 0.75em;
    }
}

@media only screen {
    .pagination-left {
        display:flex;
        flex-direction: row;
        gap: 0.25em;
        .footer-count {
            display:none;
            flex-direction: row;
            gap:0.25em;
        }
    }
}

/* Tablet */
@media only screen
and (orientation: landscape)
and (max-width: 65em) {
    .pagination-left {
        .footer-count {
            display: flex;
        }
    }
}

/* Full Screen */
@media only screen
and (min-width: 65em) {
    .pagination-left {
        .footer-count {
            display:flex;
        }
    }
}


/* ================================================================= */
/* #region PAGE CONTENT */

@media only screen {
    body {
        background-color: var(--background-page);
        display: flex;
        flex-direction: column;
        font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
        font-size: var(--font-size-body);
        height: 100dvh;
        width:100dvw;
        margin: 0;
        overflow: hidden;
        overscroll-behavior:auto;
        .page-container {
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            width: 100dvw;
            height:100dvh;
            .page-container-heading-sticky {
                background: var(--background-page);
                /* border-bottom: var(--border-bottom-heading-sticky); */
                display: flex;
                flex-direction: column;
                top: 0;
                width: 100dvw;
                .heading-main-row {
                    align-items: stretch;
                    display: flex;
                    flex-direction: column-reverse;
                    width: 100dvw;
                    .heading-text-buttons {
                        margin-inline:1.5em;
                        display:flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        gap:0.25em;
                        .heading-back-container {
                            display:flex;
                            justify-content: center;
                            align-items: center;
                            a {
                                color: var(--color-gray-light);
                                &:hover {
                                    color: var(--color-primary);
                                }
                                i {
                                    font-size:2em;
                                }
                            }
                            color:black;
                        }
                        .heading-text {
                            display:flex;
                            flex-direction: column;
                            &:has(.domain-select-subheading) {
                                flex-direction: column;
                            }
                            .heading-text-container {
                                display:flex;
                                align-items: center;
                                margin:0;
                                gap:0.5em;
                            }
                            .subheading-text-container {
                                margin:0;
                                font-weight:500;
                                color:var(--color-gray);
                                text-transform: uppercase;
                                font-weight:600;
                                font-size:1em;
                                display:flex;
                                flex-direction: row;
                                gap:0.5em;
                                &.domain-select-subheading {
                                    font-size: 0.9rem;
                                    font-weight: 400;
                                    color: var(--color-gray-light);
                                }
                                .subheading-divider {
                                    align-self: stretch;
                                    width: 1px;
                                    background: var(--color-border);
                                }
                                .button-show-all {
                                    font-weight:normal;
                                    text-decoration: none;
                                    text-transform: none;
                                    color: var(--color-gray);
                                    &:hover {
                                        color: var(--color-primary);
                                    }
                                }
                            }
                        }
                        .heading-button-container {
                            display:flex;
                            flex-direction: column;
                            row-gap:0.25em;
                            /* width:100%; */
                            button {
                                width: auto;
                            }
                            select {
                                margin-block-end: 0.25em;
                                margin-block-start: 0.25em;
                                margin-inline-end: 0.5em;
                                width: 25ch;
                            }
                        }
                    }
                    .heading-search-links {
                        align-items: stretch;
                        display: flex;
                        flex-direction: column;
                        .heading-link-container {
                            align-items: center;
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            margin-block: 0.5em;
                            margin-inline: 0.5em;
                            i {
                                color: var(--color-heading-link-icons);
                                font-size: var(--font-size-heading-link-icons);
                                /* margin-inline-end: 0.5em; */
                            }
                            .heading-links {
                                display: flex;
                                flex-direction: row;
                                span {
                                    i:hover {
                                        cursor:pointer;
                                        color: var(--color-primary);
                                    }
                                }
                            }
                            .my-account-container {
                                position: absolute;
                                display:flex;
                                display:none;
                                flex-direction: column;
                                top: 1em;
                                right:1em;
                                width:200px;
                                border-radius:5px;
                                background:var(--background-page);
                                box-shadow: 0 0 5px 0 var(--color-shadow);
                                z-index:3;
                                padding-block:1em;

                                .my-account-container-top {
                                    border-bottom: 1px solid var(--color-border);
                                    display:flex;
                                    flex-direction: column;
                                    align-items:center;
                                    justify-content: center;
                                    padding-block:1em;
                                    padding-inline:1.5em;
                                    .my-account-user-icon {
                                        font-size:0.75em;
                                        aspect-ratio: 1;
                                        width:50px;
                                        padding:0.8em;
                                        border-radius: 100%;
                                        background:var(--color-primary-xlight);
                                        display:flex;
                                        align-items: center;
                                        justify-content: center;
                                        i:hover {
                                            cursor:default;
                                        }
                                    }
                                    .my-account-domain-name {
                                        font-weight: 600;
                                        font-size:1.5em;
                                        padding-top:0.5em;
                                        padding-inline:0.5em;
                                        text-align: center;
                                    }
                                }
                                .my-account-container-bottom {
                                    display:flex;
                                    flex-direction: column;
                                    margin-top:1em;
                                    font-size:1.15em;
                                    .my-account-link {
                                        padding-inline:1em;
                                        display:flex;
                                        align-items: center;
                                        gap:0.25em;
                                        text-decoration: none;
                                        color: var(--color-heading-link-icons);
                                        padding-block:0.5em;
                                        &:hover {
                                            background: var(--color-xlight);
                                            color: var(--color-primary);
                                            i {
                                                color:var(--color-primary);
                                            }
                                        }
                                    }
                                }

                            }
                            .sidebar-burger:hover {
                                cursor:pointer;
                                color: var(--color-primary);
                            }
                        }
                        .search-container {
                            align-items: stretch;
                            display: flex;
                            flex-direction: row;
                            /* margin-block: 0.25em; */
                            /* margin-inline: 0.5em; */
                            .search-bar {
                                width: 100%;
                            }
                        }
                    }
                }
                .table-options {
                    display:flex;
                    flex-direction: column;
                    /* align-items: center; */
                    border-top:1px solid var(--color-border);
                    .result-options-group {
                        display: flex;
                        align-items: center;
                        /* Separates the filters from the bulk actions that now follow them. Matches
                           the gap .options-container uses between the search box and the filter
                           dropdown, so the whole row is evenly spaced. Costs nothing while
                           .multiselect-options is display:none on mobile, since a gap is not drawn
                           against an element that is out of layout. */
                        gap: var(--space-sm);
                    }
                    .result-container:not(:empty) {
                        display:flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: space-between;
                        padding-inline: var(--space-md);
                        .options-container:not(:empty) {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            gap: 0.5em;
                            padding-block:0.5em;
                        }
                        &:has(button, .form-dropdown) {
                            border-bottom:1px solid var(--color-border);
                        }
                        .pagination-container {
                            display:flex;
                            align-items: center;
                            justify-content:space-between;
                            position:sticky;
                            top:0;
                            height:2.5em;
                            width:100%;
                            /* border-top: 1px solid var(--color-border); */
                            
                            .pagination-pages {
                                display:flex;
                                flex-direction: row;
                                button {
                                    border:none;
                                    height:fit-content;
                                    max-height:fit-content;
                                    background: var(--color-primary);
                                    color:white;
                                    width:3ch;
                                    height:3ch;
                                }
                                button:disabled {
                                    background:var(--color-light);
                                    &:hover {
                                        cursor:default;
                                        background:var(--color-light);
                                    }
                                }
                                button:first-child {
                                    border-top-left-radius: 5px;
                                    border-bottom-left-radius: 5px;
                                }
                                button:last-child {
                                    border-top-right-radius: 5px;
                                    border-bottom-right-radius: 5px;
                                }
                                button.active {
                                    color:white;
                                    background: var(--color-primary-dark);
                                }
                                button:hover {
                                    background: var(--color-primary-dark);
                                    color:white;
                                }
                            }
                            &:empty {
                                display:none;
                            }
                        }
                        .buttons-container {
                            display:flex;
                            flex-direction: row;
                            flex-wrap: nowrap;
                            align-items:center;
                            gap:0.5em;
                            &:not(:empty) {
                                padding-block:0.5em;
                            }
                            button, button-dropdown {
                                width: auto;
                            }
                            button[data-mobile="false"] {
                                display:none;
                            }
                            /* button {
                                font-size:1.2em;
                            } */
                        }
                        .multiselect-options {
                            display:none;
                        }
                    }
                    .multiselect-container:not(:empty) {
                        box-sizing: border-box;
                        width:100%;
                        padding: 0.5em 1em;
                        .table-select-container {
                            display:flex;
                            align-items:center;
                            justify-content: space-between;
                            .table-select-buttons {
                                button {
                                    padding-block:0;
                                }
                            }
                        }
                    }
                }
                .record-tabs {
                    z-index: 1;
                    background:var(--background-page);
                    display:flex;
                    width:100%;
                    padding-inline:1.5em;
                    box-sizing: border-box;
                    font-size:1.15em;
                    overflow-x:auto;
                    &:not(:empty) {
                        border-bottom: 1px solid var(--color-border);
                    }
                    
                    .tab {
                        display:flex;
                        gap:0.25em;
                        align-items:center;
                        justify-content:center;
                        padding-inline:2em;
                        padding-top:1.1em;
                        padding-bottom: calc(1.1em - 5px);
                        border-bottom: 5px solid transparent;
                        i {
                            font-size:1.5em;
                        }
                        p {
                            margin:0;
                            white-space:nowrap;
                        }
                    }
                    .tab.active {
                        border-bottom: 5px solid var(--color-primary);
                    }
                    .tab:hover {
                        cursor:pointer;
                        border-bottom: 5px solid var(--color-primary);
                    }
                }
            }
            /* Icon-only toggle in .heading-button-container, beside the page
               title. Tightened inline padding since .button-flat's 1em assumes
               an icon + label. */
            .page-prompt-toggle {
                padding-inline: var(--space-xs);
                color: var(--color-primary);
                /* .button-flat's :hover restates color: var(--color-gray), so the
                   hover colour has to be set here too or it flips to gray. */
                &:hover {
                    color: var(--color-primary-dark);
                }
            }
            /* Page info prompt: mounted as the first child of the list content
               (.card-list-panel-items for panel card lists) so it scrolls away
               with the tiles. The margin matches the --space-md inline inset
               that panel list tiles and subgroup dividers use, so its edges line
               up with the cards below it. */
            .page-prompt {
                display: flex;
                flex-direction: column;
                gap: var(--space-md);
                margin: var(--space-md);
                padding: var(--space-md);
                background: var(--color-primary-xlight);
                border: var(--border-tile);
                border-radius: var(--radius-md);
                &.page-prompt--collapsed {
                    display: none;
                }
                .page-prompt-header {
                    display: flex;
                    flex-direction: row;
                    align-items: flex-start;
                    justify-content: space-between;
                    gap: var(--space-sm);
                    .page-prompt-heading {
                        margin: 0;
                        font-size: var(--font-size-badge);
                        font-weight: var(--font-weight-semi-bold);
                        text-transform: uppercase;
                        letter-spacing: 0.04em;
                        color: var(--color-gray);
                    }
                    .page-prompt-close {
                        flex: 0 0 auto;
                        padding: 0;
                        color: var(--color-muted);
                        i {
                            font-size: var(--font-size-small);
                        }
                        &:hover {
                            background: transparent;
                            color: var(--color-black);
                        }
                    }
                }
                .page-prompt-text {
                    margin: 0;
                    font-size: var(--font-size-body);
                    font-weight: var(--font-weight-normal);
                    color: var(--color-black);
                    line-height: 1.5;
                }
                .page-prompt-buttons {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: flex-end;
                    gap: var(--space-sm);
                }
            }
            .page-container-body {
                padding-inline: 0em;
                overflow: auto;
                width:100%;
                height:100%;
                background:var(--background-page-secondary);
                display:flex;
                flex-direction: column;
                &:has(.landing-group--sidenav),
                &:has(.landing-column--sticky),
                &:has(.markdown-body) {
                    overflow: hidden;
                }
                &:has(.card-list-container--panel) {
                    overflow: hidden;
                    display: block;
                }
                .page-title {
                    padding-inline: 1em;
                }
                .flexbox-container {
                    align-items: stretch;
                    display: flex;
                    flex-direction: column;
                    padding: 1.5em;
                    gap:1.5em;
                    .content-group-container {
                        display: flex;
                        flex-direction: column;
                        background:var(--background-page);
                        .content-group {
                            border: var(--border-flexbox-group);
                            border-radius: 0.5em;
                            height: 100%;
                            padding: 1.5em;
                            .content-header {
                                align-items: center;
                                display: flex;
                                flex-direction: row;
                                justify-content: space-between;
                                height:2em;
                                margin-bottom:1.5em;
                                .content-header-buttons {
                                    align-items: center;
                                    display: flex;
                                    flex-direction: row;
                                }
                                h2 {
                                    margin:0;
                                }
                            }
                            .content-item {
                                align-items: stretch;
                                display: flex;
                                flex-direction: column;
                                margin-bottom: 0.5em;
                                .content-label {
                                    color: var(--color-flexbox-content-label);
                                    font-weight: bold;
                                    margin-inline-end: 0.5em;
                                    text-transform: uppercase;
                                }
                                a {
                                    text-decoration: none;
                                }
                                .link {
                                    align-items: center;
                                    color: var(--color-flexbox-link);
                                    display: flex;
                                    flex-direction: row;
                                    font-weight: 600;
                                    padding: 0.25em;
                                    gap:0.5em;
                                    &:hover {
                                        color: var(--color-flexbox-link-hover);
                                        cursor: pointer;
                                        text-decoration: underline;
                                    }
                                    i {
                                        font-size: var(--font-size-flexbox-link-icon);
                                        /* margin-inline: 0.5em; */
                                    }
                                }
                            }
                        }
                    }
                }
                .landing-container {
                    display: grid;
                    grid-template-columns: 2fr 1fr;
                    gap: 1.5em;
                    padding: 1.5em 1.5em 3em 1.5em;
                    align-items: start;
                    background: var(--background-page-secondary);
                    &:has(.landing-column--sticky) {
                        grid-template-columns: 2fr 0.5fr;
                    }
                    &.landing-container--split   { grid-template-columns: 2fr 1fr; }
                    &.landing-container--equal {
                        grid-template-columns: 1fr 1fr;
                        /* The page prompt mounts as a grid child here rather than as a
                           band above the container, so it lines up with the first column
                           exactly. Pinning it to row 1 column 1 and both columns to row 2
                           keeps the two columns starting on the same line instead of the
                           prompt pushing the first one down. */
                        > .page-prompt {
                            grid-row: 1;
                            grid-column: 1;
                            margin: 0;
                        }
                        /* Only an EXPANDED prompt pushes the columns down. A collapsed one
                           is display:none but still in the DOM, so a bare :has() kept the
                           columns on row 2 and left row 1 standing empty -- zero height, but
                           still paying the grid's row gap above them. */
                        &:has(> .page-prompt:not(.page-prompt--collapsed)) > .landing-column {
                            grid-row: 2;
                        }
                    }
                    &.landing-container--panel   { display: flex; flex-direction: column; align-items: stretch; }
                    &.landing-container--fifty   { grid-template-columns: 1fr 1fr; }
                    &.landing-container--sixty   { grid-template-columns: 3fr 2fr; }
                    &.landing-container--seventy { grid-template-columns: 7fr 3fr; }
                    &.landing-container--thirds {
                        grid-template-columns: 1fr 1fr 2fr;
                        align-items: start;
                        .landing-column:first-child {
                            height: calc(100dvh - 5.5rem);
                            overflow-y: auto;
                            .landing-group {
                                flex-shrink: 0;
                                overflow: visible;
                            }
                        }
                        .landing-column--b {
                            height: calc(100dvh - 5.5rem);
                            .landing-group {
                                flex: 1;
                                min-height: 0;
                                display: flex;
                                flex-direction: column;
                                .landing-group-tile-list--column {
                                    flex: 1;
                                    overflow-y: auto;
                                }
                            }
                        }
                        .landing-column:has(.landing-group--sidenav) {
                            height: calc(100dvh - 5.5rem);
                            display: flex;
                            flex-direction: column;
                            overflow: hidden;
                        }
                    }
                    &.card-list-container {
                        display: flex;
                        flex-direction: column;
                        align-items: stretch;
                        /* Matches the panel list column: the tiles run edge to edge on a
                           white surface rather than sitting as an inset card on the grey
                           page. Spacing between subgroups comes from the divider's own
                           padding-block below, not from a gap here. */
                        gap: 0;
                        padding: 0;
                        background: var(--background-page);
                        /* The base divider carries no vertical space of its own (see
                           .landing-subgroup-divider) -- on a landing page that comes from
                           the group wrapper's gap, which is zeroed here. Same treatment
                           the panel list column gives its dividers. */
                        > .landing-subgroup-divider {
                            padding-block: var(--space-sm) var(--space-xs);
                            /* The first divider butts against the result bar rather than a
                               tile, and a tile brings its own padding where the bar brings
                               none. */
                            &:first-child {
                                padding-top: var(--space-md);
                            }
                        }
                        .landing-group-items {
                            /* background: var(--background-page); */
                            /* border: 1px solid var(--color-border); */
                            border-radius: 0;
                            overflow: visible;
                            padding: 0;
                            gap: 0;
                            &:has(.card-list-contact-card) {
                                gap: var(--space-sm);
                                padding: var(--space-xs) var(--space-sm);
                                border-radius: 0;
                                overflow: visible;
                            }
                            .landing-tile {
                                border-radius: 0;
                                border: none;
                                /* border-bottom: 1px solid var(--color-border); */
                                padding: 0.75em 1em;
                                &:last-child { border-bottom: none; }
                                &:hover {
                                    border-color: transparent;
                                    border-bottom-color: var(--color-border);
                                    background-color: var(--background-page-secondary);
                                }
                            }
                            .landing-tile-wrapper {
                                /* No separators between cards -- the tiles read as one
                                   continuous list, same as the panel list columns. */
                                padding-right: 0.75em;
                                /* Matches the unwrapped tile's hover above. It used to be
                                   --background-page, which read as a highlight only while
                                   the list sat on the grey page; the list surface is now
                                   white itself, so white-on-white showed nothing. */
                                &:hover { background: var(--background-page-secondary); }
                                .landing-tile {
                                    border-bottom: none;
                                    &:hover { background: transparent; }
                                }
                            }
                        }
                        &.card-list-container--panel {
                            display: grid;
                            grid-template-columns: 2fr 3fr;
                            gap: 0;
                            padding: 0;
                            height: 100%;
                            align-items: stretch;
                            .card-list-panel-list {
                                display: flex;
                                flex-direction: column;
                                min-height: 0;
                                overflow: hidden;
                                border-right: 1px solid var(--color-border);
                                background-color: var(--background-page);
                                .card-list-panel-items {
                                    flex: 1;
                                    overflow-y: auto;
                                    min-height: 0;
                                    &:has(.card-list-contact-card) {
                                        background: var(--background-page-secondary);
                                    }
                                    /* The base divider carries no vertical space of its own
                                       (see .landing-subgroup-divider): on a landing page that
                                       space comes from the group wrapper's gap, and on the
                                       plain card list from the container's own padding. This
                                       column has neither -- padding and gap are both zeroed
                                       above -- so without this every divider sits flush
                                       against whatever precedes it. Same treatment the
                                       record-page panel already gives its own dividers. */
                                    > .landing-subgroup-divider {
                                        padding-block: var(--space-sm) var(--space-xs);
                                        /* The first divider butts against the result bar's
                                           border rather than a tile, and a tile brings its
                                           own padding to the gap where the bar brings none.
                                           A page prompt, when present, is prepended into this
                                           same element and takes the slot instead -- which is
                                           the intent: it is already providing the lead-in. */
                                        &:first-child {
                                            padding-top: var(--space-md);
                                        }
                                    }
                                }
                                .result-container {
                                    display: flex;
                                    flex-direction: row;
                                    align-items: center;
                                    justify-content: space-between;
                                    gap: var(--space-sm);
                                    padding: var(--space-sm) var(--space-md);
                                    border-bottom: 1px solid var(--color-border);
                                    background: var(--background-page);
                                    .buttons-container {
                                        display: flex;
                                        flex-direction: row;
                                        flex-wrap: nowrap;
                                        align-items: center;
                                        gap: 0.5em;
                                        button, button-dropdown {
                                            width: auto;
                                        }
                                    }
                                }
                                .landing-group-items {
                                    border-radius: 0;
                                    overflow: visible;
                                }
                                .landing-tile {
                                    border-left: 5px solid transparent;
                                }
                                .landing-tile--active {
                                    background: var(--background-container);
                                    border-left: 5px solid var(--color-primary);
                                }
                                .pagination-container {
                                    border-top: 1px solid var(--color-border);
                                    padding: var(--space-xs) var(--space-md);
                                    background: var(--background-page);
                                    flex: 0 0 auto;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    color: var(--color-gray);
                                    font-size: var(--font-size-pagination);
                                    .pagination-pages {
                                        display: flex;
                                        flex-direction: row;
                                        align-items: center;
                                        .page-input {
                                            text-align: center;
                                            min-width: 3ch;
                                            padding: 0.25em;
                                            background: var(--background-page);
                                            color: var(--color-primary);
                                            font-weight: bold;
                                            margin-inline: 0.25em;
                                            border-radius: var(--radius-sm);
                                            border: var(--border-input);
                                            outline: 0px solid transparent;
                                        }
                                        button {
                                            background: transparent;
                                            border: none;
                                            height: fit-content;
                                            max-height: fit-content;
                                            width: 3ch;
                                            height: 3ch;
                                        }
                                        button:hover {
                                            color: var(--color-primary-dark);
                                        }
                                    }
                                }
                            }
                            .card-list-panel {
                                overflow-y: auto;
                                min-width: 0;
                                display: flex;
                                flex-direction: column;
                                background: var(--background-page-secondary);
                            }
                            .card-list-panel-back {
                                display: none;
                            }
                            .card-list-panel-placeholder {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                gap: var(--space-sm);
                                color: var(--color-muted);
                                font-size: var(--font-size-regular);
                                i { font-size: 1.75rem; }
                            }
                        }
                    }
                    &:has(.landing-column--sticky) {
                        height: 100%;
                        align-items: stretch;
                        padding:0;
                        gap:0;
                        > .landing-column:not(.landing-column--sticky) {
                            overflow-y: auto;
                            padding:1.5em;
                        }
                    }
                    .landing-column {
                        display: flex;
                        flex-direction: column;
                        gap: 1.5em;
                        overflow-x:hidden;
                    }
                    .landing-column--sticky {
                        overflow-y: auto;
                        display: flex;
                        flex-direction: column;
                        border-left: 1px solid var(--color-border);
                    }
                    .landing-stat {
                        background: var(--background-page);
                        border: 1px solid var(--color-border);
                        border-radius: 0.5em;
                        padding: 1em 1.25em;
                        .landing-stat-label {
                            font-size: 0.8rem;
                            font-weight: 600;
                            text-transform: uppercase;
                            letter-spacing: 0.04em;
                            color: var(--color-gray);
                            margin: 0 0 0.25em 0;
                        }
                        .landing-stat-value {
                            font-size: 1.5rem;
                            font-weight: 700;
                            color: var(--color-primary);
                            margin: 0;
                            &.orange { color: var(--color-orange); }
                        }
                    }
                    .landing-row-groups {
                        display: flex;
                        flex-direction: row;
                        gap: var(--space-lg);
                        align-items: flex-start;
                        > .landing-group {
                            flex: 1;
                            min-width: 0;
                        }
                    }
                    .landing-group {
                        background: var(--background-page);
                        border: 1px solid var(--color-border);
                        border-radius: 0.5em;
                        /* Group-row lists run their tinted bands to the card edge, so the
                           card has to clip them to keep its rounded corners. */
                        &:has(.landing-tile--group-row) { overflow: hidden; }
                        &.landing-group--transparent {
                            background: transparent;
                            border-color: transparent;
                            .landing-group-title {
                                color: var(--color-gray);
                            }
                        }
                        /* Flush against the column edges rather than floating in it — for a
                           sticky column, which supplies its own dividing border. */
                        &.landing-group--flush {
                            border: none;
                            border-radius: 0;
                            /* The total group drops its header rule because a card's own
                               border already closes the header off; flush has no border, so
                               the rule has to come back or the heading runs into the figures. */
                            &.landing-group--total .landing-group-header {
                                border-bottom: 1px solid var(--color-border);
                                padding-bottom: var(--space-sm);
                            }
                        }
                        &.landing-group--large-tiles {
                            display: grid;
                            grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
                            gap: var(--space-md);
                            padding: var(--space-md);
                            .landing-group-header {
                                grid-column: 1 / -1;
                                padding: 0;
                                border-bottom: none;
                            }
                            .section-tile {
                                border: var(--border-tile);
                                border-radius: var(--radius-base);
                                padding: var(--space-lg);
                                box-sizing: border-box;
                                background: var(--background-page-secondary);
                                display: flex;
                                flex-direction: column;
                                text-decoration: none;
                                color: var(--color-black);
                                transition-duration: 0.1s;
                                &:hover {
                                    background: var(--background-tile-hover);
                                    border: var(--border-tile-hover);
                                    color: var(--color-primary);
                                    cursor: pointer;
                                }
                                .section-tile-title-container {
                                    display: flex;
                                    align-items: center;
                                    gap: var(--space-md);
                                    i {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        width: 2em;
                                        height: 2em;
                                        font-size: var(--font-size-tile-icons);
                                        background: var(--background-container);
                                        border-radius: var(--radius-sm);
                                        color: var(--color-primary);
                                    }
                                    .section-tile-title-text {
                                        display: flex;
                                        flex-direction: column;
                                        gap: var(--space-xs);
                                        overflow: hidden;
                                        .section-tile-title {
                                            margin: 0;
                                            font-size: var(--font-size-large);
                                            font-weight: var(--font-weight-semi-bold);
                                            color: var(--color-primary);
                                        }
                                        .section-tile-subtitle {
                                            margin: 0;
                                            font-size: var(--font-size-small);
                                            font-weight: var(--font-weight-normal);
                                            color: var(--color-gray);
                                        }
                                    }
                                }
                            }
                        }
                        .landing-chart-label {
                            font-size: 0.8rem;
                            font-weight: var(--font-weight-semi-bold);
                            text-transform: uppercase;
                            letter-spacing: 0.04em;
                            color: var(--color-muted);
                            margin: 0;
                            padding: 0.75em 1.25em 0.25em;
                        }
                        .landing-chart-container {
                            height: 200px;
                            padding: 0.25em 0.75em 0.75em;
                        }
                        .landing-group-header {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 0.75em 1.25em;
                            min-height: 2.5em;
                            border-bottom: 1px solid var(--color-border);
                            .landing-group-header-left {
                                display: flex;
                                align-items: center;
                                gap: 0.5em;
                                .landing-group-icon {
                                    font-size: 0.85rem;
                                    padding: 0.35em;
                                    background: var(--background-page);
                                    border-radius: 4px;
                                    flex-shrink: 0;
                                    &.orange { color: var(--color-orange); }
                                    &.blue   { color: var(--color-primary); }
                                    &.green  { color: var(--color-green); }
                                }
                            }
                            .landing-group-header-right {
                                display:flex;
                                flex-direction: row;
                                align-items: center;
                                gap:0.5em;
                                /* Column label for groups whose tiles all carry a
                                   right-aligned value. Reads as a table header, so it
                                   is muted rather than competing with the group title. */
                                .landing-group-header-label {
                                    font-size: var(--font-size-regular);
                                    font-weight: var(--font-weight-semi-bold);
                                    color: var(--color-muted);
                                    white-space: nowrap;
                                }
                            }
                            .landing-group-title-group {
                                display: flex;
                                flex-direction: column;
                                gap: 0.1em;
                            }
                            .landing-group-title-row {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                gap: 0.35em;
                                i {
                                    font-size: 1rem;
                                    &.goldenrod {
                                        color: var(--color-goldenrod);
                                    }
                                    &.clickable {
                                        cursor: pointer;
                                        &:hover {
                                            filter: brightness(90%);
                                        }
                                    }
                                }
                            }
                            .landing-group-title {
                                font-size: 0.78rem;
                                font-weight: 600;
                                margin: 0;
                                text-transform: uppercase;
                                letter-spacing: 0.04em;
                                color: var(--color-black);
                            }
                            .landing-group-subtitle {
                                font-size: 0.72rem;
                                color: var(--color-gray);
                                margin: 0;
                            }
                            .landing-group-show-all {
                                font-size: 0.75rem;
                                color: var(--color-gray);
                                text-decoration: none;
                                border-left: 1px solid var(--color-border);
                                padding-left: 0.5em;
                                &:hover {
                                    color: var(--color-primary);
                                    text-decoration: underline;
                                }
                            }
                            .landing-group-title-row .landing-group-info {
                                font-size: 0.7rem;
                                color: var(--color-primary);
                                cursor: default;
                                padding-left: 0.25em;
                            }
                        }
                        &.landing-group--total, &.landing-group--chart {
                            .landing-group-header {
                                border-bottom: none;
                                padding-bottom: 0;
                            }
                            .landing-total-block {
                                padding-top:0;
                            }
                            &.landing-group--no-heading .landing-total-block {
                                padding-top: 1em;
                            }
                            &:has(.landing-total-metrics--twin) {
                                background: transparent;
                                border: none;
                                overflow: visible;
                                border-radius: 0;
                            }
                        }
                        &.landing-group--snapshot {
                            .landing-snapshot-metrics {
                                display: grid;
                                grid-template-columns: repeat(3, 1fr);
                                border-bottom: 1px solid var(--color-border);
                            }
                            .landing-snapshot-metric-block {
                                display: flex;
                                align-items: center;
                                gap: var(--space-sm);
                                padding: var(--space-md);
                                &:not(:last-child) {
                                    border-right: 1px solid var(--color-border);
                                }
                            }
                            .landing-snapshot-metric-icon {
                                width: var(--space-xl);
                                height: var(--space-xl);
                                border-radius: var(--radius-base);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                flex-shrink: 0;
                                font-size: var(--font-size-xlarge);
                                background: var(--background-container);
                                color: var(--color-danger);
                            }
                            .landing-snapshot-metric-text {
                                display: flex;
                                flex-direction: column;
                                gap: var(--space-xs);
                                min-width: 0;
                            }
                            .landing-snapshot-metric-value {
                                font-size: var(--font-size-tile-icons);
                                font-weight: var(--font-weight-semi-bold);
                                color: var(--color-orange);
                                line-height: 1;
                            }
                            .landing-snapshot-metric-label {
                                font-size: var(--font-size-regular);
                                font-weight: var(--font-weight-normal);
                                color: var(--color-gray);
                                margin: 0;
                            }
                            .landing-snapshot-metric-subtitle {
                                font-size: var(--font-size-small);
                                color: var(--color-muted);
                                margin: 0;
                            }
                            .landing-snapshot-top {
                                display: flex;
                                gap: var(--space-md);
                                padding: var(--space-md) var(--space-md) 0;
                                align-items: stretch;
                            }
                            /* With no score ring beside it, nothing gives the row a height for
                               the chart to stretch to, so the chart's own `chart_height` has
                               to stand rather than being flattened to a flex basis of 0.
                               Names .landing-snapshot-chart to outweigh the `flex: 1` set on
                               the same element further down, which would otherwise win on
                               source order at equal specificity. */
                            .landing-snapshot-top--chart-only .landing-snapshot-chart .landing-chart-container {
                                flex: none;
                            }
                            .landing-snapshot-score {
                                width: 130px;
                                flex-shrink: 0;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                gap: var(--space-xs);
                                border-right: 1px solid var(--color-border);
                                padding-right: var(--space-md);
                            }
                            .landing-snapshot-score-label {
                                font-size: var(--font-size-small);
                                font-weight: var(--font-weight-semi-bold);
                                text-transform: uppercase;
                                letter-spacing: 0.08em;
                                color: var(--color-muted);
                                margin: 0;
                                text-align: center;
                            }
                            .landing-snapshot-ring-svg {
                                width: 100%;
                                max-width: 120px;
                            }
                            .landing-snapshot-ring-text {
                                font-size: var(--font-size-tile-icons);
                                font-weight: var(--font-weight-semi-bold);
                                fill: var(--color-gray);
                            }
                            .landing-snapshot-chart {
                                flex: 1;
                                min-width: 0;
                                display: flex;
                                flex-direction: column;
                                .landing-chart-label {
                                    font-size: var(--font-size-small);
                                    font-weight: var(--font-weight-semi-bold);
                                    letter-spacing: 0.08em;
                                    color: var(--color-muted);
                                    padding: 0;
                                    flex-shrink: 0;
                                }
                                .landing-chart-container {
                                    flex: 1;
                                    min-height: 0;
                                }
                            }
                            .landing-snapshot-categories {
                                display: grid;
                                grid-template-columns: 1fr 1fr;
                                border-top: 1px solid var(--color-border);
                                margin-top: var(--space-sm);
                            }
                            .landing-snapshot-cat-col {
                                padding: var(--space-md);
                                &:first-child {
                                    border-right: 1px solid var(--color-border);
                                }
                            }
                            .landing-snapshot-cat-header {
                                display: flex;
                                align-items: center;
                                gap: var(--space-xs);
                                margin-bottom: var(--space-sm);
                            }
                            .landing-snapshot-cat-dot {
                                width: var(--space-sm);
                                height: var(--space-sm);
                                border-radius: var(--radius-pill);
                                flex-shrink: 0;
                            }
                            .landing-snapshot-cat-header--ok {
                                .landing-snapshot-cat-dot { background: var(--color-green); }
                                .landing-snapshot-cat-heading { color: var(--color-green); }
                            }
                            .landing-snapshot-cat-header--attention {
                                .landing-snapshot-cat-dot { background: var(--color-orange); }
                                .landing-snapshot-cat-heading { color: var(--color-orange); }
                            }
                            .landing-snapshot-cat-heading {
                                font-size: var(--font-size-small);
                                font-weight: var(--font-weight-medium);
                                text-transform: uppercase;
                                letter-spacing: 0.08em;
                            }
                            .landing-snapshot-cat-row {
                                display: flex;
                                justify-content: space-between;
                                align-items: flex-start;
                                gap: var(--space-sm);
                                padding: var(--space-sm) 0;
                                border-bottom: 1px solid var(--color-border);
                                &:last-child { border-bottom: none; }
                            }
                            .landing-snapshot-cat-left {
                                flex: 1;
                                min-width: 0;
                            }
                            .landing-snapshot-cat-name {
                                font-size: var(--font-size-regular);
                                font-weight: var(--font-weight-medium);
                                color: var(--color-black);
                                margin: 0;
                            }
                            .landing-snapshot-cat-meta {
                                display: flex;
                                align-items: center;
                                font-size: var(--font-size-small);
                                color: var(--color-muted);
                                margin: 0;
                                &.landing-snapshot-cat-meta--attention {
                                    color: var(--color-orange);
                                }
                            }
                            .landing-snapshot-cat-right {
                                flex-shrink: 0;
                                text-align: right;
                            }
                            .landing-snapshot-cat-count {
                                font-size: var(--font-size-small);
                                color: var(--color-muted);
                                margin: 0;
                            }
                            .landing-snapshot-cat-status {
                                font-size: var(--font-size-small);
                                color: var(--color-muted);
                                margin: 0;
                                &.landing-snapshot-cat-status--attention {
                                    color: var(--color-orange);
                                }
                                /* The status doubles as the row's action when there is one
                                   to take, so it renders as an anchor and has to keep the
                                   status colour rather than the browser's link default. */
                                &:is(a) {
                                    text-decoration: none;
                                    &:hover { text-decoration: underline; }
                                }
                            }
                            .landing-snapshot-cat-empty {
                                color: var(--color-muted);
                                margin: 0;
                            }
                        }
                        &.landing-group--events-panel {
                            flex: 1;
                            min-height: 0;
                            display: flex;
                            flex-direction: column;
                            border:none;
                            background-color: var(--background-page-secondary);
                            .events-agenda-header {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: space-between;
                                padding: var(--space-sm) var(--space-md);
                                border-bottom: 1px solid var(--color-border);
                                flex-shrink: 0;
                                background-color: var(--background-page);
                            }
                            .events-agenda-title {
                                font-size: var(--font-size-regular);
                                font-weight: var(--font-weight-semi-bold);
                                text-transform: uppercase;
                                letter-spacing: 0.08em;
                                color: var(--color-gray);
                            }
                            .events-agenda-today-btn {
                                font-size: 0.75rem;
                            }
                            .events-panel-body {
                                flex: 1;
                                min-height: 0;
                                overflow-y: auto;
                                display: flex;
                                flex-direction: column;
                                padding: var(--space-sm) 0;
                            }
                            .events-agenda-month-header {
                                font-size: var(--font-size-regular);
                                font-weight: var(--font-weight-medium);
                                text-transform: uppercase;
                                color: var(--color-primary);
                                padding: var(--space-sm) var(--space-md) var(--space-xs);
                                border-top: 1px solid var(--color-border);
                                margin-top: var(--space-xs);
                                &:first-child {
                                    border-top: none;
                                    margin-top: 0;
                                }
                            }
                            .events-agenda-group {
                                display: flex;
                                flex-direction: row;
                                gap: var(--space-sm);
                                padding: var(--space-xs) var(--space-md);
                                position: relative;
                                &:not(:first-of-type)::before {
                                    content: '';
                                    position: absolute;
                                    top: 0;
                                    left: var(--space-md);
                                    right: var(--space-md);
                                    height: 1px;
                                    background: var(--color-border);
                                    opacity: 0.5;
                                }
                                &.events-agenda-group--past {
                                    opacity: 0.45;
                                }
                            }
                            .events-agenda-left {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                flex-shrink: 0;
                                width: 2.5rem;
                                padding-top: 0.1rem;
                            }
                            .events-agenda-dow {
                                font-size: var(--font-size-regular);
                                font-weight: var(--font-weight-semi-bold);
                                text-transform: uppercase;
                                letter-spacing: 0.06em;
                                color: var(--color-gray);
                                &:has(+.events-agenda-day--today) {
                                    color: var(--color-primary);
                                }
                            }
                            .events-agenda-day {
                                font-size: var(--font-size-large);
                                font-weight: var(--font-weight-medium);
                                line-height: 1.2;
                                color: var(--color-gray);
                                &.events-agenda-day--today span {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    width: 1.75rem;
                                    height: 1.75rem;
                                    border-radius: var(--radius-pill);
                                    background: var(--color-primary);
                                    color: var(--color-white);
                                    font-size: var(--font-size-large);
                                }
                            }
                            .events-agenda-right {
                                flex: 1;
                                min-width: 0;
                                display: flex;
                                flex-direction: column;
                                gap: var(--space-xs);
                            }
                            .events-agenda-cat-group {
                                display: flex;
                                flex-direction: column;
                            }
                            .events-agenda-cat-label {
                                font-size: var(--font-size-small);
                                font-weight: var(--font-weight-normal);
                                text-transform: uppercase;
                                letter-spacing: 0.08em;
                                color: var(--color-muted);
                                margin-bottom: 0.15rem;
                            }
                            .events-panel-item {
                                display: flex;
                                flex-direction: column;
                                padding: 0.1rem 0;
                                font-size: var(--font-size-body);
                            }
                            .events-panel-item-name {
                                color: var(--color-gray);
                                font-size: var(--font-size-regular);
                            }
                            .events-panel-item-entity {
                                color: var(--color-muted);
                                font-size: var(--font-size-small);
                            }
                            .events-panel-empty {
                                color: var(--color-muted);
                                padding: var(--space-xs) var(--space-md);
                            }
                        }
                        &.landing-group--sidenav {
                            overflow: hidden;
                            display: flex;
                            flex-direction: column;
                            flex: 1;
                            min-height: 0;
                            .landing-sidenav-body {
                                display: flex;
                                flex: 1;
                                min-height: 0;
                                overflow: hidden;
                            }
                            .landing-sidenav-nav {
                                flex: 0 0 40%;
                                border-right: 1px solid var(--color-border);
                                padding: var(--space-sm) 0;
                                overflow-y: auto;
                            }
                            .landing-sidenav-nav-label {
                                font-size: 0.7rem;
                                font-weight: var(--font-weight-normal);
                                text-transform: uppercase;
                                letter-spacing: 0.08em;
                                color: var(--color-muted);
                                padding: var(--space-xs) var(--space-md);
                                margin: 0;
                                &:not(:first-child) {
                                    margin-top: var(--space-md);
                                }
                            }
                            .landing-sidenav-tab {
                                display: flex;
                                align-items: center;
                                gap: var(--space-xs);
                                padding: 0.75em 1em 0.75em 1.1em;
                                font-size: 0.85rem;
                                color: var(--color-gray);
                                border-left: 3px solid transparent;
                                cursor: pointer;
                                &:not(.has-items) { color: var(--color-muted); }
                                user-select: none;
                                &:hover:not(.muted):not(.active) {
                                    background: var(--background-page-secondary);
                                    color: var(--color-primary);
                                }
                                &.has-items {
                                    .landing-sidenav-tab-dot {
                                        background: var(--color-primary);
                                    }
                                }
                                &.active {
                                    border-left-color: var(--color-primary);
                                    background: var(--color-primary-xlight);
                                    color: var(--color-black);
                                    font-weight: 600;
                                    .landing-sidenav-tab-dot {
                                        background: var(--color-gray);
                                    }
                                    &.has-items .landing-sidenav-tab-dot {
                                        background: var(--color-primary);
                                    }
                                }
                                &.muted {
                                    opacity: 0.38;
                                }
                            }
                            .landing-sidenav-tab-dot {
                                width: 7px;
                                height: 7px;
                                border-radius: var(--radius-pill);
                                background: var(--color-border-dark, var(--color-border));
                                flex-shrink: 0;
                            }
                            .landing-sidenav-tab-text {
                            }
                            .landing-sidenav-tab-link {
                                color: var(--color-muted);
                                font-size: 0.7rem;
                                line-height: 1;
                                opacity: 0;
                                transition: opacity 0.1s;
                                &:hover { color: var(--color-primary); }
                            }
                            .landing-sidenav-tab:hover .landing-sidenav-tab-link {
                                opacity: 1;
                            }
                            .landing-sidenav-tab-badge {
                                margin-left: auto;
                                font-size: 0.7rem;
                                font-weight: 700;
                                color: white;
                                background: var(--color-orange);
                                border-radius: var(--radius-pill);
                                min-width: 18px;
                                height: 18px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                padding: 0 0.4em;
                            }
                            .landing-sidenav-divider {
                                display: none;
                            }
                            .landing-sidenav-content {
                                flex: 3;
                                min-width: 0;
                                overflow-y: auto;
                                .landing-group-items {
                                    padding: 0;
                                }
                                .landing-group-empty {
                                    padding: var(--space-md) var(--space-lg);
                                    color: var(--color-muted);
                                }
                                &:has(.card) {
                                    padding: var(--space-md);
                                    display: flex;
                                    flex-direction: column;
                                    gap: var(--space-md);
                                    .card {
                                        margin-block: 0;
                                    }
                                }
                            }
                        }
                        &.landing-group--getting-started {
                            .landing-group-header {
                                align-items: flex-start;
                                gap: 0.5em;
                                .landing-group-header-left {
                                    flex-direction: row;
                                    flex-wrap: wrap;
                                    align-items: center;
                                    gap: 0.4em;
                                    .getting-started-subtitle {
                                        width: 100%;
                                    }
                                }
                            }
                            .getting-started-subtitle {
                                font-size: 0.8rem;
                                color: var(--color-gray);
                                margin: 0;
                                font-weight: 400;
                            }
                            .getting-started-group-header {
                                padding: 0.5em 1.25em 0.25em;
                                .getting-started-group-label {
                                    font-size: 0.72rem;
                                    font-weight: 700;
                                    text-transform: uppercase;
                                    color: var(--color-gray);
                                    letter-spacing: 0.04em;
                                }
                            }
                            .getting-started-tile {
                                display: flex;
                                flex-direction: column;
                                gap: 0;
                                overflow: hidden;
                                border-top: 1px solid var(--color-border);
                                border-bottom: 1px solid var(--color-border);
                                .getting-started-step {
                                    display: flex;
                                    flex-direction: row;
                                    align-items: flex-start;
                                    gap: 1em;
                                    padding: 0.85em 1.25em;
                                    border-bottom: 1px solid var(--color-border);
                                    transition: background 0.1s ease;
                                    &:last-child {
                                        border-bottom: none;
                                    }
                                    &:hover {
                                        background: var(--color-xlight);
                                    }
                                    .getting-started-check {
                                        padding-top: 0.15em;
                                        font-size: 1.1em;
                                        color: var(--color-gray-light);
                                        flex-shrink: 0;
                                    }
                                    .getting-started-text {
                                        display: flex;
                                        flex-direction: column;
                                        gap: 0.2em;
                                        .getting-started-label {
                                            font-weight: 500;
                                            font-size: 0.95em;
                                        }
                                        .getting-started-hint {
                                            font-size: 0.8em;
                                            color: var(--color-gray);
                                        }
                                    }
                                }
                            }
                        }
                        &.landing-group--alerts-group {
                            .alerts-group-body {
                                padding: 0.25em 0 0.5em;
                            }
                            .alerts-group-subgroup {
                                padding: 0.25em 0;
                            }
                            .alerts-group-subgroup-divider {
                                padding: 0.4em 1.25em;
                            }
                            .alerts-group-list {
                                list-style: none;
                                margin: 0;
                                padding: 0;
                            }
                            .alerts-group-item {}
                            .alerts-group-item-anchor {
                                display: flex;
                                align-items: center;
                                gap: 0.85em;
                                padding: 0.55em 1.25em;
                                text-decoration: none;
                                color: inherit;
                                border-radius: 0.35em;
                                border: 1px solid transparent;
                                margin: 0.1em 0.5em;
                                &:hover {
                                    background: var(--background-page-secondary);
                                    border-color: var(--color-border);
                                    cursor: pointer;
                                }
                            }
                            .alerts-group-count {
                                font-size: 0.78rem;
                                font-weight: 700;
                                min-width: 1.2em;
                                text-align: center;
                                flex-shrink: 0;
                                &.orange { color: var(--color-orange); }
                                &.blue   { color: var(--color-primary); }
                                &.red    { color: var(--color-danger); }
                            }
                            .alerts-group-label {
                                font-size: 0.85rem;
                                color: var(--color-text);
                            }
                            .alerts-group-empty {
                                color: var(--color-muted);
                                padding: 0.4em 1.25em 0.6em;
                                margin: 0;
                                text-align: center;
                            }
                        }
                        .landing-group-tile-list {
                            padding:1.5em;
                            gap:1.5em;
                            display:flex;
                            flex-direction: row;
                            flex-wrap:wrap;
                        }
                        .landing-group-tile-list--column {
                            flex-direction: column;
                            flex-wrap: nowrap;
                            padding: 0.75em;
                            gap: 0.75em;
                            tile-button { width: 100%; }
                            .tile-button-sub {
                                display: flex;
                                flex-direction: column;
                                font-size: var(--font-size-card-fields);
                                color: var(--color-muted);
                                .date-soon {
                                    color: var(--color-warning);
                                    font-weight: 500;
                                }
                            }

                        }
                        .landing-group-tile-list--inactive {
                            opacity: 0.45;
                            padding-top: 0;
                        }
                        .landing-tile-list-toggle {
                            all: unset;
                            cursor: pointer;
                            padding: 0 1.5em 1em;
                            font-size: 0.8rem;
                            color: var(--color-gray);
                            &:hover { color: var(--color-primary); }
                            &.landing-tile-list-toggle--column {
                                display: block;
                                width: 100%;
                                padding: 0.75em;
                                border-top: 1px solid var(--color-border);
                                box-sizing: border-box;
                            }
                        }
                        .landing-year-nav {
                            display: inline-flex;
                            align-items: center;
                            gap: 0.2em;
                            .landing-year-nav-btn {
                                background: var(--background-card);
                                border: none;
                                border-radius: 3px;
                                padding: 0.15em 0.35em;
                                cursor: pointer;
                                color: var(--color-gray);
                                font-size: 0.65rem;
                                line-height: 1;
                                &:hover { color: var(--color-primary); }
                            }
                            .landing-year-select {
                                font-size: 0.72rem;
                                border: 1px solid var(--color-border);
                                border-radius: 4px;
                                padding: 0.1em 0.25em;
                                background: var(--background-card);
                                color: var(--color-black);
                                cursor: pointer;
                                &:focus { outline: none; border-color: var(--color-primary); }
                            }
                        }
                        .landing-group-empty {
                            padding: 1.5em;
                            text-align: center;
                            color: var(--color-muted);
                            margin: 0;
                        }
                        .landing-total-metrics {
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            &.landing-total-metrics--twin {
                                grid-template-columns: 1fr 1fr;
                                gap: var(--space-md);
                                .landing-total-block {
                                    border: 1px solid var(--color-border);
                                    border-radius: var(--radius-base);
                                }
                            }
                            /* One column, rule-divided — for a narrow sticky column, where
                               the default three-across grid has no room to breathe. Every
                               block keeps its top padding here, including the first: the
                               group-level rule zeroes it to close up against a borderless
                               header, which a stacked column does not have. */
                            &.landing-total-metrics--stacked {
                                grid-template-columns: 1fr;
                                .landing-total-block {
                                    padding-top: var(--space-md);
                                }
                                .landing-total-block + .landing-total-block {
                                    border-top: 1px solid var(--color-border);
                                }
                            }
                        }
                        .landing-total-block {
                            background: var(--background-page);
                            /* border: 1px solid var(--color-border); */
                            /* border-radius: 0.5em; */
                            padding: 1em 1.25em;
                            .landing-total-metric-header {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-bottom: 0.25em;
                                .landing-total-label { margin: 0; }
                                .landing-total-metric-link {
                                    font-size: 0.75rem;
                                    color: var(--color-primary);
                                    text-decoration: none;
                                    display: flex;
                                    align-items: center;
                                    gap: var(--space-xs);
                                    white-space: nowrap;
                                    &:hover { text-decoration: underline; }
                                }
                            }
                            .landing-total-label {
                                font-size: 0.8rem;
                                font-weight: 600;
                                text-transform: uppercase;
                                letter-spacing: 0.04em;
                                color: var(--color-gray);
                                margin: 0 0 0.25em 0;
                            }
                            .landing-total-subtitle {
                                font-size: var(--font-size-small);
                                color: var(--color-muted);
                                margin: var(--space-sm) 0 0 0;
                                border-top: 1px solid var(--color-border);
                                padding-top: var(--space-sm);
                                /* The subtitle and the breakdown each open with a rule. Run
                                   together that reads as two dividers for one break, so the
                                   subtitle yields its rule to the breakdown below it. */
                                &:has(+ .landing-total-breakdown) {
                                    border-top: none;
                                    padding-top: 0;
                                    margin-top: var(--space-xs);
                                }
                            }
                            .landing-total-amount {
                                font-size: 1.25rem;
                                font-weight: 700;
                                color: var(--color-primary);
                                margin: 0;
                            }
                            &.landing-total-block--orange .landing-total-amount { color: var(--color-orange); }
                            &.landing-total-block--red .landing-total-amount { color: var(--color-danger); }
                            &.landing-total-block--blue .landing-total-amount { color: var(--color-blue); }
                            &.landing-total-block--green .landing-total-amount { color: var(--color-green); }
                            &.landing-total-block--muted .landing-total-amount { color: var(--color-muted); }
                            &.landing-total-block--black .landing-total-amount { color: var(--color-black); }
                            .landing-total-breakdown {
                                margin-top: 0.75em;
                                padding-top: 0.75em;
                                border-top: 1px solid var(--color-border);
                                display: flex;
                                flex-direction: column;
                                gap: 0.35em;
                                .landing-total-row {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    .landing-total-row-label {
                                        font-size: 0.8rem;
                                        color: var(--color-gray);
                                    }
                                    .landing-total-row-value {
                                        font-size: 0.85rem;
                                        font-weight: 700;
                                        color: var(--color-black);
                                        &.landing-total-row-value--negative {
                                            color: var(--color-danger);
                                        }
                                    }
                                }
                            }
                        }
                        .landing-group-overflow-footer {
                            display: block;
                            width: 100%;
                            padding: 0.5em 1.25em;
                            background: none;
                            border: none;
                            border-top: 1px solid var(--color-border);
                            text-align: left;
                            font-size: 0.8rem;
                            color: var(--color-primary);
                            cursor: pointer;
                            &:hover {
                                color: var(--color-primary-dark);
                                text-decoration: underline;
                            }
                        }
                        .landing-group-list-wrapper:not(:empty) {
                            display:flex;
                            flex-direction: column;
                            /* A divider and the tiles under it are one unit, so the
                               gap between them is tight and the space that separates
                               one group from the next is put on the divider below,
                               rather than every child paying for both. */
                            gap: var(--space-xs);
                            padding-block: var(--space-xs);
                            .landing-group-items {
                                padding-inline:0;
                            }
                            .landing-group-items + .landing-subgroup-divider,
                            .landing-group-empty + .landing-subgroup-divider,
                            .landing-group-overflow-footer + .landing-subgroup-divider {
                                margin-top: var(--space-md);
                            }
                        }
                        .landing-subgroup {
                            .landing-group-items {
                                padding-left: 0;
                                padding-right: 0;
                            }
                        }
                        .landing-metrics {
                            .landing-metric-row {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                padding: 0.65em 1.25em;
                                border-bottom: 1px solid var(--color-border);
                                &:last-child { border-bottom: none; }
                                .landing-metric-label {
                                    font-size: 0.85rem;
                                    color: var(--color-gray);
                                }
                                .landing-metric-value {
                                    font-size: 0.85rem;
                                    font-weight: 600;
                                }
                            }
                        }
                        .landing-nav-link {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 0.6em 0.25em 0.6em 0.75em;
                            color: var(--color-primary);
                            font-size: 0.85rem;
                            font-weight: 500;
                            text-decoration: none;
                            border-bottom: 1px solid var(--color-border);
                            &:last-child { border-bottom: none; }
                            &:hover { color: var(--color-primary-dark); }
                        }
                        &.landing-group--info {
                            .landing-group-list-wrapper .landing-group-items {
                                border: 1px solid var(--color-border);
                                border-radius: 0.5em;
                                overflow: hidden;
                            }
                            .landing-group-body {
                                display: flex;
                                flex-direction: column;
                                padding: 0 1em;
                                gap: 0;
                                .overview-header {
                                    padding: 0.25em 0.25em 0.6em;
                                    .overview-header-name {
                                        font-size: 1.1rem;
                                        font-weight: 600;
                                        color: var(--color-primary);
                                        text-decoration: none;
                                        &:is(a):hover { text-decoration: underline; }
                                    }
                                    .overview-header-subname {
                                        margin: 0.1em 0 0;
                                        font-size: 0.85rem;
                                        color: var(--color-gray);
                                    }
                                }
                                .overview-group {
                                    display: grid;
                                    grid-template-columns: 120px 1fr;
                                    gap: 1.5em;
                                    align-items: center;
                                    padding: 0.6em 1em;
                                    margin-inline: -1em;
                                    &:has(+ .overview-group) {
                                        border-bottom: 1px solid var(--color-border);
                                    }
                                    label {
                                        /* font-size: 0.75em; */
                                        color: var(--color-muted);
                                        font-weight: normal;
                                    }
                                    .overview-value {
                                        display:flex;
                                        flex-direction: column;
                                        gap:0.5em;
                                        color: var(--color-gray);
                                        word-break: break-word;
                                        &.link {
                                            color: var(--color-primary);
                                            text-decoration: none;
                                            cursor: pointer;
                                            &:hover { text-decoration: underline; }
                                        }
                                        &.primary {
                                            color: var(--color-primary);
                                        }
                                        &.alert {
                                            color: var(--color-orange);
                                        }
                                        &.success {
                                            color: var(--color-green)
                                        }
                                        &.overview-value--inline {
                                            flex-direction: row;
                                            flex-wrap: wrap;
                                            align-items: center;
                                            gap: var(--space-xs);
                                            .overview-value-sep {
                                                color: var(--color-gray);
                                                line-height: 1;
                                            }
                                        }
                                        .landing-tile-avatar-group {
                                            display: inline-flex;
                                            align-items: center;
                                            gap: var(--space-xs);
                                        }
                                        .landing-tile-avatar {
                                            flex-shrink: 0;
                                            width: 1.6rem;
                                            height: 1.6rem;
                                            border-radius: var(--radius-pill);
                                            background: var(--color-primary);
                                            color: var(--color-white);
                                            font-size: var(--avatar-font-size);
                                            font-weight: var(--font-weight-semi-bold);
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                        }
                                        .landing-tile-indicator {
                                            display: inline-block;
                                            flex-shrink: 0;
                                            width: var(--indicator-size);
                                            height: var(--indicator-size);
                                            border-radius: var(--radius-pill);
                                            background: var(--badge-font-color--inactive);
                                            &.primary  { background: var(--badge-font-color--primary); }
                                            &.success  { background: var(--badge-font-color--success); }
                                            &.alert    { background: var(--badge-font-color--alert); }
                                            &.inactive { background: var(--badge-font-color--inactive); }
                                        }
                                        .overview-subvalue {
                                            display:flex;
                                            flex-direction: row;
                                            gap:0.5em;
                                            align-items: center;
                                            .overview-subvalue-tag {
                                                font-size: 0.75rem;
                                                font-weight: 500;
                                                color: var(--color-gray);
                                                text-transform: uppercase;
                                                letter-spacing: 0.04em;
                                                &.warning { color: var(--color-warning); }
                                            }
                                            .overview-subvalue-icon {
                                                i.green {
                                                    color: var(--color-green);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        &.landing-group--table {
                            .landing-group-body {
                                overflow-x: auto;
                                .table-context-menu {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    padding: 0.5em 1em;
                                    border-bottom: 1px solid var(--color-border);
                                    &:has(.table-multiselect:empty) { 
                                        &:has(.table-buttons:empty) {
                                            display: none; 
                                        }
                                    }
                                }
                                .table-wrapper { overflow-x: auto; }
                                .section-empty-message {
                                    padding: 1.5em;
                                    color: var(--color-muted);
                                    box-sizing: border-box;
                                }
                            }
                        }
                        &.landing-group--stat {
                            .landing-group-body {
                                padding: 1em 1.25em;
                                .metric-section-value {
                                    font-size: 1.6rem;
                                    font-weight: 700;
                                    color: var(--color-primary);
                                    margin: 0 0 0.5em;
                                }
                            }
                        }
                        &.landing-group--comment {
                            .landing-group-body {
                                padding: 0.75em 1em;
                                .empty-message {
                                    text-align: center;
                                    color: var(--color-muted);
                                }
                            }
                        }
                        &.landing-group--card {
                            .landing-group-body {
                                padding: 0.75em 1em;
                                .empty-message {
                                    text-align: center;
                                    color: var(--color-muted);
                                }
                            }
                        }
                        &.landing-group--tabs {
                            .landing-tabs-content {
                                display: flex;
                                flex-direction: column;
                                .landing-group {
                                    border: none;
                                    /* border-top: 1px solid var(--color-border); */
                                    border-radius: 0;
                                }
                            }
                        }
                        .landing-group-items {
                            padding: 0;
                            gap: 0;
                            .landing-tile {
                                border-radius: 0;
                                border: none;
                                border-bottom: 1px solid var(--color-border);
                                padding: 0.75em 1em;
                                &:last-child { border-bottom: none; }
                                &:hover { background: var(--background-page-secondary); }
                            }
                            .landing-tile-wrapper {
                                border-bottom: 1px solid var(--color-border);
                                &:last-child { border-bottom: none; }
                                &:hover { background: var(--background-page-secondary); }
                                .landing-tile {
                                    border-bottom: none;
                                    &:hover { background: none; }
                                }
                            }
                            &:has(.card-list-contact-card) {
                                padding: var(--space-sm);
                                gap: var(--space-sm);
                            }
                        }
                        &.landing-group--sidenav {
                            .landing-group-items {
                                .landing-tile:last-child { border-bottom: 1px solid var(--color-border); }
                                .landing-tile-wrapper:last-child { border-bottom: 1px solid var(--color-border); }
                            }
                        }
                    }
                    .landing-group-items {
                        padding: 0.4em 0.5em;
                        display: flex;
                        flex-direction: column;
                        gap: 0.15em;
                        /* A list group that uses group header rows reads as a banded
                           table rather than a stack of inset tiles, so its rows lose the
                           inset and run edge to edge under the tinted heading bands. */
                        &:has(.landing-tile--group-row) {
                            padding: 0;
                            gap: 0;
                            .landing-tile-wrapper {
                                padding-right: var(--space-sm);
                                /* The band runs the full width of the card, so the
                                   wrapper carries the tint too -- the tile itself stops
                                   short of the actions button. */
                                &:has(.landing-tile--group-row) {
                                    background: var(--color-primary-xlight);
                                }
                                &:last-child .landing-tile { border-bottom-color: transparent; }
                            }
                            .landing-tile {
                                border-radius: 0;
                                border-color: transparent;
                                border-bottom-color: var(--color-border);
                                &:hover {
                                    border-color: transparent;
                                    border-bottom-color: var(--color-border);
                                }
                                &:last-child { border-bottom-color: transparent; }
                                /* Reading as a table rather than a list of links, the
                                   row name is body copy: full contrast, with the muted
                                   treatment left to the subname and the value column. */
                                .landing-tile-name {
                                    color: var(--color-black);
                                }
                            }
                        }
                        .landing-tile-wrapper {
                            display: flex;
                            align-items: center;
                            gap: 0.25em;
                            .landing-tile { flex: 1; }
                            .landing-tile-actions {
                                flex-shrink: 0;
                                background: none;
                                border: none;
                                cursor: pointer;
                                color: var(--color-gray);
                                padding: 0.25em;
                                line-height: 1;
                                font-size: 1rem;
                                border-radius: 0.25em;
                                display: flex;
                                align-items: center;
                                &:hover { color: var(--color-black); background: var(--background-page-secondary); }
                            }
                            .landing-tile-remove {
                                flex-shrink: 0;
                                background: none;
                                border: none;
                                cursor: pointer;
                                color: var(--color-gray);
                                padding: 0.25em;
                                line-height: 1;
                                font-size: 1rem;
                                border-radius: 0.25em;
                                &:hover { color: var(--color-red); background: var(--background-page-secondary); }
                            }
                        }
                        .landing-tile {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: space-between;
                            gap: 0.5em;
                            padding: 0.6em 0.75em;
                            border-radius: 0.35em;
                            border: 1px solid transparent;
                            text-decoration: none;
                            color: inherit;
                            cursor: pointer;
                            &:hover {
                                background: var(--background-page-secondary);
                                border-color: var(--color-border);
                            }
                            .landing-tile-name-row {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                width: 100%;
                            }
                            .landing-tile-name {
                                font-weight: 500;
                                font-size: var(--font-size-regular);
                                flex: 1;
                            }
                            .landing-tile-name-icon {
                                font-size: var(--font-size-regular);
                                color: var(--color-danger);
                                margin-right: 0.3em;
                                flex-shrink: 0;
                            }
                            .landing-tile-avatar {
                                flex-shrink: 0;
                                width: 1.6rem;
                                height: 1.6rem;
                                border-radius: 50%;
                                background: var(--color-primary);
                                color: var(--color-white);
                                font-size: 0.75rem;
                                font-weight: 600;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                letter-spacing: 0.03em;
                            }
                            .landing-tile-avatar-group {
                                display: inline-flex;
                                align-items: center;
                                gap: 0.35rem;
                            }
                            .landing-tile-avatar-label {
                                font-size: var(--font-size-regular);
                                font-weight: normal;
                                white-space: nowrap;
                            }
                            .landing-tile-name-group {
                                flex: 1;
                                display: flex;
                                align-items: center;
                                gap: 0.2rem;
                                min-width: 0;
                                overflow: hidden;
                                .landing-tile-name {
                                    flex: 0 0 auto;
                                }
                                /* Avatar leads the name (no dot separator) — needs a
                                   real gap where the separator would have been */
                                &.landing-tile-name-group--avatar-lead {
                                    gap: var(--space-xs);
                                }
                            }
                            .landing-tile-sep {
                                color: var(--color-gray);
                                font-size: 0.75rem;
                                flex-shrink: 0;
                                line-height: 1;
                            }
                            .landing-tile-subname {
                                color: var(--color-gray);
                                font-weight: 400;
                                font-size: var(--font-size-regular);
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            .landing-tile-badge {
                                display: inline-flex;
                                align-items: center;
                                gap: var(--space-xs);
                                font-size: var(--font-size-regular);
                                color: var(--badge-font-color--primary);
                                font-weight: 500;
                                white-space: nowrap;
                                text-transform: uppercase;
                                &.primary {
                                    color: var(--badge-font-color--primary);
                                }
                                &.alert {
                                    color: var(--badge-font-color--alert);
                                }
                                &.success {
                                    color: var(--badge-font-color--success);
                                }
                                &.muted {
                                    color: var(--badge-font-color--muted);
                                    /* Supplementary markers keep the casing Python sends
                                       ("HSA", "Improvement") instead of shouting like the
                                       status badges */
                                    text-transform: none;
                                }
                                /* A settled status -- the muted grey, but still a status, so it
                                   keeps the uppercase its siblings use. */
                                &.neutral {
                                    color: var(--badge-font-color--muted);
                                }
                                &.inactive {
                                    color: var(--badge-font-color--inactive);
                                    /* Keep the label as Python casts it ("Inactive") rather
                                       than shouting it in caps like the other badge colors */
                                    text-transform: none;
                                }
                                /* Favorite star. Matches the color AccountPM.favorite_icon
                                   uses for the same star in table views. */
                                &.goldenrod {
                                    color: var(--color-goldenrod);
                                }
                                .landing-tile-badge-icon {
                                    font-size: var(--font-size-regular);
                                    text-transform: none;
                                }
                                /* Status dot — matches the Overview status indicator; takes
                                   its color from the badge's own color class via currentColor */
                                .landing-tile-badge-dot {
                                    display: inline-block;
                                    flex-shrink: 0;
                                    width: var(--indicator-size);
                                    height: var(--indicator-size);
                                    border-radius: var(--radius-pill);
                                    background: currentColor;
                                }
                            }
                            .landing-tile-inline-right {
                                font-size: var(--font-size-regular);
                                color: var(--color-gray);
                                white-space: nowrap;
                            }
                            .landing-tile-meta {
                                display: flex;
                                gap: 0.5em;
                                font-size: var(--font-size-regular);
                                color: var(--color-gray);
                                .landing-tile-date {
                                    &.date-soon    { color: var(--color-warning); font-weight: 500; }
                                    &.date-expired { color: var(--color-danger);  font-weight: 500; }
                                }
                                &.landing-tile-meta--spread {
                                    justify-content: space-between;
                                    width: 100%;
                                    .landing-tile-icon-group {
                                        display: inline-flex;
                                        align-items: center;
                                        gap: var(--space-xs);
                                        .trend-up   { color: var(--color-danger); }
                                        .trend-down { color: var(--color-green-dark); }
                                        .trend-flat { color: var(--color-muted); }
                                        .icon-muted { color: var(--color-muted); }
                                    }
                                    .landing-tile-meta-left {
                                        display: flex;
                                        align-items: center;
                                        gap: 0.2em;
                                        min-width: 0;
                                        overflow: hidden;
                                        .landing-tile-avatar {
                                            width: 1.35rem;
                                            height: 1.35rem;
                                            font-size: 0.7rem;
                                        }
                                        .landing-tile-avatar-group {
                                            min-width: 0;
                                            overflow: hidden;
                                            span:not(.landing-tile-avatar) {
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                                white-space: nowrap;
                                            }
                                        }
                                    }
                                    .landing-tile-meta-right {
                                        display: flex;
                                        align-items: center;
                                        gap: 0.5em;
                                        /* Same accent and size as the form checkboxes, so a
                                           toggle in a row reads as the one the modals use. */
                                        .landing-tile-check {
                                            accent-color: var(--color-checkbox);
                                            height: 1.25em;
                                            width: 1.25em;
                                            margin: 0;
                                            flex-shrink: 0;
                                            cursor: pointer;
                                        }
                                        .bold        { font-weight: bold; }
                                        .danger      { color: var(--color-danger);  font-weight: 500; }
                                        .date-soon   { color: var(--color-warning); font-weight: 500; }
                                        .value-muted { color: var(--color-muted); }
                                    }
                                }
                            }
                            &.landing-tile--stacked {
                                flex-direction: column;
                                align-items: flex-start;
                                .landing-tile-name-row {
                                    width: 100%;
                                }
                                .landing-tile-sub {
                                    font-size: var(--font-size-regular);
                                    color: var(--color-gray);
                                    margin-top: -0.1em;
                                }
                                .landing-tile-meta {
                                    width: 100%;
                                }
                            }
                            &.landing-tile--muted {
                                opacity: 0.45;
                            }
                            /* A far lighter touch than --muted above, and deliberately a
                               separate class: the "Include Inactive" footer removes every
                               .landing-tile--muted tile it finds, so a tile that is merely
                               faded must not carry that class. Used for a record whose state
                               has gone quiet but which still belongs in the list, such as an
                               inactive account. */
                            &.landing-tile--faded {
                                opacity: 0.85;
                                /* Opacity alone reaches the name but barely shows on it: the
                                   name is the darkest, heaviest text on the tile, where
                                   everything around it is already gray, so the same reduction
                                   is far less perceptible there. Muting its colour to match
                                   the subname is what makes the whole tile recede evenly. */
                                .landing-tile-name {
                                    color: var(--color-gray);
                                }
                            }
                            /* Group header row inside a list group: a tile that labels the
                               rows beneath it and carries their rolled-up total, rather than
                               being a record of its own. Squared off and tinted so it reads
                               as a band across the card instead of another tile. */
                            &.landing-tile--group-row {
                                background: var(--color-primary-xlight);
                                cursor: default;
                                /* Labels its rows rather than being a record of its own,
                                   so it does not take the hover treatment. */
                                &:hover { background: var(--color-primary-xlight); }
                                .landing-tile-name {
                                    font-weight: var(--font-weight-semi-bold);
                                }
                                .landing-tile-inline-right {
                                    color: var(--color-black);
                                    font-weight: var(--font-weight-semi-bold);
                                }
                            }
                            /* Leading icon + count column (e.g. attachment count), sitting beside the
                               name/rows content block rather than inside it. Overrides --stacked's
                               column direction back to a row so the leading column and content sit
                               side by side. */
                            &.landing-tile--with-indicator {
                                flex-direction: row;
                                align-items: center;
                                gap: var(--space-md);
                                .landing-tile-leading {
                                    flex-shrink: 0;
                                    min-width: 2.25rem;
                                    display: flex;
                                    align-items: center;
                                    gap: 0;
                                    color: var(--color-muted);
                                    font-size: var(--font-size-regular);
                                    i {
                                        font-size: var(--font-size-xlarge);
                                    }
                                    &.landing-tile-leading--active {
                                        color: var(--color-blue);
                                    }
                                }
                                .landing-tile-content {
                                    flex: 1;
                                    min-width: 0;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: flex-start;
                                    /* Match the base tile's line gap — otherwise the name
                                       and meta rows sit flush when a file indicator is present. */
                                    gap: 0.5em;
                                    .landing-tile-name-row {
                                        width: 100%;
                                    }
                                    .landing-tile-meta {
                                        width: 100%;
                                    }
                                }
                            }
                            /* ID card tile: name on the left, front/back chips stacked to its right. */
                            &.landing-tile--idcard {
                                flex-direction: row;
                                align-items: center;
                                justify-content: flex-start;
                                gap: var(--space-lg);
                                .landing-tile-name-row {
                                    flex: 0 0 45%;
                                }
                                .landing-tile-meta,
                                .landing-tile-meta--spread {
                                    flex: 1;
                                    justify-content: flex-start;
                                    .landing-tile-meta-left {
                                        flex-direction: column;
                                        align-items: flex-start;
                                        gap: var(--space-xs);
                                        overflow: visible;
                                        .landing-tile-sep {
                                            display: none;
                                        }
                                        .landing-tile-avatar {
                                            font-size: var(--font-size-large);
                                        }
                                    }
                                }
                            }
                            /* Clickable front/back chip: add when empty, view when filled. */
                            .id-card-side {
                                cursor: pointer;
                                border-radius: var(--radius-base);
                                padding: var(--space-xs) var(--space-sm);
                                transition: background 0.15s ease;
                                &:hover {
                                    background: var(--color-gray-light);
                                }
                                .landing-tile-avatar {
                                    background: transparent;
                                    color: var(--color-primary);
                                }
                            }
                        }
                    }
                    .landing-subgroup-divider {
                        display: flex;
                        align-items: center;
                        gap: var(--space-sm);
                        /* No lead-in of its own: it stacked on top of the wrapper's
                           gap and padding, which put ~2em above every label. Only a
                           divider following another group gets space back, from the
                           sibling rule on the wrapper. */
                        margin-top: 0;
                        /* Left matches .landing-tile's own 1em inset so the dot lines
                           up with the tile content. Right is NOT --space-md: the menu
                           has to land in the same column as the tile menus below it,
                           and those sit 0.75em in from
                           `.landing-group-items .landing-tile-wrapper`'s padding-right.
                           Changing one means changing the other. */
                        padding-left: var(--space-md);
                        padding-right: 0.75em;
                        &::after {
                            content: '';
                            flex: 1;
                            height: 1px;
                            background: var(--color-border);
                        }
                        /* Same marker a tile badge uses, so a status reads the same
                           way on a divider as it does on a row. */
                        .landing-subgroup-divider-dot {
                            display: inline-block;
                            flex-shrink: 0;
                            width: var(--indicator-size);
                            height: var(--indicator-size);
                            border-radius: var(--radius-pill);
                            background: var(--color-gray);
                            &.green { background: var(--color-green); }
                            &.gray { background: var(--color-gray); }
                            &.red { background: var(--color-danger); }
                            &.orange { background: var(--color-orange); }
                            &.blue { background: var(--color-primary); }
                        }
                        .landing-subgroup-divider-label {
                            font-size: var(--font-size-small);
                            font-weight: 600;
                            color: var(--color-primary);
                            white-space: nowrap;
                        }
                        /* The rule above is an ::after, which is always the last
                           child, so an appended menu would land between the label
                           and the rule. `order` moves it past the rule instead, to
                           the far right. The box mirrors .landing-tile-actions, so
                           this menu and a tile's are the same size. */
                        .landing-subgroup-divider-actions {
                            order: 1;
                            flex-shrink: 0;
                            padding: var(--space-xs);
                            line-height: 1;
                            font-size: 1rem;
                            border: none;
                            border-radius: var(--radius-sm);
                            background: none;
                            color: var(--color-gray);
                            cursor: pointer;
                            display: flex;
                            align-items: center;
                            &:hover {
                                color: var(--color-black);
                                background: var(--background-page-secondary);
                            }
                        }
                    }
                    .landing-tabs {
                        display: flex;
                        overflow-x: auto;
                        border-bottom: 1px solid var(--color-border);
                        background: var(--background-page);
                        .landing-tab {
                            display: flex;
                            align-items: center;
                            gap: 0.4em;
                            padding: 1em 1.5em calc(1em - 3px);
                            border: none;
                            border-bottom: 3px solid transparent;
                            background: none;
                            cursor: pointer;
                            font-size: 0.9rem;
                            white-space: nowrap;
                            color: var(--color-text);
                            &.active {
                                border-bottom-color: var(--color-primary);
                                color: var(--color-primary);
                                font-weight: 600;
                            }
                            &:hover:not(.active) {
                                border-bottom-color: var(--color-border-dark, var(--color-border));
                            }
                            i { font-size: 1em; }
                        }
                    }
                    .landing-primary-info {
                        padding: 1.25em 1.5em 1em;
                        background: var(--background-page);
                        border-bottom: 1px solid var(--color-border);
                        .landing-primary-info-top {
                            display: flex;
                            align-items: flex-start;
                            justify-content: space-between;
                            gap: 1em;
                        }
                        .landing-primary-info-name-block {
                            display: flex;
                            flex-direction: column;
                            gap: 0.2em;
                        }
                        .landing-primary-info-name-row {
                            display: flex;
                            align-items: center;
                            gap: 0.6em;
                            flex-wrap: wrap;
                        }
                        .landing-primary-info-name {
                            font-size: 1.4rem;
                            font-weight: 700;
                            margin: 0;
                        }
                        .landing-primary-info-badge {
                            font-size: 0.75rem;
                            font-weight: 600;
                            padding: 0.2em 0.6em;
                            border-radius: 1em;
                            background: var(--color-border);
                            color: var(--color-text);
                        }
                        .landing-primary-info-subname {
                            font-size: 0.9rem;
                            color: var(--color-gray);
                            margin: 0;
                        }
                        .landing-primary-info-buttons {
                            display: flex;
                            align-items: center;
                            gap: 0.5em;
                            flex-shrink: 0;
                        }
                        .landing-primary-info-fields {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 0.25em 1.5em;
                            margin-top: 0.75em;
                        }
                        .landing-primary-info-field {
                            display: flex;
                            align-items: center;
                            gap: 0.35em;
                            font-size: 0.85rem;
                        }
                        .landing-primary-info-field-label {
                            color: var(--color-gray);
                        }
                        .landing-primary-info-field-value {
                            font-weight: 500;
                            color: var(--color-text);
                            &:is(a) {
                                color: var(--color-primary);
                                text-decoration: none;
                                &:hover { text-decoration: underline; }
                            }
                            &.landing-primary-info-field-empty {
                                color: var(--color-gray);
                                font-weight: 400;
                            }
                        }
                    }
                }
                .card-list-contact-card {
                    display: flex;
                    align-items: center;
                    gap: var(--space-sm);
                    padding: var(--space-sm);
                    background: var(--background-page);
                    border: 1px solid var(--color-border);
                    border-radius: var(--radius-base);
                    text-decoration: none;
                    color: inherit;
                    cursor: pointer;
                    &:hover { background: var(--background-page-secondary); }
                    &.card-list-contact-card--active {
                        border-color: var(--color-primary);
                        background: var(--background-container);
                    }
                    &.card-list-contact-card--muted {
                        opacity: 0.45;
                    }
                    /* The contact-card twin of .landing-tile--faded, and a separate class
                       from --muted above for the same reason: the "Include Inactive" footer
                       removes every --muted card it finds, so a card that is merely faded
                       must not carry that class. Used for a record whose state has gone
                       quiet but which still belongs in the list, such as an inactive
                       contact or vendor. */
                    &.card-list-contact-card--faded {
                        opacity: 0.85;
                        /* Opacity alone reaches the name but barely shows on it: the name is
                           the darkest, heaviest text on the card, where everything around it
                           is already gray, so the same reduction is far less perceptible
                           there. Muting its colour is what makes the whole card recede
                           evenly. */
                        .card-list-contact-card-name {
                            color: var(--color-gray);
                        }
                    }
                    .card-list-contact-card-avatar {
                        flex-shrink: 0;
                        width: 2.4rem;
                        height: 2.4rem;
                        border-radius: 50%;
                        background: var(--color-primary);
                        color: var(--color-white);
                        font-size: 0.9rem;
                        font-weight: 600;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        letter-spacing: 0.03em;
                    }
                    .card-list-contact-card-body {
                        display: flex;
                        flex: 1 1 auto;
                        flex-direction: column;
                        gap: var(--space-xs);
                        min-width: 0;
                    }
                    .card-list-contact-card-name-line {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: var(--space-sm);
                        min-width: 0;
                    }
                    .card-list-contact-card-name-group {
                        display: flex;
                        align-items: center;
                        gap: var(--space-xs);
                        min-width: 0;
                        overflow: hidden;
                    }
                    .card-list-contact-card-status {
                        flex-shrink: 0;
                        display: flex;
                        align-items: center;
                        gap: var(--space-xs);
                        color: var(--color-gray);
                        white-space: nowrap;
                        &::before {
                            content: '';
                            width: 0.5rem;
                            height: 0.5rem;
                            border-radius: var(--radius-pill);
                            background: var(--color-gray);
                            border: none;
                            flex-shrink: 0;
                        }
                        &.success::before { background: var(--color-primary); }
                        &.inactive::before { background: var(--color-gray); }
                    }
                    .card-list-contact-card-row {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: var(--space-sm);
                        color: var(--color-gray);
                    }
                    .card-list-contact-card-row-left {
                        display: flex;
                        align-items: center;
                        min-width: 0;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .card-list-contact-card-row-right {
                        flex-shrink: 0;
                        white-space: nowrap;
                    }
                    .card-list-contact-card-sep {
                        color: var(--color-gray);
                        flex-shrink: 0;
                    }
                    .card-list-contact-card-badge {
                        font-size: var(--font-size-small);
                        font-weight: 500;
                        white-space: nowrap;
                        text-transform: uppercase;
                        color: var(--badge-font-color--primary);
                        &.alert   { color: var(--badge-font-color--alert); }
                        &.success { color: var(--badge-font-color--success); }
                    }
                    .card-list-contact-card-name {
                        font-weight: 500;
                        font-size: var(--font-size-regular);
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .card-list-contact-card-subname {
                        font-size: var(--font-size-regular);
                        color: var(--color-gray);
                        font-weight: 400;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
                /* Record page Contacts tab (section_contacts_pm) — plain divided
                   list instead of the bordered card look used on the standalone
                   Contacts/Vendors panel pages. Applies both to the full record
                   page (#record-columns) and to a record's own tab content when
                   loaded into a master/detail panel's detail pane
                   (.card-list-panel-content) — but NOT to the panel's master list
                   column (.card-list-panel-list), which keeps the bordered cards. */
                #record-columns .landing-group-items:has(.card-list-contact-card),
                .landing-container.card-list-container--panel .card-list-panel-content .landing-group-items:has(.card-list-contact-card) {
                    padding: 0;
                    gap: 0;
                }
                #record-columns .card-list-contact-card,
                .card-list-panel-content .card-list-contact-card {
                    padding: 0.75em 1em;
                    background: none;
                    border: none;
                    border-bottom: 1px solid var(--color-border);
                    border-radius: 0;
                    &:last-child { border-bottom: none; }
                    &:hover { background: var(--background-page-secondary); }
                    &.card-list-contact-card--active {
                        border-color: transparent;
                        background: var(--background-container);
                    }
                }
                .home-tile-container {
                    display: flex;
                    flex-direction: column;
                    /* flex-wrap:wrap; */
                    max-height:100%;
                    width:100%;
                    height:100%;
                    overflow-y:auto;
                    padding:1.5em;
                    box-sizing: border-box;
                    gap:1em;
                    background:var(--background-page-secondary);
                    &:has(.side-tiles) {
                        grid-template-columns: 1fr;
                    }
                    .tiles {
                        display:flex;
                        flex-direction: column;
                        gap:1.5em;
                    }   
                    .tile-section {
                        box-sizing: border-box;
                        width:100%;
                        display:flex;
                        height:fit-content;
                        column-gap:1.5em;
                        row-gap:1.5em;
                        background:var(--background-page);
                        padding:1.5em;
                        border-radius:5px;
                        border:1px solid var(--color-border);
                        flex-wrap:wrap;
                        flex-direction: column;
                        .tile-section-titles {
                            width:100%;
                            grid-column: span 3;
                            display:flex;
                            flex-direction: row;
                            justify-content: space-between;
                            /* border-bottom: 1px solid var(--color-border); */
                            .tile-section-title {
                                margin:0;
                            }
                            .tile-section-title-text {
                                display:flex;
                                align-items: center;
                            }
                            .tile-section-subtitle {
                                margin:0;
                                font-weight:400;
                                &:empty {
                                    display:none;
                                }
                            }
                            .tile-section-title-additionals {
                                display:flex;
                                flex-direction: row;
                                gap:0.5em;
                                justify-content: center;
                            }
                            .title-section-filters {
                                display:flex;
                                flex-direction: row;
                                gap:0.5em;
                                .filter-stack {
                                    display:flex;
                                    align-items: center;
                                    gap:0.5em;
                                    input, select {
                                        text-align: left;
                                        background: var(--background-page-secondary);
                                        border: 1px solid var(--color-border);
                                        border-radius:5px;
                                        font-family: var(--font-family);
                                        font-size: var(--font-size-body);
                                        position: relative;
                                        /* &::-webkit-calendar-picker-indicator {
                                            position: absolute;
                                            left: 0;
                                            width: 100%;
                                            background:red;
                                            height: 100%;
                                            margin: 0;
                                            padding: 0;
                                            opacity: 0;
                                            cursor: pointer;
                                        } */
                                    }
                                    select {
                                        height:100%;    
                                    }
                                }
                            }
                            &:has(.tile-section-title:empty) {
                                &:has(.tile-section-subtitle:empty) {
                                    &:has(.tile-section-title-additionals:empty) {
                                        display: none;
                                    }
                                }
                            }
                        }
                        .section-tile {
                            border: 1px solid var(--color-border);
                            padding:1.5em;
                            box-sizing:border-box;
                            border-radius:5px;
                            transition-duration: 0.1s;
                            text-decoration: none;
                            color: var(--color-black);
                            background:var(--background-page-secondary);
                            display:flex;
                            flex-direction: column;
                            /* gap:0.5em; */
                            overflow:hidden;
                            max-width:100%;
                            &.row {
                                background:transparent;
                                border:none;
                                grid-column: span 3;
                                padding:0;
                                .section-tile-title-container {
                                    .section-tile-title-text {
                                        width:100%;
                                        flex-direction: row;
                                        align-items: center;
                                        justify-content: space-between;
                                        .section-tile-subtitle {
                                            margin: 0;
                                            font-weight:bold;
                                            color: var(--color-gray);
                                        }
                                    }
                                }
                            }
                            .section-tile-title-container {
                                display:flex;
                                flex-direction: row;
                                align-items: center;
                                gap:1.5em;
                                overflow:hidden;
                                margin-bottom:0.5em;
                                padding-inline:0.25em;
                                i {
                                    aspect-ratio: 1;
                                    display:flex;
                                    align-items: center;
                                    justify-content: center;
                                    width:25px;
                                    height:25px;
                                    font-size:1.5em;
                                    padding:0.5em;
                                    background:var(--background-page);
                                    border-radius:5px;
                                    &.green {
                                        color:var(--color-green);
                                    }
                                    &.blue {
                                        color:var(--color-primary);
                                    }
                                    &.orange {
                                        color:var(--color-warning);
                                    }
                                    &.yellow {
                                        color:var(--color-yellow);
                                    }
                                    &.purple {
                                        color:var(--color-purple);
                                    }
                                    &.red {
                                        color:var(--color-danger);
                                    }
                                }
                                &:has(.section-tile-title-text .section-tile-subtitle:empty) {
                                    gap:0.5em;
                                    i {
                                        font-size:1.5em;
                                        padding:0.25em;
                                        width:1.25em;
                                        height:1.25em;
                                    }
                                    .section-tile-title-text {
                                        gap:0;
                                    }
                                }
                                .section-tile-title-text {
                                    display:flex;
                                    flex-direction: column;
                                    gap:0.5em;
                                    max-width: 100%;
                                    overflow:hidden;
                                    .section-tile-title {
                                        margin:0;
                                        text-wrap:nowrap;
                                        overflow:hidden;
                                        text-overflow:ellipsis;
                                        color: var(--color-primary);
                                    }
                                    .section-tile-subtitle {
                                        margin: 0;
                                        font-weight:500;
                                        color: var(--color-gray-light);
                                    }
                                }
                                .section-tile-title-summary {
                                    margin-left:auto;
                                    font-weight:bold;
                                }
                            }
                            .section-tile-list-container {
                                margin:0;
                                padding:0;
                                .section-tile-list-item {
                                    padding:0.25em;
                                    padding-inline:0.5em;
                                    list-style-type:none;
                                    display:flex;
                                    align-items: center;
                                    position:relative;
                                    .section-tile-list-item-anchor {
                                        width:100%;
                                    }
                                    .account-layout {
                                        width:100%;
                                        display:flex;
                                        flex-direction: row;
                                        justify-content: space-between;
                                        gap:0.5em;
                                        .account-left {
                                            display:flex;
                                            overflow:hidden;
                                            gap:0.5em;
                                            .account-icons {
                                                display:flex;
                                                justify-content: space-evenly;
                                                gap:0.5em;
                                                &:empty {
                                                    display:none;
                                                }
                                            }
                                            .account-name {
                                                overflow:hidden;
                                                text-wrap:nowrap;
                                                text-overflow:ellipsis;
                                            }
                                        }
                                    }
                                    &:hover {
                                        cursor:pointer;
                                        background:var(--color-xlight);
                                        .section-tile-list-item-anchor {
                                            color:var(--color-primary-dark);
                                        }
                                    }
                                    &::before {
                                        content: "\F287";
                                        font-family:'Bootstrap-icons';
                                        margin-right:0.5em;
                                        font-size:0.85em;
                                    }
                                    .section-tile-list-item-anchor {
                                        text-decoration: none;
                                        color:black;
                                    }
                                    &.green {
                                        opacity: 0.5;
                                        &::before {
                                            color:var(--color-green);
                                        }
                                    }
                                    &.yellow::before {
                                        color:var(--color-warning);
                                    }
                                    &.red::before {
                                        color:var(--color-danger);
                                    }
                                    &.orange::before {
                                        color:var(--color-warning);
                                    }
                                    &.hidden::before {
                                        display:none;
                                    }
                                }
                            }
                            &[data-clickable="true"] {
                                /* box-shadow: 0 0 4px 1px rgba(56, 56, 56, 0.13); */
                                &:hover {
                                    /* box-shadow: 0 0 4px 2px var(--color-shadow); */
                                    background: var(--background-tile-hover);
                                    border: var(--border-tile-hover);
                                    color: var(--color-primary);
                                    cursor:pointer;
                                }
                            }
                            th {
                                text-transform: none;
                                background:var(--background-page-secondary);
                                color:black;
                                &:hover {
                                    cursor:default;
                                }
                            }
                            tbody tr {
                                /* background: var(--background-page-secondary); */
                                /* border-bottom: 1px solid var(--color-border); */
                                border-inline: 1px solid var(--color-border);
                                &:hover {
                                    cursor:default;
                                }
                            }
                            /* &[data-clickable="false"] {
                                .section-tile-title {
                                    border-bottom: 1px solid var(--color-border);
                                }
                            } */
                        }
                        .chart-container {
                            grid-column: span 3;
                        }
                    }
                    .home-tile {
                        align-items: center;
                        background: var(--background-tile);
                        border: var(--border-tile);
                        border-radius: 0.25em;
                        box-shadow: var(--box-shadow-tile);
                        color: var(--color-tile);
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        margin-block: 1em;
                        margin-inline: 2em;
                        padding: 1em;
                        text-decoration: none;
                        &:hover {
                            background: var(--background-tile-hover);
                            border: var(--border-tile-hover);
                            color: var(--color-tile-hover);
                            cursor: pointer;
                        }
                        h3 {
                            text-align: center;
                        }
                        i {
                            font-size: var(--font-size-tile-icons);
                        }
                    } 
                }
                .tile-container {
                    display:flex;
                    flex-direction: column;
                    gap:1.5em;
                    padding:1.5em;
                    box-sizing: border-box;
                    .tile {
                        align-items: center;
                        background: var(--background-page);
                        border: var(--border-tile);
                        border-radius: 5px;
                        color: var(--color-tile);
                        display: flex;
                        gap:0.5em;
                        padding: 1em;
                        text-decoration: none;
                        box-sizing: border-box;
                        width:100%;
                        overflow: hidden;
                        &:hover {
                            background: var(--background-tile-hover);
                            border: var(--border-tile-hover);
                            color: var(--color-tile-hover);
                            cursor: pointer;
                        }
                        .tile-title-container {
                            overflow:hidden;
                            .tile-title {
                                margin: 0;
                                text-wrap:nowrap;
                                overflow:hidden;
                                text-overflow: ellipsis;
                            }
                            .tile-subtitle {
                                margin:0;
                            }
                        }
                        i {
                            font-size: var(--font-size-tile-icons);
                            &.folder {
                                color:goldenrod;
                            }
                            &.green {
                                color:var(--color-green);
                            }
                            &.blue {
                                color:var(--color-primary);
                            }
                            &.orange {
                                color:var(--color-warning);
                            }
                            &.purple {
                                color:var(--color-purple);
                            }
                            &.red {
                                color:var(--color-danger);
                            }
                        }
                    } 
                }
                .select-domain-page-heading {
                    text-align: center;
                }
                .select-domain-container {
                    align-items: stretch;
                    display: flex;
                    flex-direction: column;
                    gap:1.5em;
                    padding:1.5em;
                    .domain-tile {
                        align-items: center;
                        background: var(--background-page);
                        border: var(--border-tile);
                        border-radius: 12px;
                        color: var(--color-tile);
                        display: flex;
                        /* justify-content: space-evenly; */
                        padding: 1.5em;
                        text-decoration: none;
                        gap:1.5em;
                        transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
                        /* img.app-suite-icon {
                            max-width:100%;
                            width:25%;
                        } */
                        .app-suite-icon {
                            max-width:100%;
                            width:60px;
                            text-align:center;
                            &:is(i) {
                                font-size:2rem;
                            }
                        }
                        h3 {
                            font-weight: 600;
                            color: #303030;
                            margin: 0;
                        }
                        p {
                            display: inline-block;
                            color: var(--color-primary);
                            background: #D6E4F0;
                            border-radius: 999px;
                            padding: 0.2em 0.75em;
                            font-size: 0.75rem;
                            font-weight: 500;
                            margin: 0.35em 0 0;
                        }
                        &:hover {
                            background: var(--background-tile-hover);
                            border: var(--border-tile-hover);
                            color: var(--color-tile-hover);
                            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
                            cursor: pointer;
                        }
                        i {
                            font-size: var(--font-size-tile-icons);
                        }
                    }
                    &:has(.no-domains) {
                        height:100%;
                        display:flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .no-domains {
                        background: var(--background-page);
                        padding:3.5rem;
                        box-sizing: border-box;
                        display:flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        font-size:1rem;
                        gap:1em;
                        border-radius: 12px;
                        box-shadow: 0 4px 24px rgba(0,0,0,0.06);
                        max-width: 480px;
                        .no-domains-img {
                            box-sizing: border-box;
                            max-width:100%;
                            width:125px;
                        }
                        i {
                            font-size: 2.75em;
                            color: var(--color-primary);
                            opacity: 0.7;
                        }
                        p {
                            text-align: center;
                            margin: 0;
                            color: var(--color-gray);
                            line-height: 1.6;
                        }
                        h2 {
                            text-align: center;
                            margin: 0;
                            font-size: 1.4rem;
                        }
                        span.link {
                            font-weight: 600;
                            color: var(--color-primary);
                            &:hover {
                                cursor: pointer;
                                color: var(--color-primary-dark);
                                text-decoration: underline;
                            }
                        }
                    }
                }
                .table-wrapper:has(+.pagination-container) {
                    max-height:calc(100% - 3em);
                    /* min-height:calc(100% - 3em); */
                    overflow-y:auto;
                }
                .pagination-container+.table-wrapper {
                    max-height:calc(100% - 3em);
                    min-height:calc(100% - 3em);
                    overflow-y:auto;
                    .main-table tbody tr:last-child {
                        border-bottom: 1px solid var(--color-border);
                    }
                }
                .pagination-container+.card-list-container:not(.card-list-container--panel),
                .pagination-container+.note-cards-container {
                    flex: 1;
                    min-height: 0;
                    overflow-y: auto;
                    > * { flex-shrink: 0; }
                }
                .pagination-container {
                    background: var(--background-page);
                    border-top: 1px solid var(--color-border);
                    padding-inline:1em;
                    box-sizing: border-box;
                    display:flex;
                    align-items: center;
                    justify-content:space-between;
                    position:sticky;
                    top:0;
                    width:100%;
                    color: var(--color-gray);
                    font-size: var(--font-size-pagination);
                    flex:1;
                    
                    .pagination-entity-count {
                        font-size:0.75rem;
                    }
                    .pagination-pages {
                        display:flex;
                        flex-direction: row;
                        align-items: center;
                        .page-input {
                            text-align: center;
                            min-width:3ch;
                            padding:0.25em;
                            background: var(--background-page);
                            color:var(--color-primary);
                            font-weight:bold;
                            margin-inline:0.25em;
                            border-radius: var(--radius-sm);
                            border: var(--border-input);
                            outline: 0px solid transparent;
                        }
                        button {
                            background:transparent;
                            border:none;
                            height:fit-content;
                            max-height:fit-content;
                            width:3ch;
                            font-size:large;
                            height:3ch;
                        }
                        button:disabled {
                            &:hover {
                                cursor:default;
                            }
                        }
                        button:hover {
                            color:var(--color-primary-dark);
                        }
                    }
                    &:empty {
                        display:none;
                    }
                }
                .main-table {
                    border: none;
                    border-collapse: collapse;
                    border-spacing: 0;
                    width: 100%;
                    overflow: auto;
                    page-break-inside: avoid;
                    display:flex;
                    
                    tbody {
                        display:flex;
                        flex-direction: column;
                        overflow:hidden;
                        width:100%;
                    }
                    thead {
                        display:none;
                        position: sticky;
                        top:0;
                        z-index:1;
                        th {
                            background: var(--background-table-heading);
                            color: var(--color-table-heading);
                            overflow: hidden;
                            padding-inline: 1em;
                            padding-block: 1.25em;
                            text-align: inherit;
                            text-overflow: ellipsis;
                            text-transform: uppercase;
                            white-space: nowrap;
                            position: relative;
                            i {
                                font-size: 1rem;
                            }
                            img {
                                width:1rem;
                                height:1rem;
                            }
                            &[data-align="right"] {
                                text-align:right;
                            }
                            &[data-sortable="true"] {
                                &:hover {
                                    background-color: var(--color-primary-dark);
                                }
                                &[data-direction="none"]::before {
                                    padding-right:0.5em;
                                    font-family: 'Bootstrap-icons';
                                    content:'\F127';
                                    opacity: 0.5;
                                }
                                &[data-direction="asc"]::before {
                                    padding-right:0.5em;
                                    font-family: 'Bootstrap-icons';
                                    content: '\F148'
                                }
                                &[data-direction="desc"]::before {
                                    padding-right:0.5em;
                                    font-family: 'Bootstrap-icons';
                                    content: '\F128';
                                }
                                &:empty {
                                    &::before {
                                        padding:0;
                                        position: absolute;
                                        top:50%;
                                        left:50%;
                                        transform: translate(-50%, -60%);
                                    }
                                }
                            }
                            &[data-mobile="false"] {
                                display:none;
                            }
                        }
                        th.heading-cell-icon {
                            padding:0.5em;
                            text-align: center;
                        }
                        th.heading-cell-minimum {
                            text-align:left;
                        }
                        th.select-cell {
                            padding:0.5em;
                            text-align:center;
                            width:20px;
                            input[type="checkbox"] {
                                height:1.15em;
                                width:1.15em;
                                &:hover {
                                    cursor:pointer;
                                }
                            }
                        }
                        &.thead-subtle {
                            border-inline: none;
                            background: transparent;
                            th {
                                background: var(--background-table-row);
                                color: var(--color-gray);
                                font-size: 0.7rem;
                                font-weight: 500;
                                padding-block: 0.4em;
                                text-transform: none;
                                letter-spacing: 0;
                                border-bottom: 1px solid var(--color-border);
                                &[data-sortable="true"]:hover {
                                    background: var(--background-table-row-hover);
                                }
                            }
                            &.thead-caps th {
                                text-transform: uppercase;
                                letter-spacing: 0.04em;
                            }
                            &.thead-bold th {
                                font-weight: 700;
                            }
                            &.thead-large th {
                                font-size: 0.8rem;
                            }
                            &.thead-padding th {
                                padding-top: 1.25em;
                            }
                        }
                    }
                    tfoot {
                        background:var(--color-primary);
                        height:2.5em;
                        width:100%;
                        position:fixed;
                        bottom:0;
                    }
                    tr {
                        width:100%;
                        max-width:100dvw;
                        display:flex;
                        grid-template-columns: 1fr 1fr;
                        flex-direction: row;
                        flex-wrap:wrap;
                        padding:0.5em;
                        padding-block:1em;
                        box-sizing: border-box;
                        background: var(--background-table-row-light);
                        &:hover {
                            cursor: pointer;
                            background: var(--background-table-row-hover);
                        }
                        td {
                            /* flex-grow:1; */
                            /* width:fit-content; */
                            font-size:1.2em;
                            box-sizing: border-box;
                            display:block;
                            flex-basis: 50%;
                            /* max-width:50%; */
                            width:50%;
                            /* padding-inline: 1rem; */
                            /* padding-block: 0.5rem; */
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            position: relative;
                            .status-pill {
                                border-radius: 10rem;
                                padding-inline:1em;
                                padding-block:0.1em;
                                min-width: 70px;
                                display:flex;
                                align-items: center;
                                justify-content: center;
                                margin-inline: 1em;
                                
                                &.green {
                                    color: white;
                                    background: var(--color-green);
                                    
                                }
                                &.gray {
                                    color: var(--color-black);
                                    background: var(--color-xlight);
                                }
                            }
                            &:not([data-mobile-width="undefined"]) {
                                width: attr(data-mobile-width);
                            }
                            &[data-mobile-width="fit-content"] {
                                width: fit-content;
                            }
                            &:not(:empty) {
                                &:not([data-separator="undefined"]) {
                                    padding-left:1em;
                                    &::before {
                                        font-family: 'Bootstrap-icons';
                                        content:'\F309';
                                        -webkit-text-stroke: 2px;
                                        position: absolute;
                                        top: 50%;
                                        left:0;
                                        transform: translateY(-50%);
                                    }
                                }
                            }
                            &[data-mobile-basis="100%"] {
                                flex-basis: 100%;
                            }
                            &[data-mobile-basis="auto"] {
                                flex-basis: auto;
                            }
                            &[data-mobile-gray="true"] {
                                color:var(--color-gray);
                            }
                            &[data-mobile-bold="true"] {
                                font-weight:bold;
                            }
                            &[data-mobile-grow="true"] {
                                flex-grow: 1;
                            }
                            &[data-mobile-shrink="true"] {
                                flex-shrink: 1;
                            }
                            .inactive {
                                color: var(--color-gray-light);
                                font-size: 1rem;
                            }
                            i.attachment {
                                color: var(--color-primary);
                            }
                            .pending-client-vendor {
                                color: var(--color-gray-light);
                                font-size: 1rem;
                            }
                            .client-vendor {
                                color: var(--color-primary);
                                font-size: 1rem;
                            }
                            .table-link {
                                color:var(--color-primary);
                                &:hover {
                                    color: var(--color-primary-dark);
                                    cursor:pointer;
                                    text-decoration: underline;
                                }
                            }
                            &[data-align="right"] {
                                text-align:right;
                            }
                            :not(.table-button, .cell-stack) {
                                i {
                                    color: var(--color-gray-light);
                                }
                            }
                            > i {
                                color: var(--color-gray-light);
                            }
                            i {
                                font-size: 1rem;
                            }
                            /* .table-button:hover {
                                i {
                                    color:white;
                                }
                            } */
                            .cell-stack {
                                display:inline; 
                                justify-content:center; 
                                flex-direction: column;
                                width:100%;
                                .stack-name {
                                    text-overflow:ellipsis;
                                    overflow:hidden;
                                    display:flex;
                                    align-items: center;
                                    width:100%;
                                }
                                .stack-number {
                                    display:flex;
                                    align-items:center;
                                    justify-content: end;
                                    width:100%;
                                }
                                .stack-buttons {
                                    display:flex;
                                    flex-direction: row;
                                    align-items: center;
                                    button {
                                        padding:0.25em;
                                        border:none;
                                        border-radius:5px;
                                        background:transparent;
                                        display:flex;
                                        align-items: center;
                                        justify-content: center;
                                        i {
                                            font-size:1.25em;
                                        }
                                        i.color-green {
                                            color: var(--color-green);
                                        }
                                        i.color-primary {
                                            color: var(--color-primary);
                                        }
                                        &:hover {
                                            background:var(--color-primary);
                                            i {
                                                color: var(--color-white);
                                            }
                                        }
                                    }
                                }
                            }
                            > .cell-stack ~ .cell-stack {
                                display:none;
                            }
                            .hover-icon {
                                color: var(--color-primary-light);
                                i {
                                    color: currentColor;
                                }
                                &:hover {
                                    color: var(--color-primary-dark);
                                    i {
                                        color: currentColor;
                                    }
                                }
                            }
                            .gray-hover-icon {
                                &:hover {
                                    i {
                                        color:var(--color-primary-dark);
                                    }
                                }
                            }
                        }
                        td.heading-cell-icon {
                            /* padding:0.5em; */
                            text-align: center;
                        }
                        td.select-cell {
                            padding:0.5em;
                            text-align:center;
                            display:none;
                            input[type="checkbox"] {
                                height:1.15em;
                                width:1.15em;
                                &:hover {
                                    cursor:pointer;
                                }
                            }
                        }
                        td[data-mobile="false"] {
                            display:none;
                        }
                        &[data-mobile-accent-bar="green"] {
                            box-shadow: inset 5px 0 0 0 var(--color-green);
                        }
                    }
                    /* tr:nth-child(odd) {
                        background: var(--background-table-row-light);
                        &:hover{
                            cursor: pointer;
                            background: var(--background-table-row-hover);
                        }
                    } */
                    /* Section bands use the same major/minor vocabulary as the nested-table
                       reports, so a grouped list and a report render the same rows. */
                    tr.major {
                        background: var(--color-gray-light);
                        border-bottom: 3px solid var(--color-border);
                        td {
                            background: var(--color-gray-light);
                            color: var(--color-black);
                            font-weight: var(--font-weight-normal);
                            padding-block: var(--space-sm);
                        }
                        &:hover {
                            background: var(--color-primary-xlight);
                            td {
                                background: var(--color-primary-xlight);
                            }
                        }
                    }
                    /* Opt-in per page via the major_style flag. */
                    &.major-bold tr.major td {
                        font-weight: 700;
                    }
                    /* Opt-in per row via the row's own bold key, whatever its class. */
                    tr.row-bold td {
                        font-weight: 700;
                    }
                    /* Subordinate band. Nothing here may change the row's height, so no padding,
                       font-size or border overrides -- colour and weight only. */
                    tr.minor {
                        background: var(--color-primary-light);
                        td {
                            background: var(--color-primary-light);
                            color: var(--color-black);
                            font-weight: 600;
                        }
                        &:hover {
                            background: var(--color-primary-light);
                            td {
                                background: var(--color-primary-light);
                            }
                        }
                    }
                    /* Report total rows get the same blue heading treatment as thead-primary.
                       The bottom line also stays visible while the report scrolls. The page
                       body is the scroll container -- .table-wrapper only becomes one when it
                       is paired with pagination, which the reports have none of -- so bottom: 0
                       pins to the bottom of the visible page. Sticky goes on the cells: sticky
                       on <tr> is unreliable, the same reason thead is pinned via its th. */
                    tr.highlight {
                        background: var(--background-table-heading);
                        td {
                            background: var(--background-table-heading);
                            bottom: 0;
                            color: var(--color-table-heading);
                            font-weight: 700;
                            letter-spacing: 0.04em;
                            overflow: visible;
                            padding-block: var(--space-sm);
                            position: sticky;
                            text-transform: uppercase;
                            /* The lift showing there is content underneath is a gradient strip
                               rather than a box-shadow: shadows are not painted on the cells of
                               a border-collapse: collapse table. The cell's own ellipsis rule
                               sets overflow: hidden, hence the override above. */
                            &::after {
                                background: linear-gradient(to top, var(--color-shadow-subtle), transparent);
                                bottom: 100%;
                                content: '';
                                height: var(--space-sm);
                                left: 0;
                                pointer-events: none;
                                position: absolute;
                                right: 0;
                                transition: opacity 0.3s ease;
                            }
                        }
                        &:hover {
                            background: var(--background-table-heading);
                            td {
                                background: var(--background-table-heading);
                            }
                        }
                    }
                    /* Nothing left to scroll, so drop the hint -- the charts' is-scrolled-end,
                       set here by initScrollFadeBottom. */
                    &.is-scrolled-bottom {
                        tr.highlight td::after {
                            opacity: 0;
                        }
                    }
                    /* Report data rows. */
                    tr.normal {
                        &:hover {
                            background: var(--color-primary-xlight);
                            td {
                                background: var(--color-primary-xlight);
                            }
                        }
                    }
                    /* Report rows are display-only, so they should not read as clickable. */
                    tr.major, tr.minor, tr.normal, tr.highlight {
                        &:hover {
                            cursor: default;
                        }
                    }
                    /* Report rows indent their label cell by nesting depth. data-indent keeps
                       this off every other table; --indent is the depth, set by buildTableRow. */
                    tr[data-indent] td:first-of-type {
                        padding-left: calc(1em + var(--indent, 0) * var(--space-md));
                    }
                    /* The reports' label column, wide enough that three levels of indent do not
                       truncate the names. Keyed on the column id, so it reaches nothing else. */
                    th[name="label"],
                    td[data-identifier="label"] {
                        min-width: 20ch;
                    }
                    tr.inactive {
                        td:not(.heading-cell-icon) {
                            color: #aaaaaa;
                        }
                        /* opacity: 0.5; */
                    }
                    tr.drag-target {
                        /* border: 1px dashed black; */
                        color:white;
                        background:var(--color-primary-light);
                    }
                    tr.drag-before {
                        box-shadow: inset 0 1px 0 0 var(--color-primary);
                    }
                    tr.drag-after {
                        box-shadow: inset 0 -1px 0 0 var(--color-primary);
                    }
                }
                .nested-table {
                    text-align:left;
                    border: none;
                    border-collapse: collapse;
                    border-spacing: 0;
                    width: 100%;
                    overflow: auto;
                    page-break-inside: avoid;
                    tr.first {
                        position: sticky;
                        top: 0;
                        th {
                            max-width:40ch;
                            background: var(--background-table-heading);
                            color: var(--color-table-heading);
                            overflow: hidden;
                            padding-block: 0.65em;
                            padding-inline: 1em;
                            text-align: right;
                            text-overflow: ellipsis;
                            font-size: 0.80em;
                            font-weight: 600;
                            letter-spacing: 0.05em;
                            text-transform: uppercase;
                            white-space: nowrap;
                        }
                        th:first-of-type {
                            min-width: 20ch;
                            text-align: left;
                        }
                    }
                    tr {
                        th, td {
                            font-size: 0.875em;
                            padding-inline: 1em;
                            padding-block: 0.35em;
                            margin-inline: 0.25em;
                            min-width: 10ch;
                            max-width: 30ch;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                    tr.major {
                        border-top: 2px solid var(--color-border);
                        border-bottom: 3px solid var(--color-border);
                        background: var(--color-gray-light);
                        th, td {
                            font-weight: var(--font-weight-normal);
                            padding-block: 0.5em;
                        }
                        &:hover {
                            background: var(--color-primary-xlight);
                        }
                    }
                    tr.minor {
                        border-bottom: 1px solid var(--color-border);
                        background: transparent;
                        th, td {
                            font-weight: 600;
                            font-size: 0.78em;
                            color: var(--color-gray);
                            letter-spacing: 0.04em;
                            text-transform: uppercase;
                            padding-block: 0.45em;
                        }
                        &:hover {
                            background: var(--background-page-secondary);
                        }
                    }
                    tr.normal {
                        border-bottom: 1px solid #f0f0f0;
                        background: var(--background-page);
                        &:hover {
                            background: var(--color-primary-xlight);
                        }
                    }
                    tr.highlight {
                        background: var(--color-primary);
                        color: white;
                        th, td {
                            font-weight: 700;
                            padding-block: 0.65em;
                            padding-inline: 1em;
                        }
                    }
                    tr.hidden {
                        display: none;
                    }
                    td.right-align, th.right-align {
                        text-align: right;
                    }
                    tr:not(.highlight):not(.first):hover {
                        cursor: default;
                    }
                }
                .record-container {
                    width:100%;
                    display:flex;
                    flex-direction: column;
                    padding:1.5em;
                    box-sizing:border-box;
                    gap:1.5em;
                    &:has(.markdown-body) {
                        flex: 1;
                        min-height: 0;
                    }
                    .record-sections {
                        display:flex;
                        flex-direction: column;
                        gap:1.5em;
                        width:100%;
                        &:has(.markdown-body) {
                            flex: 1;
                            min-height: 0;
                        }
                        
                        .section {
                            max-width:100%;
                            width:100%;
                            border: 1px solid var(--color-border);
                            border-radius:5px;
                            overflow: hidden;
                            box-sizing: border-box;
                            background:var(--background-page);
                            display:flex;
                            flex-direction: column;
                            
                            &:has(.markdown-body) {
                                height:100%;
                                max-width:8.5in;
                                .section-header {
                                    border-bottom:1px solid var(--color-border);
                                }
                            }
                            .section-header {
                                padding: 0.75em 1em 0.6em 1.25em;
                                box-sizing: border-box;
                                width:100%;
                                display:flex;
                                justify-content: space-between;
                                align-items: center;
                                min-height: var(--section-header-height);
                                border-bottom: 1px solid var(--color-border);
                                .header {
                                    padding:0;
                                    margin:0;
                                    display:flex;
                                    align-items: center;
                                    gap:0.5em;
                                    font-size: 0.78rem;
                                    font-weight: 600;
                                    text-transform: uppercase;
                                    letter-spacing: 0.04em;
                                    color: var(--color-black);
                                }
                                .subtitle {
                                    font-size: 0.72rem;
                                    font-weight: normal;
                                    color:var(--color-gray);
                                    margin: 0;
                                    padding: 0;
                                }
                                &:has(.section-header-buttons:empty) {
                                    &:has(.header:empty) {
                                        &:not(:has(select)) {
                                            display:none;
                                        }
                                    }
                                }
                                .section-header-buttons {
                                    display:flex;
                                    align-items: center;
                                    gap:1em;
                                }
                                .left-header {
                                    display:flex;
                                    flex-direction: row;
                                    align-items: center;
                                    flex-wrap:wrap;
                                    gap:0.5em;
                                    h2:empty {
                                        display:none;
                                    }
                                    .status-pill {
                                        margin:0;
                                        padding-block: 0.5em;
                                        padding-inline:1em;
                                        border-radius: 5px;
                                        font-size: 0.7rem;
                                        text-transform: uppercase;
                                        letter-spacing: normal;
                                        font-size: 0.78rem;
                                        &.clickable:hover {
                                            cursor:pointer;
                                        }
                                        p {
                                            margin:0;
                                        }
                                        &.gray {
                                            background: var(--color-xlight);
                                            &.clickable:hover {
                                                background: var(--color-light);
                                            }
                                        }
                                        &.green {
                                            background: var(--color-green);
                                            color:white;
                                            &.clickable:hover {
                                                background: var(--color-green-dark);
                                            }
                                        }
                                        &.blue {
                                            background: var(--color-primary);
                                            color:white;
                                        }
                                        &.red {
                                            background: var(--color-danger);
                                            color:white;
                                        }
                                    }
                                    select {
                                        padding:0.25em;
                                        border: 1px solid var(--color-border);
                                        border-radius:5px;
                                        background:var(--background-page-secondary);
                                        font-weight:bold;
                                        cursor:pointer;
                                        font-size:1.5em;
                                        &:hover {
                                            background: var(--background-tile-hover);
                                        }
                                        option {
                                            background:white;
                                        }
                                        
                                    }
                                    i {
                                        font-size:1.5em;
                                        &.gold {
                                            color: var(--color-gold);
                                        }
                                        &.goldenrod {
                                            color: var(--color-goldenrod);
                                        }
                                        &.gray {
                                            color: var(--color-gray);
                                        }
                                        &.clickable:hover {
                                            cursor:pointer;
                                            filter: brightness(90%);
                                        }
                                    }
                                }
                            }
                            .section-body {
                                display:flex;

                                .section-chart-scroll {
                                    width: 100%;
                                }
                                .chart-container {
                                    padding-inline:1.5em;
                                    padding-bottom:1.5em;
                                    width:100%;
                                    box-sizing: border-box;
                                    min-height:250px;
                                }
                                &:has(.main-table) {
                                    height:100%;
                                    flex-direction: column;
                                    padding-inline:0;
                                    flex-wrap:nowrap;
                                    .table-wrapper {
                                        /* margin-inline: -1.5em; */
                                        height:100%;
                                        overflow-y:auto;
                                        overflow-x:auto;
                                        tr {
                                            padding-inline:1.5em;
                                        }
                                    }
                                }
                                &:has(.overview-group) {
                                    display:grid;
                                    grid-template-columns: 1fr;
                                    gap:1em;
                                    padding: 1.5em;
                                }
                                &:has(.review-group) {
                                    display:flex;
                                    flex-direction: column;
                                }
                                .table-context-menu {
                                    border-top: 1px solid var(--color-border);
                                    border-bottom: 1px solid var(--color-border);
                                    padding-inline:1.5em;
                                    padding-block:0.5em;
                                    display:flex;
                                    /* display:none; */
                                    align-items: center;
                                    justify-content: space-between;
                                    .table-multiselect {
                                        display:flex;
                                        align-items: center;
                                        .table-select-buttons {
                                            display:flex;
                                        }
                                    }
                                    .table-buttons {
                                        display:flex;
                                        gap: 0.5em;
                                    }
                                    &:has(.table-multiselect:empty) {
                                        &:has(.table-buttons:empty) {
                                            padding:0;
                                        }
                                    }
                                }

                                .table-select-container {
                                    border-top: 2px solid var(--color-primary);
                                    display:flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    height:2em;
                                    width:100%;
                                    position:sticky;
                                    left:0;
                                    top:0;
                                    padding-block:0.25em;
                                    .table-select-buttons {
                                        margin-inline:1em;
                                        display:flex;
                                        gap:0.5em;
                                        height:100%;
                                    }
                                }
                                .table-filter-container {
                                    border-top: 2px solid var(--color-primary);
                                    display:flex;
                                    align-items: center;
                                    gap:1em;
                                    justify-content: end;
                                    height:2em;
                                    width:100%;
                                    position:sticky;
                                    left:0;
                                    top:0;
                                    padding-block:0.25em;
                                    z-index:2;
                                    .filter-group {
                                        display:flex;
                                        gap: 0.5em;
                                        justify-content: center;
                                        align-items: center;
                                        input, select, search-input {
                                            width:200px;
                                        }
                                        &:first-child {
                                            padding-left:1em;
                                        }
                                        &:last-child {
                                            padding-right:1em;
                                        }
                                    }
                                    input, select, search-input {
                                        font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                                        background-color: var(--background-input);
                                        border: var(--border-input);
                                        border-radius: 0.5em;
                                        box-sizing: border-box;
                                        display: block;
                                        max-width: 100%;
                                        padding: 0.25em;
                                        text-align: left;
                                        text-decoration: none;
                                        position: relative;
                                        &:hover {
                                            outline: none;
                                        }
                                        &:focus {
                                            outline: none;
                                        }
                        
                                        &.error {
                                            border: 1px solid var(--color-danger);
                                        }
                                        &.valid {
                                            border: 1px solid var(--color-green);
                                        }
                                    }
                                    search-input {
                                        width:400px;
                                    }
                                    .toggle-container {
                                        display: flex;
                                        flex-direction: row;
                                        .toggle-row {
                                            align-items: center;
                                            display: flex;
                                            flex-direction: row;
                                            margin-inline-end: 1.5em;
                                            &:hover {
                                                cursor: pointer;
                                            }
                                            i {
                                                font-size: 1.25rem;
                                                margin-inline-end: 0.25em;
                                            }
                                            .bi-toggle-on {
                                                color: var(--color-primary);
                                            }
                                        }
                                    }
                                    /* input::-webkit-calendar-picker-indicator {
                                        position: absolute;
                                        left: 0;
                                        width: 100%;
                                        background:red;
                                        height: 100%;
                                        margin: 0;
                                        padding: 0;
                                        opacity: 0;
                                        cursor: pointer;
                                    } */
                                }
                                .pagination-container {
                                    background: var(--background-pagination);
                                    border-top: 1px solid var(--color-border);
                                    padding-inline:1em;
                                    box-sizing: border-box;
                                    display:flex;
                                    align-items: center;
                                    justify-content:space-between;
                                    position:sticky;
                                    top:0;
                                    height:3em;
                                    width:100%;
                                    color: var(--color-gray);
                                    
                                    .pagination-pages {
                                        display:flex;
                                        flex-direction: row;
                                        align-items: center;
                                        .page-input {
                                            text-align: center;
                                            min-width:3ch;
                                            padding:0.25em;
                                            background: var(--background-page);
                                            color:var(--color-primary);
                                            font-weight:bold;
                                            margin-inline:0.25em;
                                            border-radius: var(--radius-sm);
                                            border: var(--border-input);
                                            outline: 0px solid transparent;
                                        }
                                        button {
                                            background:transparent;
                                            border:none;
                                            height:fit-content;
                                            max-height:fit-content;
                                            width:3ch;
                                            height:3ch;
                                        }
                                        button:disabled {
                                            &:hover {
                                                cursor:default;
                                            }
                                        }
                                        button:hover {
                                            color:var(--color-primary-dark);
                                        }
                                    }
                                    &:empty {
                                        display:none;
                                    }
                                }
                                .table-wrapper:has(+.pagination-container) {
                                    max-height:calc(100% - 3em - 2px);
                                    /* min-height:calc(100% - 3em - 2px); */
                                    overflow-y:auto;
                                }
                                .overview-group {
                                    display: flex;
                                    width:100%;
                                    max-width:100%;
                                    flex-direction: column;
                                    
                                    label {
                                        font-weight:normal !important;
                                        align-items: center;
                                        color: var(--color-form-label);
                                        display: flex;
                                        flex-direction: row;
                                        font-weight: bold;
                                        justify-content: space-between;
                                        margin-bottom: 0.5em;
                                        white-space: nowrap;
                                    }
                                    .overview-value {
                                        &:empty::before {
                                            font-family: 'Bootstrap-icons';
                                            content: '\F63B';
                                        }
                                    }
                                    a.link {
                                        color: var(--color-primary) !important;
                                        text-decoration: none !important;
                                        &:hover {
                                            color:var(--color-primary-dark) !important;
                                            text-decoration: underline !important;
                                        }
                                    }
                                    &:not(.markdown) {
                                        .overview-value {
                                            font-weight:bold;
                                        }
                                    }
                                }
                                .review-group {
                                    width:100%;
                                    grid-column: span 3;
                                    padding-inline:1.5em;
                                    margin-bottom:1em;
                                    box-sizing: border-box;
                                    .bubble {
                                        display:flex;
                                        flex-direction: row;
                                        width:100%;
                                        .bubble-icon {
                                            height:35px;
                                            aspect-ratio: 1;
                                            background:var(--color-primary);
                                            border-radius:100%;
                                            position: relative;
                                            margin-right:0.5em;
                                            &::after {
                                                position: absolute;
                                                color:white;
                                                display:flex;
                                                align-items: center;
                                                top:50%;
                                                left:50%;
                                                transform:translate(-50%, -50%);
                                                justify-content: center;
                                                content: attr(data-content);
                                            }
                                        }
                                        .bubble-content {
                                            display:flex;
                                            flex-direction: column;
                                            flex:auto;
                                            .bubble-title {
                                                font-weight:bold;
                                                margin:0;
                                            }
                                            .bubble-subtitle {
                                                color:var(--color-gray);
                                                margin:0;
                                            }
                                            .bubble-attachments {
                                                width:100%;
                                                display:flex;
                                                gap:1em;
                                                flex-wrap:wrap;
                                                .attachment {
                                                    display:flex;
                                                    max-width:40ch;
                                                    min-width:40ch;
                                                    border-radius:5px;
                                                    border: 1px solid var(--color-border);
                                                    .attachment-icon {
                                                        display:flex;
                                                        align-items: center;
                                                        justify-content: center;
                                                        margin:0.5em;
                                                        i {
                                                            font-size:1.5em;
                                                        }
                                                    }
                                                    .attachment-body {
                                                        display:flex;
                                                        margin-right:0.5em;
                                                        padding-block:0.25em;
                                                        width:100%;
                                                        flex-direction: column;
                                                        justify-content: center;
                                                        span {
                                                            max-width:100%;
                                                            word-break: break-all;
                                                        }
                                                    }
                                                    .attachment-button {
                                                        border:none;
                                                        border-left:1px solid var(--color-border);
                                                        text-align: center;
                                                        vertical-align: center;
                                                    }
                                                    .attachment-button:hover {
                                                        background:var(--color-primary);
                                                        color:white;
                                                    }
                                                }
                                                .attachment:hover {
                                                    cursor:pointer;
                                                    box-shadow: var(--box-shadow-card-hover);
                                                }
                                            }
                                            .bubble-buttons {
                                                .bubble-button {
                                                    color:var(--color-primary);
                                                    &:hover {
                                                        color: var(--color-primary-dark);
                                                        text-decoration: underline;
                                                        cursor:pointer;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    .bubble:has(+.bubble) {
                                        margin-bottom:0.5em;
                                    }
                                }
                                .review-group:has(+.review-group) {
                                    border-bottom: 2px solid var(--color-xlight);
                                    margin-bottom:1em;
                                    padding-bottom:1em;
                                }
                                .active-review-info {
                                    grid-column: span 3;
                                    display:grid;
                                    grid-template-columns: repeat(3, minmax(0, 1fr));
                                    gap:1em;
                                }
                                .active-review {
                                    grid-column: span 3;
                                    width:100%;
                                    box-sizing: border-box;
                                    /* display:grid; */
                                    /* grid-template-columns: 33% 1fr; */
                                    /* overflow:hidden; */
                                    flex-direction: column;
                                    /* max-height:300px; */
                                    .active-review-content {
                                        display:flex;
                                        flex-direction: column;
                                        /* width:100%; */
                                        /* .active-review-card {
                                            max-height:100%;
                                        } */
                                        .active-review-buttons {
                                            display:flex;
                                            flex-direction: row;
                                            justify-content: space-between;
                                            gap:0.25em;
                                            button {
                                                width:100%;
                                                overflow:hidden;
                                            }
                                        }
                                    }
                                    .active-review-files {
                                        padding:0.5em;
                                        border-radius:5px;
                                        overflow:hidden;
                                        max-height:100%;
                                        overflow-y:auto;
                                        margin-top:0.5em;
                                        max-height:250px;
                                        gap:0.5em;
                                        display:grid;
                                        grid-template-columns: 1fr;
                                        box-sizing:border-box;
                                        .card {
                                            border-radius: 5px;
                                            margin-block:0;
                                            background: var(--background-page);
                                        }
                                        .card:hover {
                                            box-shadow: var(--box-shadow-card-hover);
                                            cursor:pointer;
                                        }
                                        &:not(:empty) {
                                            border: 1px solid var(--color-border);
                                            background: var(--background-page-secondary);
                                        }
                                    }
                                    .card {
                                        border: var(--border-modal-container);
                                        border-radius: 0.25em;
                                        color: var(--color-card-text);
                                        display: flex;
                                        flex-direction: column;
                                        margin-block: 0.5em;
                                        max-width: 100%;
                                        position:relative;
                                        overflow:hidden;
                                        .card-heading-container {
                                            display: flex;
                                            flex-direction: row;
                                            overflow: hidden;
                                            padding-block: 0.5em;
                                            padding-inline: 1em;
                                            .card-icon {
                                                color: var(--color-card-icon);
                                                display: flex;
                                                flex-direction: row;
                                                margin-inline-end: 1em;
                                                i {
                                                    font-size: 1.5rem;
                                                }
                                                .initials-icon {
                                                    align-items: center;
                                                    background-color: var(--color-primary);
                                                    border-radius: 100%;
                                                    color: var(--color-white);
                                                    display: flex;
                                                    flex-direction: row;
                                                    height: 2.25em;
                                                    justify-content: center;
                                                    margin-inline-end: 0.5em;
                                                    width: 2.25em;
                                                }
                                            }
                                            .card-title-field-container {
                                                display: flex;
                                                flex-direction: column;
                                                overflow: hidden;
                                                box-sizing: border-box;
                                                .card-title {
                                                    color: var(--color-card-title);
                                                    display: inline-block;
                                                    font-weight: 600;
                                                    overflow: hidden;
                                                    text-overflow: ellipsis;
                                                    white-space: nowrap;
                                                    width: 100%;
                                                    i {
                                                        margin-inline-end: 0.5em;
                                                    }
                                                }
                                                .card-title-inactive {
                                                    color: var(--color-card-title-inactive);
                                                    display: inline-block;
                                                    font-weight: 600;
                                                    overflow: hidden;
                                                    text-overflow: ellipsis;
                                                    white-space: nowrap;
                                                    width: 100%;
                                                    &::before {
                                                        font-family: 'Bootstrap-icons';
                                                        content: '\F47A';
                                                        margin-right: 0.5em;
                                                    }
                                                }
                                                .card-field-container {
                                                    display: flex;
                                                    flex-direction: column;
                                                    overflow:hidden;
                                                    .card-field-row {
                                                        display: flex;
                                                        flex-direction: row;
                                                        font-size: var(--font-size-small);
                                                        margin-block-start: 0.5em;
                                                        text-wrap:nowrap;
                                                        overflow:hidden;
                                                        text-overflow:ellipsis;
                                                        i {
                                                            margin-inline-end: 0.5em;
                                                        }
                                                        span {
                                                            overflow:hidden;
                                                            text-overflow:ellipsis;
                                                            text-wrap:nowrap;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        .card-body {
                                            border-top: var(--border-modal-container);
                                            padding-block: 0.5em;
                                            padding-inline: 1em;
                                        }
                                        .card-field-container {
                                            .card-field-row {
                                                font-size: var(--font-size-small);
                                                i.record-open {
                                                    color: var(--color-primary);
                                                }
                                                i.record-approved {
                                                    color: var(--color-green);
                                                }
                                                i.record-danger {
                                                    color: var(--color-danger);
                                                }
                                                i.record-gray {
                                                    color: var(--color-gray);
                                                }
                                            }
                                        }
                                        .card-button-container {
                                            position: absolute;
                                            right:0;
                                            top:0;
                                            &:has(> button) {
                                                align-items: center;
                                                background-color: var(--background-card-button-container);
                                                border-top: var(--border-modal-container);
                                                display: flex;
                                                flex-direction: row;
                                                justify-content: end;
                                                padding-block: 0.25em;
                                                padding-inline: 1em;
                                                button {
                                                padding-block: 0;
                                                &:hover {
                                                    background-color: var(--background-card-button-hover);
                                                }
                                            }
                                            }
                                        }
                                    }
                                }
                                .active-review:has(+.review-group) {
                                    margin-bottom:1em;
                                }

                                .main-transaction-container {
                                    display:flex;
                                    width:100%;
                                    gap:1em;
                                    .form-group {
                                        width:100%;
                                    }
                                    &:empty {
                                        display:none;
                                    }
                                }
                                .transactions-table {
                                    border: none;
                                    border-collapse: collapse;
                                    border-spacing: 0;
                                    width: 100%;
                                    overflow: auto;
                                    page-break-inside: avoid;
                                    thead {
                                        position: sticky;
                                        top: 0;
                                        border-inline: 1px solid var(--color-primary);
                                        th {
                                            border-radius: 0;
                                            background: var(--background-table-heading);
                                            color: var(--color-table-heading);
                                            overflow: hidden;
                                            padding-inline: 0.5em;
                                            padding-block: 1em;
                                            text-align: inherit;
                                            text-overflow: ellipsis;
                                            text-transform: uppercase;
                                            white-space: nowrap;
                                        }
                                    }
                                    tbody {
                                        tr {
                                            /* background: var(--background-table-row); */
                                            background: white;
                                            td {
                                                height: 2.5em;
                                                max-width: 30ch;
                                                /* overflow-x: hidden; */
                                                border-right:1px solid var(--color-border);
                                                border-bottom:1px solid var(--color-border);
                                                &:first-child {
                                                    border-left:1px solid var(--color-border);
                                                }
                                                padding-inline:0.25em;
                                                text-overflow: ellipsis;
                                                white-space: nowrap;
                                                span {
                                                    padding-inline: 0.5em;
                                                }
                                                &:has(.form-group):hover {
                                                    &:has(input) {
                                                        background:var(--color-xlight);
                                                        > .form-group {
                                                            input {
                                                                background:var(--color-xlight);
                                                            }
                                                        }
                                                    }
                                                }
                                                .form-group {
                                                    padding:0;
                                                    width:100%;
                                                    input, search-input {
                                                        border:none;
                                                        background:white;
                                                        border-radius:0;
                                                    }
                                                }
                                                .inline-form {
                                                    align-items: stretch;
                                                    cursor: pointer;
                                                    display: flex;
                                                    flex-direction: row;
                                                    input {
                                                        font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                                                        background-color: transparent;
                                                        background-color: var(--background-input);
                                                        border: 1px solid transparent;
                                                        border: var(--border-input);
                                                        border-radius: 0.5em;
                                                        box-sizing: border-box;
                                                        display: block;
                                                        font-size: var(--font-size-body);
                                                        min-width: none;
                                                        width: 100%;
                                                        padding-inline: 0.5em;
                                                        text-align: left;
                                                        text-decoration: none;
                                                        &:hover {
                                                            outline: none;
                                                        }
                                                        &:focus {
                                                            outline: none;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    tfoot {
                                        tr {
                                            td {
                                                padding-inline:0.6em;
                                                padding-block:0.5em;
                                                font-weight:600;
                                                .table-button {
                                                    width:100%;
                                                    text-align: center;
                                                }
                                            }
                                        }
                                    }
                                }
                                .markdown-page-container {
                                    margin-inline:1em;
                                    margin-block:1em;
                                    padding:1.5em;
                                    width:100%;
                                    overflow-y:auto;
                                    background:white;
                                    box-shadow: var(--box-shadow-modal);
                                    box-sizing:border-box;
                                }
                                &:has(.markdown-body) {
                                    flex: 1;
                                    min-height: 0;
                                    overflow-y: auto;
                                    flex-direction: column;
                                }
                                .ql-toolbar {
                                    border:none;
                                    width:100%;
                                    position: sticky;
                                    top:0;
                                    background: white;
                                    display:flex;
                                    align-items: center;
                                    z-index:2;
                                    border-inline:0;
                                    flex-wrap:wrap;
                                    row-gap: 0.5em;
                                    border-bottom: 1px solid var(--color-border);
                                    .ql-formats {
                                        margin-right:7.5px;
                                        padding-right:7.5px;
                                        z-index:2;
                                        display:flex;
                                        flex-direction: row;
                                        &:has(+.ql-formats) {
                                            border-right: 1px solid var(--color-border);
                                        }
                                    }
                                    &:has(+.ql-disabled) {
                                        opacity: 0.5;
                                        pointer-events:none;
                                        display:none;
                                    }
                                }
                                .ql-container {
                                    /* background:var(--background-page-secondary); */
                                    font-family:inherit;
                                    width: 100%;
                                    border:0;
                                    overflow:hidden;
                                    .ql-editor h2 {
                                        border-bottom: none;
                                    }
                                    .ql-tooltip {
                                        z-index:2;
                                    }
                                    li[data-list="checked"] {
                                        .ql-ui::before {
                                            font-family: 'Bootstrap-icons';
                                            content: '\F26C';
                                            color:var(--color-green);
                                        }
                                    }
                                    li[data-list="unchecked"] {
                                        .ql-ui::before {
                                            font-family: 'Bootstrap-icons';
                                            content: '\F584';
                                        }
                                    }
                                }
                            }
                            &:has(.ql-disabled) {
                                background:var(--background-page-secondary);
                                border:0px solid transparent;
                                .ql-container {
                                    background:var(--background-page-secondary);
                                }
                                .section-header {
                                    background: var(--background-page);
                                    border-inline:1px solid var(--color-border);
                                    border-top:1px solid var(--color-border);
                                    border-radius:5px;
                                }
                            }
                            &:has(.markdown-page-container) {
                                height:100%;
                                .section-header {
                                    box-shadow: 0 4px 3px -3px var(--color-shadow);
                                }
                            }
                            &:has(.ql-container) {
                                height: 100%;
                            }
                        }
                    }
                    .record-side-sections {
                        z-index: 2;
                        display:flex;
                        height:fit-content;
                        flex-direction: column;
                        .section {
                            background: var(--background-page);
                            border: 1px solid var(--color-border);
                            border-radius:5px;
                            overflow: hidden;
                            width:100%;
                            display:flex;
                            flex-direction: column;
                            box-sizing: border-box;
                            .section-header {
                                width:100%;
                                display:flex;
                                justify-content: space-between;
                                align-items: center;
                                padding: 0.75em 1em 0.6em 1.25em;
                                box-sizing: border-box;
                                min-height: var(--section-header-height);
                                border-bottom: 1px solid var(--color-border);
                                .left-header {
                                    display: flex;
                                    flex-direction: column;
                                    gap: 0.1em;
                                }
                                .header {
                                    padding:0;
                                    margin:0;
                                    display:flex;
                                    align-items: center;
                                    gap:0.5em;
                                    font-size: 0.78rem;
                                    font-weight: 600;
                                    text-transform: uppercase;
                                    letter-spacing: 0.04em;
                                    color: var(--color-black);
                                    &::before {
                                        content: none;
                                    }
                                }
                                .subtitle {
                                    font-size: 0.72rem;
                                    font-weight: normal;
                                    color: var(--color-gray);
                                    margin: 0;
                                    padding: 0;
                                }
                                .section-header-buttons {
                                    display:flex;
                                    align-items: center;
                                    gap:1em;
                                }
                            }
                            .section-body {
                                padding: 1em 1.25em;
                                display:flex;
                                flex-direction: column;
                                column-gap: 1em;
                                &:has(.landing-group--file-tree) {
                                    padding: 0;
                                }
                                .overview-group {
                                    display: flex;
                                    min-width:32%;
                                    flex-direction: column;
                                    label {
                                        align-items: center;
                                        color: var(--color-form-label);
                                        display: flex;
                                        flex-direction: row;
                                        font-weight: bold;
                                        justify-content: space-between;
                                        margin-bottom: 0.5em;
                                        white-space: nowrap;
                                    }
                                    .overview-value {
                                        font-weight:bold;
                                    }
                                }
                                .scope-of-work-container {
                                    padding:1.5em;
                                    border:1px solid var(--color-border);
                                    width:100%;
                                    box-sizing: border-box;
                                    background:var(--background-page-secondary);
                                    gap:1.5em;
                                    border-radius:5px;
                                    .comment-header {
                                        display:flex;
                                        width:100%;
                                        align-items: center;
                                        justify-content: center;
                                        color: var(--color-gray);
                                    }
                                    &:has(+.scope-of-work-container) {
                                        margin-bottom:1.5em;
                                    }
                                    .scope-of-work {
                                        position: relative;
                                        .scope-of-work-header {
                                            .scope-of-work-title {
                                                margin:0;
                                                font-size:1.25em;
                                                font-weight:bold;
                                                color: var(--color-gray);
                                            }
                                            .scope-of-work-subtitle {
                                                margin:0;
                                                color:var(--color-gray-light);
                                            }
                                        }
                                        .scope-of-work-body {
                                            margin-block:1.5em;
                                        }
                                        .card-button-container {
                                            position: absolute;
                                            top:0;
                                            right:0;
                                        }
                                    }
                                    .scope-of-work-comments-container {
                                        .scope-of-work-comment-container {
                                            border: 1px solid var(--color-border);
                                            border-radius: 5px;
                                            padding:1.5em;
                                            background: var(--background-page);
                                            position: relative;
                                            box-sizing: border-box;
                                            .scope-of-work-comment-header {
                                                display:flex;
                                                flex-direction: row;
                                                gap:0.5em;
                                                .comment-initials {
                                                    padding:0.5em;
                                                    background: var(--background-page-secondary);
                                                    color:var(--color-gray);
                                                    display:flex;
                                                    align-items: center;
                                                    justify-content: center;
                                                    border-radius: 5px;
                                                }
                                                .comment-header-text {
                                                    .comment-title {
                                                        margin:0;
                                                    }
                                                    .comment-subtitle {
                                                        margin:0;
                                                        color:var(--color-gray);
                                                    }

                                                }
                                            }
                                            .comment-body {
                                                margin-top:1.5em;
                                            }
                                            .card-button-container {
                                                position: absolute;
                                                top:0;
                                                right:0;
                                            }
                                            &:has(+.scope-of-work-comment-container) {
                                                margin-bottom:1.5em;
                                            }
                                        }
                                        
                                    }
                                }
                                .comment-container {
                                    display:flex;
                                    flex-direction: column;
                                    width:100%;
                                    position: relative;

                                    .comment-bubbles {
                                        display:flex;
                                        flex-direction: column;
                                        height:100%;
                                        max-height:100%;
                                        overflow-y:auto;
                                        width:100%;
                                        max-width:100%;
                                        .bubble {
                                            display:flex;
                                            flex-direction: row;
                                            width:100%;
                                            max-width:100%;
                                            .bubble-avatar {
                                                height: 2rem;
                                                width: 2rem;
                                                aspect-ratio: 1;
                                                border-radius: var(--radius-pill);
                                                display: flex;
                                                align-items: center;
                                                justify-content: center;
                                                color: white;
                                                font-size: var(--font-size-small);
                                                font-weight: var(--font-weight-semi-bold);
                                                flex-shrink: 0;
                                                margin-right: var(--space-sm);
                                                line-height: 1;
                                            }
                                            .bubble-content {
                                                display:flex;
                                                flex-direction: column;
                                                flex:auto;
                                                max-width: calc(100% - 2rem - var(--space-sm));
                                                .bubble-header {
                                                    display: flex;
                                                    align-items: center;
                                                    margin-bottom: var(--space-xs);
                                                    .bubble-author {
                                                        font-weight: var(--font-weight-semi-bold);
                                                        font-size: var(--font-size-small);
                                                        color: var(--color-black);
                                                    }
                                                    .bubble-sep { color: var(--color-gray); }
                                                    .bubble-date {
                                                        font-size: var(--font-size-small);
                                                        color: var(--color-gray);
                                                    }
                                                }
                                                .bubble-title {
                                                    font-weight:bold;
                                                    margin:0;
                                                }
                                                .bubble-subtitle {
                                                    color:var(--color-gray);
                                                    margin:0;
                                                }
                                                .bubble-attachments {
                                                    width:100%;
                                                    display:flex;
                                                    gap:1em;
                                                    flex-wrap:wrap;
                                                    .attachment {
                                                        display:flex;
                                                        max-width:40ch;
                                                        min-width:40ch;
                                                        border-radius:5px;
                                                        border: 1px solid var(--color-border);
                                                        .attachment-icon {
                                                            display:flex;
                                                            align-items: center;
                                                            justify-content: center;
                                                            margin:0.5em;
                                                            i {
                                                                font-size:1.5em;
                                                            }
                                                        }
                                                        .attachment-body {
                                                            display:flex;
                                                            margin-right:0.5em;
                                                            padding-block:0.25em;
                                                            width:100%;
                                                            flex-direction: column;
                                                            justify-content: center;
                                                            span {
                                                                max-width:100%;
                                                                word-break: break-all;
                                                            }
                                                        }
                                                        .attachment-button {
                                                            border:none;
                                                            border-left:1px solid var(--color-border);
                                                            text-align: center;
                                                            vertical-align: center;
                                                        }
                                                        .attachment-button:hover {
                                                            background:var(--color-primary);
                                                            color:white;
                                                        }
                                                    }
                                                    .attachment:hover {
                                                        cursor:pointer;
                                                        box-shadow: var(--box-shadow-card-hover);
                                                    }
                                                }
                                                textarea {
                                                    width:100%;
                                                    height:fit-content;
                                                    max-height:10em;
                                                    resize:none;
                                                    font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                                                    background-color: var(--background-input);
                                                    font-size:var(--font-size-body);
                                                    border: var(--border-input);
                                                    border-radius: 0.5em;
                                                    box-sizing: border-box;
                                                    display: block;
                                                    max-width: 100%;
                                                    padding: 0.5em;
                                                    text-align: left;
                                                    text-decoration: none;
                                                    position: relative;
                                                    &:hover {
                                                        outline: none;
                                                    }
                                                    &:focus {
                                                        outline: none;
                                                    }
                                    
                                                    &.error {
                                                        border: 1px solid var(--color-danger);
                                                    }
                                                    &.valid {
                                                        border: 1px solid var(--color-green);
                                                    }
                                                }
                                                .bubble-body {
                                                    font-size: var(--font-size-small);
                                                    border: 1px solid var(--color-border);
                                                    border-radius: var(--radius-base);
                                                    padding: var(--space-xs) var(--space-sm);
                                                    margin-top: var(--space-xs);
                                                }
                                                .bubble-buttons {
                                                    display:flex;
                                                    gap:1em;
                                                    .bubble-button {
                                                        font-weight:bold;
                                                        color:var(--color-primary);
                                                        &:hover {
                                                            color: var(--color-primary-dark);
                                                            text-decoration: underline;
                                                            cursor:pointer;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        .bubble:has(+.bubble) {
                                            margin-bottom:0.5em;
                                        }
                                        .bubble:last-child {
                                            margin-bottom:2em;
                                        }
                                    }
                                    .comment-input {
                                        /* padding-block:0.5em; */
                                        min-height:2.5em;
                                        width:100%;
                                        display:flex;
                                        align-items: center;
                                        gap:0.5em;
                                        margin-top:1em;
                                        textarea {
                                            width:100%;
                                            max-height:10em;
                                            resize:none;
                                            font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                                            background-color: var(--background-input);
                                            font-size:var(--font-size-body);
                                            border: var(--border-input);
                                            border-radius: 0.5em;
                                            box-sizing: border-box;
                                            display: block;
                                            max-width: 100%;
                                            padding: 0.5em;
                                            text-align: left;
                                            text-decoration: none;
                                            position: relative;
                                            &:hover {
                                                outline: none;
                                            }
                                            &:focus {
                                                outline: none;
                                            }
                            
                                            &.error {
                                                border: 1px solid var(--color-danger);
                                            }
                                            &.valid {
                                                border: 1px solid var(--color-green);
                                            }
                                        }
                                    }
                                }
                                .list-container {
                                    display:flex;
                                    flex-direction: column;
                                    overflow-y:auto;
                                    .file {
                                        display:flex;
                                        flex-direction: row;
                                        justify-content: space-between;
                                        align-items:center;
                                        min-height:2.5em;
                                        padding-right:0.5em;
                                        .file-text-container {
                                            display:flex;
                                            padding-left:0.5em;
                                            gap:0.5em;
                                        }
                                    }
                                    .folder {
                                        display:flex;
                                        flex-direction: column;
                                        .folder-label-container {
                                            display:flex;
                                            justify-content: space-between;
                                            padding-right:0.5em;
                                        }
                                        .folder-label {
                                            display:flex;
                                            align-items: center;
                                            min-height:2.5em;
                                            padding-left:0.5em;
                                            gap:0.5em;
                                            position: relative;
                                            box-sizing: border-box;
                                        }
                                    }
                                    .folder .file {
                                        padding-left: 1.5em;
                                        display:none;
                                    }
                                    .folder.open {
                                        .file {
                                            display:flex;
                                        }
                                    }
                                    .folder .folder-label::before {
                                        font-family:'Bootstrap-icons';
                                        content: '\F3D7';
                                        color: var(--color-folder);
                                    }
                                    .folder:has(>.file) .folder-label::before {
                                        content: '\F3D1';
                                    }
                                    .folder .folder-label-container:hover, .file:hover {
                                        cursor:pointer;
                                        background:var(--color-xlight);
                                    }
                                }
                                .heading-navigation-container {
                                    display:flex;
                                    flex-direction: column;
                                    overflow-y:auto;
                                    gap:0.25em;
                                    .heading-nav-link {
                                        text-wrap:nowrap;
                                        overflow:hidden;
                                        text-overflow:ellipsis;
                                        height:fit-content;
                                        min-height:fit-content;
                                        padding-block:0.25em;
                                        font-size: var(--font-size-sm);
                                        font-weight: var(--font-weight-normal);
                                        &.h1 {
                                            padding-left:1em;
                                        }
                                        &.h2 {
                                            padding-left:2em;
                                        }
                                        &.h3 {
                                            padding-left:3em;
                                        }
                                        &:hover {
                                            background: var(--color-xlight);
                                            cursor:pointer;
                                        }
                                    }
                                }
                                .empty-message {
                                    text-align: center;
                                    color: var(--color-muted);
                                }
                                .access-list {
                                    margin-top:1.5em;
                                    box-sizing: border-box;
                                    display:grid;
                                    grid-template-columns: 1fr auto auto auto;
                                    line-height:25px;
                                    border-bottom: 1px solid var(--color-border);
                                    border-inline: 1px solid var(--color-border);
                                    .header {
                                        background: var(--color-primary);
                                        color:white;
                                        padding-inline:1em;
                                        padding-block:0.5em;
                                        i {
                                            font-size:1.25em;
                                        }
                                    }
                                    .odd, .even {
                                        padding-inline:1em;
                                        text-wrap:nowrap;
                                        text-overflow: ellipsis;
                                        overflow:hidden;
                                    }
                                    .odd {
                                        background: var(--background-page-secondary);
                                    }
                                    .center {
                                        text-align:center;
                                    }
                                }
                            }
                            &.collapsed {
                                .section-header {
                                    margin-bottom:0;
                                    span {
                                        width:100%;
                                    }
                                    .header::before {
                                        content: '\F285';
                                    }
                                    .section-header-buttons {
                                        display:none;
                                    }
                                }
                                .section-body {
                                    display:none;
                                }
                            }
                        }
                        .section:has(+.section) {
                            margin-bottom:1em;
                        }
                        &:empty {
                            display:none;
                        }
                    }
                }
                &:has(> .pagination-container) {
                    flex-direction: column-reverse;
                    > .pagination-container {
                        flex: 0 0 auto;
                    }
                }
            }
        }
    }
}



/* Tablet */
@media only screen
and (orientation: landscape)
and (max-width: 65em) {
    body {
        .page-container {
            .page-container-heading-sticky {
                .heading-main-row {
                    align-items: center;
                    flex-direction: row-reverse;
                    justify-content: space-between;
                    padding-block: 0.5em;
                    .heading-text-buttons {
                        display:flex;
                        flex-direction: row;
                        align-items: center;
                        .heading-text-container {
                            margin:0;
                        }
                        .heading-button-container {
                            flex-direction: row;
                            width: fit-content;
                            gap:0.25em;
                            button, button-dropdown {
                                margin-inline-end: 0.5em;
                                width: auto;
                            }
                            select {
                                margin-block-end: 0.25em;
                                margin-block-start: 0.25em;
                                margin-inline-end: 0.5em;
                                width: 25ch;
                            }
                        }
                    }
                    .heading-search-links {
                        align-items: center;
                        flex-direction: row;
                    }
                    .search-container {
                        margin-inline-end: 1em;
                    }
                }
                .table-options {
                    .result-container:not(:empty) {
                        .multiselect-options {
                            display:flex;
                        }
                        .buttons-container {
                            button[data-mobile="false"] {
                                display:flex;
                            }
                        }
                    }
                }
            }
            .page-container-body {
                .record-container { 
                    &:has(.markdown-body) {
                        height:unset;
                    }
                    .record-sections {
                        .section {
                            .section-body {
                                &:has(.overview-group) {
                                    grid-template-columns: 1fr 1fr;
                                }
                                .active-review {
                                    .active-review-files {
                                        grid-template-columns: repeat(2, 1fr);
                                    }
                                }
                            }
                        }
                    }
                }
                .main-table {
                    display: table;
                    tbody {
                        display:table-row-group;
                    }
                    thead {
                        display:table-header-group;
                        &.thead-subtle {
                            display: table-header-group;
                            border-inline: none;
                            background: transparent;
                            th {
                                background: var(--background-table-row);
                                color: var(--color-gray);
                                font-size: 0.7rem;
                                font-weight: 500;
                                padding-block: 0.4em;
                                text-transform: none;
                                letter-spacing: 0;
                                border-bottom: 1px solid var(--color-border);
                                &[data-sortable="true"]:hover {
                                    background: var(--background-table-row-hover);
                                }
                            }
                            &.thead-caps th {
                                text-transform: uppercase;
                                letter-spacing: 0.04em;
                            }
                            &.thead-bold th {
                                font-weight: 700;
                            }
                            &.thead-large th {
                                font-size: 0.8rem;
                            }
                            &.thead-padding th {
                                padding-top: 1.25em;
                            }
                            /* Reports only: recolor the heading row. Sizing, padding and
                               typography stay inherited from thead-subtle. */
                            &.thead-primary th {
                                background: var(--background-table-heading);
                                color: var(--color-table-heading);
                                &[data-sortable="true"]:hover {
                                    background: var(--color-primary-dark);
                                }
                            }
                        }
                    }
                    tr {
                        display:table-row;
                        th {
                            &[data-mobile="false"] {
                                display:table-cell;
                            }
                            &[data-desktop="false"] {
                                display:none;
                            }
                        }
                        td {
                            max-width:35ch;
                            padding-inline:1em;
                            padding-block:0.5rem;
                            display:table-cell;
                            font-size:1em;
                            width:unset;
                            &[data-mobile="false"] {
                                display:table-cell;
                            }
                            &.select-cell {
                                display:table-cell;
                            }
                            &[data-mobile-bold="true"] {
                                font-weight:normal;
                            }
                            &[data-mobile-gray="true"] {
                                color: black;
                            }
                            &:not(:empty) {
                                &:not([data-separator="undefined"]) {
                                    padding-left:0.5em;
                                    &::before {
                                        content: '';
                                    }
                                }
                            }
                            &:not([data-mobile-width="undefined"]) {
                                width:auto;
                            }
                            &.heading-cell-icon {
                                padding:0.5em;
                            }
                            &[data-desktop="false"] {
                                display:none;
                            }
                            .cell-stack {
                                line-height:2em;
                                min-height:2em;
                                &:not(:first-child) {
                                    display:flex;
                                }
                            }
                        }
                        &[data-mobile-accent-bar="green"] {
                            box-shadow: none;
                        }
                    }
                }
                .tile-container {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                }
            }
        }
    }
}
/* Full Screen */
@media only screen
and (min-width: 65em) {
    body {
        flex-direction: row;
        .page-container {
            flex: 1;
            min-width: 0;
            .page-container-heading-sticky {
                width: auto;
                .heading-main-row {
                    display:flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    padding-block: 0.5em;
                    width: auto;
                    .heading-text-buttons {
                        display:flex;
                        flex-direction: row;
                        align-items: center;
                        .heading-text-container {
                            margin:0;
                        }
                        .heading-button-container {
                            flex-direction: row;
                            width: fit-content;
                            button, button-dropdown {
                                margin-inline-end: 0.5em;
                                width: auto;
                            }
                            select {
                                font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                                background-color: var(--background-input);
                                border: var(--border-input);
                                border-radius: 0.5em;
                                box-sizing: border-box;
                                display: inline-block;
                                max-width: 100%;
                                width:100%;
                                padding: 0.35em;
                                text-align: left;
                                text-decoration: none;
                                position: relative;
                                &:hover {
                                    outline: none;
                                }
                                &:focus {
                                    outline: none;
                                }
                            }
                        }
                    }
                    .heading-search-links {
                        align-items: center;
                        flex-direction: row-reverse;
                        margin-inline: 1em;
                        .heading-link-container {
                            .sidebar-burger {
                                display: none;
                            }
                        }
                    }
                    .search-container {
                        margin-inline-end: 1em;
                    }
                }
                .table-options {
                    .result-container:not(:empty) {
                        .multiselect-options {
                            display:flex;
                        }
                        .buttons-container {
                            button[data-mobile="false"] {
                                display:flex;
                            }
                        }
                    }
                }
            }
            .page-container-body {
                .page-title {
                    padding-inline: 2em;
                }
                .flexbox-container {
                    flex-direction: row;
                    flex-wrap: wrap;
                    .content-group-container {
                        .content-group {
                            width: 30em;
                        }
                    }
                }
                .home-tile-container {
                    display:grid;
                    overflow:hidden;
                    &:has(.side-tiles) {
                        grid-template-columns: 1fr 33%;
                    }
                    .tile-section {
                        display:grid;
                        grid-template-columns: repeat(3, 1fr);
                        min-width:0;
                        .section-tile {
                            overflow:hidden;
                            min-width:0;
                            &:has(table) {
                                grid-column: span 3;
                            }
                            .chart-container {
                                grid-column: span 3;
                            }
                        }
                    }
                    .home-tile {
                        width: 15em;
                    }
                    .side-tiles {
                        overflow:hidden;
                        overflow-y:auto;
                        .log-item {
                            display:grid;
                            grid-template-columns: 1fr auto;
                        }
                        .tile-section {
                            display:flex;
                        }
                    }
                    .tiles {
                        overflow-y:auto;
                    }
                }
                .tile-container {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                }
                .select-domain-container {
                    display:grid;
                    grid-template-columns: repeat(4, 1fr);
                    /* .domain-tile {
                        width: 20em;
                    } */
                }
                .record-container {
                    display:grid;
                    grid-template-columns: 1fr 25%;
                    grid-template-rows: 100%;
                    min-height:initial;
                    position: relative;
                    column-gap: 1.5em;
                    /* max-height:100%; */
                    overflow-y:auto;
                    box-sizing:border-box;

                    &:has(.markdown-body) {
                        height:100%;
                    }
                    &:has(.record-side-sections) {
                        grid-template-rows: unset;
                        max-height: unset;
                        .record-sections {
                            max-height: unset;
                            .section {
                                &[data-type="table"] {
                                    max-height: unset;
                                }
                            }
                        }
                    }
                    .record-sections {
                        display:flex;
                        flex-direction: column;
                        gap:1.5em;
                        /* max-height:100%; */
                        /* overflow-y:auto; */
                        min-width:0;
                        .section {
                            /* overflow-y:auto; */
                            &:has(.overview-group) {
                                min-height:fit-content;
                            }
                            &[data-type="table"] {
                                max-height:100%;
                            }
                            .section-body {
                                overflow-y:auto;
                                &:has(.overview-group) {
                                    display:grid;
                                    column-gap:1em;
                                    &:not(:has(.transactions-table)) {
                                        grid-template-columns: repeat(3, minmax(0, 1fr));
                                    }
                                    .main-transaction-container {
                                        grid-column: span 3;
                                    }

                                }
                                .overview-group.fullwidth {
                                    grid-column: span 3;
                                }
                                .active-review {
                                    .active-review-files {
                                        grid-template-columns: repeat(3, 1fr);
                                    }
                                }
                            }
                        }
                    }
                    .record-side-sections {
                        .section {
                            .section-body {
                                max-height: unset;
                            }
                        }
                    }
                    &:has(.record-side-sections:empty) {
                        grid-template-columns: 1fr;
                    }
                }
                .main-table {
                    display: table;
                    tbody {
                        display:table-row-group;
                    }
                    thead {
                        display:table-header-group;
                        &.thead-subtle {
                            display: table-header-group;
                            border-inline: none;
                            background: transparent;
                            th {
                                background: var(--background-table-row);
                                color: var(--color-gray);
                                font-size: 0.7rem;
                                font-weight: 500;
                                padding-block: 0.4em;
                                text-transform: none;
                                letter-spacing: 0;
                                border-bottom: 1px solid var(--color-border);
                                &[data-sortable="true"]:hover {
                                    background: var(--background-table-row-hover);
                                }
                            }
                            &.thead-caps th {
                                text-transform: uppercase;
                                letter-spacing: 0.04em;
                            }
                            &.thead-bold th {
                                font-weight: 700;
                            }
                            &.thead-large th {
                                font-size: 0.8rem;
                            }
                            &.thead-padding th {
                                padding-top: 1.25em;
                            }
                            /* Reports only: recolor the heading row. Sizing, padding and
                               typography stay inherited from thead-subtle. */
                            &.thead-primary th {
                                background: var(--background-table-heading);
                                color: var(--color-table-heading);
                                &[data-sortable="true"]:hover {
                                    background: var(--color-primary-dark);
                                }
                            }
                        }
                    }
                    tr {
                        display:table-row;
                        th {
                            &[data-mobile="false"] {
                                display:table-cell;
                            }
                            &[data-desktop="false"] {
                                display:none;
                            }
                        }
                        td {
                            max-width:35ch;
                            padding-inline:1em;
                            padding-block:0.5rem;
                            display:table-cell;
                            font-size:1em;
                            width:unset;
                            &[data-mobile="false"] {
                                display:table-cell;
                            }
                            &.select-cell {
                                display:table-cell;
                            }
                            &[data-mobile-bold="true"] {
                                font-weight:normal;
                            }
                            &[data-mobile-gray="true"] {
                                color: black;
                            }
                            &:not(:empty) {
                                &:not([data-separator="undefined"]) {
                                    padding-left:0.5em;
                                    &::before {
                                        content: '';
                                    }
                                }
                            }
                            &:not([data-mobile-width="undefined"]) {
                                width:auto;
                            }
                            &.heading-cell-icon {
                                padding:0.5em;
                            }
                            &[data-desktop="false"] {
                                display:none;
                            }
                            .cell-stack {
                                line-height:2em;
                                min-height:2em;
                                &:not(:first-child) {
                                    display:flex;
                                }
                            }
                        }
                        &[data-mobile-accent-bar="green"] {
                            box-shadow: none;
                        }
                    }
                }
                .record-crumbs {
                    display: flex;
                    align-items: center;
                    gap: var(--space-xs);
                    padding: var(--space-sm) var(--space-lg) 0;
                    font-size: var(--font-size-small);
                    background-color: var(--background-page);
                    .record-crumb {
                        color: var(--color-primary);
                        text-decoration: none;
                        &:hover { text-decoration: underline; }
                    }
                    .record-crumb--current {
                        color: var(--color-black);
                        font-weight: var(--font-weight-medium);
                    }
                    .record-crumb-sep {
                        color: var(--color-gray);
                        font-size: var(--font-size-small);
                    }
                }
                .record-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    padding: var(--space-sm) var(--space-lg) var(--space-md);
                    gap: var(--space-md);
                    background-color: var(--background-page);
                    .record-header-left {
                        display: flex;
                        align-items: center;
                        gap: var(--space-md);
                    }
                    .record-header-avatar {
                        width: 2.75rem;
                        height: 2.75rem;
                        border-radius: var(--radius-pill);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: white;
                        font-weight: var(--font-weight-semi-bold);
                        font-size: var(--font-size-large);
                        flex-shrink: 0;
                        line-height: 1;
                    }
                    .record-header-avatar--icon {
                        background-color: var(--color-gray-light);
                        border: 1px solid var(--color-border);
                    }
                    .record-header-meta {
                        display: flex;
                        flex-direction: column;
                        gap: var(--space-xs);
                    }
                    .record-header-name-row {
                        display: flex;
                        align-items: center;
                        gap: var(--space-sm);
                    }
                    .record-header-name {
                        margin: 0;
                        font-size: var(--font-size-large);
                        font-weight: var(--font-weight-semi-bold);
                        color: var(--color-black);
                    }
                    .record-header-badge {
                        font-size: var(--font-size-badge);
                        font-weight: var(--font-weight-medium);
                        padding: var(--badge-padding);
                        border-radius: var(--radius-pill);
                        background: var(--background-badge);
                        color: var(--badge-font-color--inactive);
                        border: var(--badge-border);
                        &.inactive { color: var(--badge-font-color--inactive); }
                        &.success  { color: var(--badge-font-color--success); }
                        &.alert    { color: var(--badge-font-color--alert); }
                        &.primary  { color: var(--badge-font-color--primary); }
                    }
                    .record-header-sub {
                        display: flex;
                        align-items: center;
                        font-size: var(--font-size-regular);
                        .color-muted { color: var(--color-gray); }
                        .record-sub-sep { color: var(--color-gray); }
                    }
                    .record-header-right {
                        display: flex;
                        align-items: center;
                        gap: var(--space-sm);
                        flex-shrink: 0;
                    }
                }
                .record-tab-bar {
                    display: flex;
                    border-bottom: 3px solid var(--color-primary);
                    border-top: 1px solid var(--color-border);
                    background-color: var(--background-page);
                    /* padding: 0 var(--space-lg); */
                    overflow-x: auto;
                    overflow-y:hidden;
                    .record-tab {
                        padding: var(--space-sm) var(--space-md);
                        cursor: pointer;
                        font-size: var(--font-size-regular);
                        color: var(--color-gray);
                        border-bottom: 3px solid transparent;
                        margin-bottom: -1px;
                        white-space: nowrap;
                        &.active {
                            color: var(--color-white);
                            background-color: var(--color-primary);
                            font-weight: var(--font-weight-medium);
                        }
                        &:hover:not(.active) { color: var(--color-primary); background-color: var(--color-primary-xlight); }
                    }
                }
                .record-body {
                    display: flex;
                    align-items: stretch;
                    flex: 1;
                    min-height: 0;
                    overflow: hidden;
                    .landing-container {
                        padding: 0;
                        background: transparent;
                        gap: var(--space-md);
                    }
                    .landing-column {
                        min-width: 0;
                    }
                    .record-columns {
                        display: flex;
                        flex-direction: column;
                        gap: var(--space-md);
                        flex: 1;
                        min-width: 0;
                        overflow-y: auto;
                        overflow-x: hidden;
                        padding: var(--space-md) var(--space-lg) var(--space-2xl);
                    }
                    .record-band--full {
                        min-width: 0;
                    }
                    /* Panel section (master/detail) — fills the tab body with its
                       own internal scroll, mirroring the card_list panel view. */
                    &:has(.landing-group--panel) {
                        .record-columns {
                            padding: 0;
                            gap: 0;
                            overflow: hidden;
                        }
                        .record-band--full {
                            flex: 1;
                            min-height: 0;
                            display: flex;
                        }
                    }
                    .landing-group--panel {
                        border:none;
                        border-radius:0;
                        flex: 1;
                        min-height: 0;
                        display: flex;
                        flex-direction: column;
                        overflow: hidden;
                        .landing-group-header {
                            flex-shrink: 0;
                            /* Align header text with the card content below it */
                            padding-inline: var(--space-md);
                            gap: var(--space-sm);
                            .landing-group-header-left {
                                min-width: 0;
                                gap: var(--space-xs);
                                .heading-input-wrapper {
                                    min-width: 0;
                                    .heading-search-input {
                                        width: 10em;
                                        min-width: 0;
                                        max-width: 100%;
                                    }
                                }
                            }
                        }
                        .record-panel-view {
                            flex: 1;
                            min-height: 0;
                            display: grid;
                            grid-template-columns: 2fr 3fr;
                            .card-list-panel-list {
                                display: flex;
                                flex-direction: column;
                                min-height: 0;
                                overflow: hidden;
                                border-right: 1px solid var(--color-border);
                                .card-list-panel-items {
                                    flex: 1;
                                    overflow-y: auto;
                                    min-height: 0;
                                    &:has(.card-list-contact-card) {
                                        background: var(--background-page-secondary);
                                    }
                                }
                                .landing-group-items {
                                    border-radius: 0;
                                    overflow: visible;
                                    padding: 0;
                                }
                                /* Month/year subgroup divider — aligned with card inset */
                                .landing-subgroup-divider {
                                    display: flex;
                                    align-items: center;
                                    gap: var(--space-sm);
                                    padding: var(--space-sm) var(--space-md) var(--space-xs);
                                    &::after {
                                        content: '';
                                        flex: 1;
                                        height: 1px;
                                        background: var(--color-border);
                                    }
                                    .landing-subgroup-divider-label {
                                        font-size: var(--font-size-small);
                                        font-weight: 600;
                                        color: var(--color-primary);
                                        white-space: nowrap;
                                        text-transform: uppercase;
                                        letter-spacing: 0.04em;
                                    }
                                }
                                .landing-tile {
                                    border-radius: 0;
                                    /* No separators between cards */
                                    border: none;
                                    /* Match header inset; active state uses an inset
                                       shadow so content never shifts horizontally. */
                                    padding-inline: var(--space-md);
                                }
                                .landing-tile--active {
                                    background: var(--background-container);
                                    box-shadow: inset 4px 0 0 var(--color-primary);
                                }
                                .landing-group-empty {
                                    padding: 1.5em;
                                    text-align: center;
                                    color: var(--color-muted);
                                    margin: 0;
                                }
                            }
                            .card-list-panel {
                                overflow-y: auto;
                                min-width: 0;
                                display: flex;
                                flex-direction: column;
                                background: var(--background-page-secondary);
                            }
                            .card-list-panel-content {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                                min-height: 0;
                                overflow-y: auto;
                                padding: var(--space-md);
                            }
                            .card-list-panel-back {
                                display: none;
                            }
                            .card-list-panel-placeholder {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                gap: var(--space-sm);
                                color: var(--color-muted);
                                font-size: var(--font-size-regular);
                                i { font-size: 1.75rem; }
                            }
                        }
                    }
                    .record-side {
                        width: 18rem;
                        flex-shrink: 0;
                        display: flex;
                        flex-direction: column;
                        overflow: hidden;
                        background: var(--background-page);
                        border-left: 1px solid var(--color-border);
                        /* Tabs without comments (e.g. Health Records) leave this
                           column empty — collapse it so the main content fills. */
                        &:empty { display: none; }
                        .record-side-section {
                            flex: 1;
                            min-height: 0;
                            display: flex;
                            flex-direction: column;
                            &:not(:last-child) {
                                border-bottom: 1px solid var(--color-border);
                            }
                            .record-side-header {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                flex-shrink: 0;
                                padding: var(--space-sm) var(--space-md);
                                border-bottom: 1px solid var(--color-border);
                                .record-side-title {
                                    margin: 0;
                                    font-size: var(--font-size-small);
                                    font-weight: var(--font-weight-semi-bold);
                                    text-transform: uppercase;
                                    letter-spacing: 0.04em;
                                    color: var(--color-black);
                                }
                                .record-side-buttons {
                                    display: flex;
                                    align-items: center;
                                    gap: var(--space-xs);
                                }
                            }
                            .record-side-body {
                                flex: 1;
                                overflow-y: auto;
                                display: flex;
                                flex-direction: column;
                                gap: var(--space-xs);
                                padding: var(--space-sm);
                                .empty-message {
                                    margin: auto;
                                    text-align: center;
                                    color: var(--color-muted);
                                }
                                .note-cards-container {
                                    flex: 1;
                                    overflow-y: auto;
                                    padding: var(--space-sm) var(--space-md);
                                    gap: var(--space-sm);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* #endregion */
/* ================================================================= */


/* ================================================================= */
/* #region HEADING INPUTS & TOGGLES */
@media only screen {
    .options-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-sm);
        flex-wrap: wrap;
    }
    .heading-input-wrapper {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        padding: var(--space-xs) var(--space-sm);
        color: var(--color-gray);
        line-height: 1;
        min-height: 1.75em;
        .heading-search-input {
            border: none;
            outline: none;
            background: transparent;
            font-size: var(--font-size-body);
            line-height: 1;
            height: 1.25em;
            width: 12em;
            color: var(--color-text);
            padding: 0;
            &::placeholder {
                color: var(--color-gray);
            }
        }
        .icon-button {
            cursor: pointer;
        }
        &:focus-within {
            border-color: var(--color-primary);
            color: var(--color-primary);
        }
    }
    .heading-toggle-wrapper {
        display: flex;
        align-items: center;
        gap: 0.4em;
        font-size: 1em;
        color: var(--color-gray);
        label {
            cursor: pointer;
        }
        input[type="checkbox"] {
            cursor: pointer;
        }
    }
}
/* #endregion */

/* ================================================================= */
/* #region FILTER */
@media only screen {
    .filter-container {
        color: var(--color-gray);
        display: flex;
        flex-direction: row;
        position:relative;
        /* padding-block:0.5em; */
        font-size: var(--font-size-body);
        min-height:1.75em;
        .filter-option {
            display:flex;
            flex-direction: column;
            input, select, search-input {
                font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                background-color: var(--background-input);
                border: var(--border-input);
                border-radius: 0.5em;
                box-sizing: border-box;
                display: inline-block;
                max-width: 100%;
                width:100%;
                padding: 0.25em;
                text-align: left;
                text-decoration: none;
                position: relative;
                &:hover {
                    outline: none;
                }
                &:focus {
                    outline: none;
                }
            }
            /* input::-webkit-calendar-picker-indicator {
                position: absolute;
                left: 0;
                width: 100%;
                background:red;
                height: 100%;
                margin: 0;
                padding: 0;
                opacity: 0;
                cursor: pointer;
            } */
        }
        .form-dropdown {
            border-radius: 5px;
            border: 1px solid var(--color-border);
            padding:0.25em;
            padding-inline:0.5em;
            display:flex;
            flex-direction:column;
            position:relative;
            display:inline-block;
            line-height: 1;
            max-height:1.75em;
            min-height:1.75em;
            .form-title {
                font-weight:500;
                display:flex;
                align-items:center;
                gap:0.25em;
                .title-text {
                    color:var(--color-gray);
                }
                .title-count {
                    display:flex;
                    aspect-ratio: 1;
                    border-radius:100%;
                    width:22px;
                    font-size: var(--font-size-small);
                    background:var(--color-xlight);
                    color:var(--color-primary-dark);
                    justify-content: center;
                    align-items: center;
                    font-weight:bold;
                }
                i {
                    font-size: var(--font-size-button-icon);
                }
            }
            form {
                box-shadow: 0 2px 5px 0 var(--color-shadow);
                display:none;
                z-index:3;
                background: var(--background-page);
                padding:1em;
                min-width:250px;
                max-width:100%;
                position:absolute;
                left:0;
                &.align-right {
                    left: auto;
                    right: 0;
                }
                gap:0.5em;
                font-size: var(--font-size-body);
                max-height:500px;
                overflow:hidden;
                .form-body {
                    max-height: 350px;
                    display:flex;
                    gap:0.5em;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    overflow-y:auto;
                }
                &.display {
                    display:flex;
                    flex-direction:column;
                }
                .form-buttons {
                    display:flex;
                    flex-direction: row;
                    gap:1em;
                    justify-content: end;
                    padding-top:0.75em;
                    button {
                        font-size: var(--font-size-body);
                        padding-inline:0.5em;
                        padding-block:0.25em;
                    }
                }
                .toggle-row {
                    align-items: center;
                    display: flex;
                    flex-direction: row;
                    margin-inline-end: 1.5em;
                    &:hover {
                        cursor: pointer;
                    }
                    i {
                        font-size: calc(var(--font-size-filter) * 2);
                        margin-inline-end: 0.25em;
                    }
                    .bi-toggle-on {
                        color: var(--color-primary);
                    }
                }
                i {
                    font-size: calc(var(--font-size-filter) * 1.2);
                }
                input, select, search-input {
                    font-size: var(--font-size-filter);
                    padding:0.5em;
                }
                input[type="date"] {
                    min-height: calc(var(--font-size-filter) + 1.5em);
                }
            }
            &:hover {
                cursor:pointer;
                border: 1px solid var(--color-primary);
                background: var(--color-xlight);
                .form-title {
                    color: var(--color-primary);
                    .title-text {
                        color: var(--color-primary);
                    }
                    .title-count {
                        background:var(--color-light);
                    }
                }
            }
            &.open {
                z-index:2;
                border:1px solid var(--color-primary);
                background: var(--color-xlight);
                .form-title {
                    color: var(--color-primary);
                    .title-text {
                        color: var(--color-primary);
                    }
                    .title-count {
                        background:var(--color-light);
                    }
                }
            }
            &.active {
                border:1px solid var(--color-primary);
                background: var(--color-xlight);
                .form-title {
                    color: var(--color-primary);
                    .title-text {
                        color: var(--color-primary);
                    }
                    .title-count {
                        background:var(--color-light);
                    }
                }
    
            }
        }
    }
}

/* Tablet */
@media only screen
and (orientation: landscape)
and (max-width: 65em) {
    .filter-container {
        font-size: var(--font-size-body);
        .form-dropdown {
            padding:0.5em;
            padding-inline:0.75em;
        }
    }
}


/* Full Screen */
@media only screen
and (min-width: 65em) {
    .filter-container {
        font-size: var(--font-size-body);
        .form-dropdown {
            padding:0.5em;
            padding-inline:0.75em;
        }
    }
}
/* #endregion FILTER */
/* ================================================================= */


/* ================================================================= */
/* #region SEARCH BAR */

@media only screen {
    .search-bar {
        background-color: white;
        border-bottom: var(--border-search-bar);
        border-bottom-left-radius: 10em;
        border-left: var(--border-search-bar);
        border-right: none;
        border-top: var(--border-search-bar);
        border-top-left-radius: 10em;
        display: inline-block;
        outline: none;
        padding-block: 0.5em;
        padding-inline: 1em;
        text-decoration: none;
        &:focus{
            outline: none !important;
        }
    }
    .search-bar-icon {
        background-color: white;
        border-bottom: var(--border-search-bar);
        border-bottom-right-radius: 10em;
        border-left: none;
        border-right: var(--border-search-bar);
        border-top: var(--border-search-bar);
        border-top-right-radius: 10em;
        color: var(--color-black);
        display: inline-block;
        outline: none;
        padding-block: 0.5em;
        padding-inline: 1em;
        text-decoration: none;
        &:hover{
            cursor: pointer;
        }
    }
}

/* #endregion */
/* ================================================================= */


/* ================================================================= */
/* #region SIDEBAR */

@media only screen {
    .sidebar-container {
        background: var(--background-page);
        color: var(--color-sidebar-text);
        font-size: var(--font-size-sidebar);
        display: none;
        flex-direction: row;
        position: sticky;
        top: 0;
        .sidebar {
            overflow-x: auto;
            overflow-y: auto;
            width: 100dvw;
            .sidebar-burger-ul {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                list-style-type: none;
                margin: 0.5em;
                padding: 0;
                min-width: max-content;
                .sidebar-burger-close {
                    display: none;
                    flex-direction: column;
                    &:hover {
                        color: var(--color-sidebar-text-hover);
                        cursor: pointer;
                    }
                    span {
                        align-items: center;
                        display: flex;
                        flex-direction: column;
                        i {
                            font-size: var(--font-size-sidebar-burger);
                            margin: auto;
                        }
                    }
                }
            }
            .sidebar-logo {
                align-items: center;
                display: none;
                flex-direction: row;
                justify-content: center;
                padding: .5em .25em;
                img {
                    width: 95%;
                }
            }
            .sidebar-ul {
                display: none;
                flex-direction: column;
                justify-content: space-between;
                list-style-type: none;
                margin-bottom:5em;
                margin-inline: 0;
                margin-top: 0;
                padding: 0;
                min-width: max-content;
                .sidebar-heading {
                    padding-inline:1em;
                    padding-block:0.25em;
                    border-bottom:2px solid var(--color-gray-light);
                    font-weight:bold;
                    position: relative;
                    &::after {
                        font-family: 'Bootstrap-icons';
                        position: absolute;
                        right:0;
                    }
                }
                .sidebar-link {
                    text-decoration: none;
                    color:var(--color-sidebar-text);
                    border: var(--border-sidebar-link);
                    /* border-radius: 0.25em; */
                    display: flex;
                    flex-direction: row;
                    padding-block: 0.15em;
                    padding-inline: 1em;
                    &:hover {
                        background: var(--background-sidebar-link-hover);
                        /* border: var(--border-sidebar-link-hover); */
                        color: var(--color-sidebar-text-hover);
                        cursor: pointer;
                    }
                    span {
                        align-items: center;
                        display: flex;
                        flex-direction: row;
                        i {
                            font-size: var(--font-size-sidebar-icons);
                            padding-right: 0.5em;
                            margin: 0;
                        }
                        span {
                            display: flex;
                            flex-direction: row;
                            font-size: var(--font-size-sidebar);
                            padding-inline: 0;
                        }
                    }
                }
                .active {
                    background: var(--background-sidebar-link-active);
                    color: var(--color-sidebar-text-active);
                    font-weight: bold;
                    &.hidden {
                        display: flex;
                    }
                }
                .sidebar-text {
                    display: flex;
                    &:hover {
                        cursor: default;
                    }
                    margin-block:0.5em;
                    .switch-domain-container {
                        text-decoration: none;
                        color:var(--color-sidebar-text);
                        border: var(--border-sidebar-switch-domain);
                        border-radius: 0.25em;
                        display: flex;
                        flex-direction: column;
                        flex-wrap:wrap;
                        font-weight: bold;
                        width: 100%;
                        &:hover {
                            background: var(--background-sidebar-link-hover);
                            border: var(--border-sidebar-link-hover);
                            color: var(--color-sidebar-text-hover);
                            cursor: pointer;
                        }
                        span {
                            padding-inline:1em;
                            &:first-child {
                                padding-top:1em;
                            }
                            &:last-child {
                                padding-bottom:1em;
                            }
                            &:has(+span) {
                                padding-bottom:0.5em;
                            }
                        }
                    }
                }
            }

            .sidebar-footing {
                background-color: var(--background-page);
                display: flex;
                flex-direction: row;
                max-width: 100%;
                position: absolute;
                width:calc(100% - 1em);
                padding:1em;
                box-sizing: border-box;
                bottom:0;
                img {
                    width: 3em;
                    height: 3em;
                }
                span {
                    font-size: var(--font-size-sidebar-footing);
                }
            }
        }
    }   

    .sidebar {
        display:none;
        /* Opened by showSidebar() below the desktop breakpoint. A class rather
           than an inline display so the min-width:65em block still wins -- see
           the comment on showSidebar() in sidebar.js. */
        &.mobile-open {
            display:grid;
        }
        grid-template-rows: 5em 1fr;
        width:100dvw;
        max-width:100dvw;
        position:absolute;
        z-index:3;
        height:100dvh;
        grid-template-columns: 5em 1fr;

        font-size: var(--font-size-sidebar);
        color: var(--color-sidebar-text);
        background :var(--background-page);
        border-right:1px solid var(--color-border);
        .sidebar-logo {
            object-fit:contain;
            grid-column: span 2;
            align-items: center;
            display: flex;
            flex-direction: row;
            justify-content: center;
            padding: .5em .25em;
            .sidebar-burger-close {
                position:absolute;
                left:0;
                padding:0.5em;
                font-size:1.5em;
                top:0;
                &:hover {
                    cursor:pointer;
                    color: var(--color-primary);
                }
            }
            a {
                display: contents;
            }
            img {
                height:100%;
            }
            .logo-icon {
                display:none;
            }
        }
        
        .sidebar-icons {
            display:flex;
            flex-direction: column;
            height:100%;
            border-right:1px solid var(--color-border);
            padding:0;
            gap: var(--space-xs);
            border-top:1px solid var(--color-border);
            box-sizing: border-box;
            justify-content: space-between;
            align-items: center;
            padding-block:var(--space-md);
            .sidebar-icon {
                box-sizing:border-box;
                text-align: center;
                vertical-align: middle;
                font-size:var(--font-size-xlarge);
                border-radius: 5px;
                color: var(--color-sidebar-text);
                width:100%;
                aspect-ratio: 1;
                display:flex;
                justify-content: center;
                align-items: center;
                height: 40px;
                width: 40px;
                &:hover {
                    background:var(--color-primary-xlight);
                    cursor:pointer;
                    color:var(--color-primary);
                }
                &.active {
                    color: var(--color-white);
                    background:var(--color-primary);
                }
            }
            .sidebar-icons-top {
                gap:0.25em;
                display:flex;
                flex-direction: column;
            }
            .sidebar-icons-bottom {
                gap:0.25em;
                display:flex;
                flex-direction: column;
            }
            .sidebar-divider {
                height: 1px;
                background: var(--color-border);
                margin: 0.25em 0.5em;
            }
        }
        .sidebar-sections {
            display:flex;
            flex-direction:column;
            width:100%;
            position:relative;
            
            .sidebar-section {
                display:flex;
                display:none;
                flex-direction: column;
                position: static;
                width:100%;
                height:100%;
                background:var(--background-page);
                border-top:1px solid var(--color-border);
                .sidebar-link {
                    padding-block:0.5em;
                    padding-inline:1rem;
                    font-size:1.15em;
                    text-decoration: none;
                    color:var(--color-sidebar-text);
                    &:hover {
                        background:var(--color-primary-xlight);
                        color:var(--color-primary);
                    }
                    &.active {
                        color:var(--color-primary);
                        background:var(--color-primary-xlight);
                        border-right:5px solid var(--color-primary);
                    }
                }
                .sidebar-section-title {
                    box-sizing: border-box;
                    padding-inline:1rem;
                    padding-block:0.5em;
                    font-weight:bold;
                    font-size:1.45em;
                    margin:0;
                    display:flex;
                    align-items: center;
                    justify-content: space-between;
                    /* color:var(--color-primary); */
                    .sidebar-expand-collapse {
                        display:none;
                        position: absolute;
                        right:0;
                        top:0;
                        border:none;
                        background:var(--background-page);
                        border-radius:5px;
                        padding:0.5em;
                        margin:0.25em;
                        box-sizing: border-box;
                        &:hover {
                            cursor:pointer;
                            background:var(--color-xlight);
                        }
                    }
                }
                &:has(.sidebar-link.active) {
                    display:flex;
                }
                &.hover {
                    display:flex;
                    z-index:2;
                }
            }
        }
        .sidebar-secondary {
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            border-top: 1px solid var(--color-border);
            padding-top: var(--space-xs);
        }
        .sidenav-group-label {
            font-size: 0.7rem;
            font-weight: var(--font-weight-normal);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-muted);
            padding: var(--space-xs) var(--space-md);
            margin: 0;
            &:not(:first-child) {
                margin-top: var(--space-sm);
            }
        }
        .sidenav-divider {
            height: 2px;
            background: var(--color-border);
            margin: var(--space-xs) 2em;
        }
        .sidenav-item {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: 0.65em var(--space-md);
            font-size: var(--font-size-regular);
            text-decoration: none;
            color: var(--color-sidebar-text);
            border-left: 5px solid transparent;
            i {
                font-size: 1.05em;
                flex-shrink: 0;
            }
            &:hover {
                background: var(--background-container);
                color: var(--color-black);
                .sidenav-dot { background: var(--color-primary); }
            }
            &.active {
                background: var(--background-container);
                color: var(--color-black);
                border-left-color: var(--color-primary);
                font-weight: 600;
                i {
                    color: var(--color-primary);
                }
            }
            &.sidenav-item--dot {
                color: var(--color-muted);
                &.has-items {
                    color: var(--color-sidebar-text);
                    .sidenav-dot { background: var(--color-primary); }
                }
            }
        }
        .sidenav-dot {
            width: 7px;
            height: 7px;
            border-radius: var(--radius-pill);
            background: var(--color-border-dark, var(--color-border));
            flex-shrink: 0;
        }
        .sidenav-badge {
            margin-left: auto;
            font-size: 0.7rem;
            font-weight: 700;
            color: white;
            background: var(--color-orange);
            border-radius: var(--radius-pill);
            min-width: 18px;
            height: 18px;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 0 0.4em;
            &.has-count {
                display: flex;
            }
        }
    }

    .article-sidebar {
        display:none;
        /* Mobile open state, same mechanism as .sidebar above. */
        &.mobile-open {
            display:block;
        }
        background: var(--background-page);
        transition-duration: 0.15s;
        border-right: 1px solid var(--color-border);
        overflow-y:auto;
        position:absolute;
        width:100%;
        height:100%;
        box-sizing: border-box;
        z-index:3;
        .article-sidebar-header {
            display:flex;
            padding-inline:0.5em;
            padding-top:0.5em;
            flex-direction: row;
            align-items: center;
            position: sticky;
            top:0;
            background-color: var(--background-page);
            h1, h2 {
                margin: 0;
            }
            button {
                background: var(--background-page);
                border: 1px solid var(--color-border);
                color:var(--color-primary);
                border-radius: 5px;
                i {
                    font-size:1rem;
                }
                &:hover {
                    cursor:pointer;
                    background: var(--background-tile-hover);
                }
            }
            .sidebar-burger-close {
                font-size:1.75em;
            }
        }
        ul {
            display:flex;
            flex-direction: column;
            gap:0.5em;
            padding-left: 1.5em;
            /* font-size:1rem; */
            li {
                list-style: none;
                &.active {
                    font-weight:bold;
                }
                p {
                    margin:0;
                    padding-bottom:0.5em;
                    font-weight:600;
                    color:var(--color-black);
                    &:hover {
                        cursor:pointer;
                        color:black;
                    }
                    &::before {
                        font-family:'Bootstrap-icons';
                        content: '\F2EA';
                    }
                }
                &.collapsed {
                    p {
                        padding-bottom:0;
                    }
                    p+ul {
                        display:none;
                    }
                    p::before {
                        content: '\F4FE';
                    }
                }
                a {
                    color: var(--color-primary);
                    text-decoration: none;
                    &:hover {
                        color: var(--color-primary-dark);
                    }
                }
                ul {
                    padding-left:20px;
                }
            }
        }

        &.collapsed {
            width:fit-content;
            :not(button, .article-sidebar-header, button i) {
                display:none;
            }
        }
    }
}

@media only screen
and (min-width: 65em) {
    .sidebar-container {
        display: flex;
        width: 20em;
        z-index:3;
        .sidebar {
            box-shadow: var(--box-shadow-sidebar);
            padding: 0.5em;
            width: inherit;
            .sidebar-burger-ul {
                .sidebar-burger-close {
                    display: none;
                }
            }
            .sidebar-logo {
                display: flex;
            }
            .sidebar-ul {
                display: flex;
            }
            .sidebar-footing {
                display: flex;
            }
            .sidebar-heading {
                &:hover {
                    cursor:pointer;
                    color:var(--color-black);
                }
                &.open::after {
                    content: '\F282';
                    -webkit-text-stroke:0.5px;
                }
                &.closed::after {
                    content: '\F285';
                    -webkit-text-stroke:0.5px;
                }
            }
            .sidebar-link {
                &.hidden {
                    display:none;
                }
            }
        }
    }

    .article-sidebar {
        position: unset;
        display:block;
        width: 50em;
        .article-sidebar-header {
            padding-inline:1.5em;
            padding-top:1.5em;
            .sidebar-burger-close {
                display:none;
            }
        }
    }

    .sidebar {
        display:grid;
        grid-template-columns:60px;
        width:fit-content;
        max-width:60px;
        position:relative;
        overflow-x:hidden;
        .sidebar-logo {
            grid-column: span 1;
            .sidebar-burger-close {
                display:none;
            }
            .text-icon {
                display:none;
            }
            .logo-icon {
                display:flex;
                box-sizing:border-box;
                padding:0.25em;
            }
            &:hover {
                cursor:pointer;
                background: var(--color-xlight);
            }
        }
        .sidebar-logo {
            background: var(--background-container);
        }
        .sidebar-icons {
            border-right:none;
            border-top: 1px solid transparent;
            background: var(--background-container);
            .sidebar-icon {
                font-size: var(--font-size-xlarge);
                border-radius: var(--radius-base);
            }
        }
        .sidebar-sections {
           border-right:none;
            .sidebar-section {
                padding-bottom:1em;
                position:fixed;
                border:none;
                width:20em;
                box-shadow: 0 2px 5px 0 var(--color-shadow);
                height:fit-content;
                background:var(--background-page);
                &:not(.hover) {
                    display:none;
                    &:has(.sidebar-link.active) {
                        display:none;
                    }
                }
                &.hover:not(:has(.sidebar-link)) {
                    display:none;
                }
                .sidebar-section-title {
                    .sidebar-expand-collapse {
                        display:flex;
                    }
                }
            }
        }
    }

    .sidebar.has-secondary {
        grid-template-columns: 60px 20em;
        width: fit-content;
        max-width: unset;
        .sidebar-logo {
            grid-column: 1;
            grid-row: 1;
        }
        .sidebar-icons {
            grid-column: 1;
            grid-row: 2;
        }
        .sidebar-secondary {
            grid-column: 2;
            grid-row: 1 / 3;
            border-top: none;
            border-left: 1px solid var(--color-border);
            padding-top: var(--space-sm);
            background: var(--background-page);
        }
    }
}

@media only screen and (max-width: 65em) {
    /* Explicit placement into the `5em 1fr` grid, so the panel takes the space
       left beside the icon rail. The accountant/planner/broker/lawyer variant of
       the sidebar renders .sidebar-sections in flow between the rail and the
       panels (see sidebar.html), and auto-placement hands it row 2 / column 2 --
       which pushed the visible panel into an implicit third row, below a grid
       that already fills 100dvh. Both share the cell instead. */
    .sidebar .sidebar-secondary,
    .sidebar .sidebar-sections {
        grid-row: 2;
        grid-column: 2;
    }
    .sidebar .sidebar-sections {
        z-index: 2;
        /* A grid item takes part in stacking on z-index alone and this one
           stretches over the whole cell, so while no section is showing the
           empty container would sit above the panel and swallow taps meant for
           it. Restored on the section that is actually open. */
        pointer-events: none;
    }
    .sidebar .sidebar-sections .sidebar-section {
        pointer-events: auto;
    }

    /* Touch targets. Both base rules live in the unscoped block above and are
       shared with desktop, where the pointer is precise and the tighter density
       is wanted -- so the 44px minimum is applied here rather than there. */
    .sidebar .sidebar-icons .sidebar-icon {
        /* The rail is 5em/80px wide at this breakpoint, so 44px fits. */
        height: 44px;
        width: 44px;
    }
    .sidebar .sidenav-item {
        /* Clears 44px tall at the regular font size. */
        padding-block: 0.8em;
    }
    /* No sidebar on the page means nothing for the burger to open, and
       sidebar.js is not loaded either (it ships with the sidebar includes, not
       base.html) -- so showSidebar() is undefined and the tap only throws.
       select_domain is the case today; keyed on the sidebar's absence rather
       than the page name so it stays correct for any other such page. */
    body:not(:has(.sidebar, .article-sidebar)) .sidebar-burger {
        display: none;
    }
}

/* #endregion */
/* ================================================================= */


/* ================================================================= */
/* #region VIEWS TGT */

@media only screen {
    .border-bottom {
        border-bottom: 1px solid var(--color-light);
    }
    .check-row {
        display: flex;
        flex-direction:row;

        .form-group {
            margin-right:1em;
        }
    }
    .sort-selectors {
        display: flex;
        flex-direction: row;
    }
    .filter-group {
        display:flex;
        flex-direction:row;
        align-items:center;
    }
    .column-group {
        display:flex;
        flex-direction: row;
        align-items:center;
    }
    .column-checkbox-group {
        display:flex;
        flex-direction: row;
        align-items: center;
    }
    .column-button-container {
        display:flex;
        flex-direction: column;
    }
}

/* #endregion */
/* ================================================================= */


/* ================================================================= */
/* #region MARKDOWN TGT */

@media only screen {
    .markdown {
        overflow-x:auto;

        p {
            &:has(+p) {
                margin-block:0.25em;
            }
            &:last-child {
                margin-block:0.25em;
            }
            &:not(:has(+p)) {
                margin-bottom:1em;
            }
        }

        blockquote {
            margin:0;
            padding:1em;
            border-left: 5px solid var(--color-light);
            background-color:var(--color-xlight)
        }

        ol, ul {
            padding-inline-start:1.25em;
        }

        ul ~ li {
            width:100%;
            float:left;
        }

        hr {
            background: var(--color-border);
        }

        pre {
            padding:1em;
            background: var(--color-xlight);
            border-radius: 5px;
            border:1px solid var(--color-light);
            width:100%;
            max-width:calc(100% - 2em - 5px);
            overflow-x:auto;
        }
        img {
            aspect-ratio: 1;
            width:50%;
            max-width:100%;
        }

        code {
            width:100%;
            padding:1em;
            border-radius:5px;
            border: 1px solid var(--color-xlight);
        }
    }
}

/* #endregion */
/* ================================================================= */


/* ================================================================= */
/* #region LOADING ICON */

@media only screen {
    .loading-div {
        height:100%;
        width: 100%;
        display:flex;
        align-items: center;
        justify-content: center;
        position:absolute;
        display:none;
        &.display {
            display:flex;
        }
        #loading {
            width: 2.2em;
            height: 2.2em;
            display: block;
            position: relative;
            animation: spinRing 1500ms linear infinite;
            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                height: auto;
                width: auto;
                border: 5px solid var(--color-primary);
                border-radius: 50%;
                clip-path: polygon(50% 50%, 50% 0%, 100% 0%,100% 80%);
                animation: spinRingInner 1500ms cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
            }
        }
    } 
    
    @keyframes spinRing {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    @keyframes spinRingInner {
        0%   { transform: rotate(-180deg); }
        50%  { transform: rotate(-160deg); }
        100% { transform: rotate(180deg); }
    }
}

@media only screen 
and (min-width: 65em) {
    .loading-div {
        width:calc(100% - 5em);
    }
}

/* #endregion LOADING ICON */
/* ================================================================= */

/* ================================================================= */
/* #region HOLDINGS CHART */
.metric-section-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-orange);
    margin: 0;
    padding: 0.25em 0 0.1em;
}

.holdings-chart-side {
    height: 240px;
}

.holdings-empty-message,
.section-empty-message {
    padding: 2em 1.5em;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: var(--color-muted);
    margin: 0;
}

.holdings-list {
    display: flex;
    flex-direction: column;

    .holdings-list-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5em 0;
        border-bottom: 1px solid var(--color-border);
        font-size: 0.8rem;

        &:last-child {
            border-bottom: none;
        }
    }

    .holdings-list-name {
        font-weight: 500;
    }

    .holdings-list-amount {
        color: var(--color-gray);
        font-size: 0.85rem;
    }
}

.balance-breakdown-list {
    .holdings-list-name {
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--color-gray);
    }
    .holdings-list-amount {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--color-black);
    }
}

.care-group-overflow-footer {
    display: block;
    width: 100%;
    padding: 0.5em 1.25em;
    background: none;
    border: none;
    border-top: 1px solid var(--color-border);
    text-align: left;
    font-size: 0.8rem;
    color: var(--color-primary);
    cursor: pointer;
    &:hover {
        color: var(--color-primary-dark);
        text-decoration: underline;
    }
}
/* #endregion HOLDINGS CHART */
/* ================================================================= */

/* ================================================================= */
/* #region KEY CONTACT SEARCH MODAL (spec #43) */
.key-contact-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    z-index: 900;
}

.key-contact-modal {
    background: var(--background-page);
    border-radius: 0.5em;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    width: 420px;
    max-width: 95vw;
    overflow: hidden;
    input {
        font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
        font-size: var(--font-size-input);
        background-color: var(--background-input);
        border: var(--border-input);
        border-radius: 0.5em;
        box-sizing: border-box;
        display: block;
        width: 100%;
        padding: 0.5em;
        &::placeholder { color: var(--color-input-placeholder); opacity: 1; }
        &:focus { outline: none; border-color: var(--color-primary); }
    }
    .modal-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1em 1.25em 0.75em;
        border-bottom: 1px solid var(--color-border);
        .modal-card-title {
            font-size: 0.95rem;
            font-weight: 600;
            margin: 0;
        }
    }
    .modal-card-body {
        padding: 1em 1.25em;
        display: flex;
        flex-direction: column;
        gap: 0.75em;
    }
}

.key-contact-results {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    max-height: 280px;
    overflow-y: auto;
}

.key-contact-result-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15em;
    padding: 0.5em 0.75em;
    border-radius: 0.35em;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    &:hover {
        background: var(--background-page-secondary);
        border-color: var(--color-border);
    }
    .key-contact-result-name {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--color-black);
    }
    .key-contact-result-vendor {
        font-size: 0.78rem;
        color: var(--color-gray);
    }
}

.key-contact-no-results {
    color: var(--color-muted);
    padding: 0.5em 0;
    margin: 0;
}
/* #endregion KEY CONTACT SEARCH MODAL */
/* ================================================================= */

/* #region GUIDED PICKER MODAL */
/* ================================================================= */
.guided-picker-blurb,
.guided-picker-options,
.guided-picker-info-section {
    grid-column: 1 / -1;
}

.guided-picker-blurb {
    margin: 0 0 1rem 0;
    color: var(--color-secondary);
    font-size: 0.9rem;
    font-weight: var(--font-weight-semi-bold);
    text-align: center;
}

.guided-picker-options {
    /* Cap the row at N tiles, then wrap. Each square tile is ~8em wide
       (6em content + 1em padding each side); the gap is 1.25rem. Capping
       max-width to N tiles + (N-1) gaps (plus a small buffer for borders)
       makes flex-wrap break to a new line once N is reached, while still
       centering a partial last row. Change --picker-columns to 4 or 5. */
    --picker-columns: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    align-items: flex-start;
    padding: 0.5rem 2em;
    max-width: calc(var(--picker-columns) * 8em + (var(--picker-columns) - 1) * 1.25rem + 1em);
    margin-inline: auto;
}

/* Guided picker content is short — override .modal-body's height:100% so it sizes
   to content and doesn't show a phantom scrollbar. min-height:0 keeps a long
   property list able to scroll when it exceeds the dialog's max-height. */
.modal-fade .modal-dialog .modal-body:has(.guided-picker-options) {
    height: auto;
    min-height: 0;
}

.guided-picker-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    flex: 1;
    max-width: 160px;
}

.guided-picker-divider {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    flex-basis: 100%;
    width: 100%;

    &::after {
        content: '';
        flex: 1;
        height: 2px;
        background: var(--color-border);
    }
}

.guided-picker-divider-label {
    padding-left: var(--space-xs);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semi-bold);
    color: var(--color-primary);
    white-space: nowrap;
}

.guided-picker-info-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-inline:1.5em;
}

.guided-picker-info-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--color-gray);
    padding: 0;
    width: 100%;
}

.guided-picker-info-toggle::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.guided-picker-info-toggle.is-open {
    color: var(--color-primary);
}

.guided-picker-desc-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.guided-picker-option-desc {
    font-size: 0.8rem;
    color: var(--color-secondary);
    line-height: 1.4;
    margin: 0;
}
/* #endregion GUIDED PICKER MODAL */
/* ================================================================= */

/* ================================================================= */
/* #region FILE TREE */

.landing-group--file-tree {
    .landing-group-body {
        padding: 0;
    }

    .file-tree-header {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) 140px 130px 56px;
        align-items: center;
        padding-inline: 0.75em;
        padding-block: 0.4em;
        padding-top: 1.25em;
        gap: 0.5em;
        background: var(--background-table-row);
        color: var(--color-gray);
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-bottom: 1px solid var(--color-border);
    }

    .file-tree {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* Shared grid row — checkbox | name | date | uploaded-by | actions */
    .folder-label,
    .file-row {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) 140px 130px 56px;
        align-items: center;
        width: 100%;
        padding-block: 0.5em;
        padding-inline: 0.75em;
        gap: 0.5em;
        cursor: pointer;
        box-sizing: border-box;
        background: var(--background-table-row-light);
        font-size: 0.85rem;
        &:hover {
            background: var(--background-table-row-hover);
        }
    }

    .file-tree-col-name {
        display: flex;
        align-items: center;
        gap: 0.4em;
        overflow: hidden;
        span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .folder-label .file-tree-col-name,
    .file-row .file-tree-col-name {
        margin-inline-start: calc(var(--file-depth, 0) * 1.35em);
    }

    .file-tree-col-check {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .file-tree-folder-icon {
        color: var(--color-folder);
        flex-shrink: 0;
        /* font-size: 0.9em; */
    }

    .file-tree-col-date,
    .file-tree-col-by {
        color: var(--color-gray);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .file-tree-col-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.1em;
    }

    /* Folder */
    .folder {
        display: flex;
        flex-direction: column;
        width: 100%;
        font-size: 0.85rem;

        .folder-children {
            display: none;
            flex-direction: column;
        }

        &.open > .folder-children {
            display: flex;
        }
    }

    /* Connector lines — vertical line runs through icon column, not checkbox column */
    .folder-children {
        > .file-row {
            position: relative;
            &::before {
                content: '';
                position: absolute;
                left: calc(28px + 1.6em + (var(--file-depth, 1) - 1) * 1.35em);
                top: 0;
                height: 50%;
                width: 0.6em;
                border-left: 1px solid var(--color-border);
                border-bottom: 1px solid var(--color-border);
                pointer-events: none;
            }
            &:not(:last-child)::after {
                content: '';
                position: absolute;
                left: calc(28px + 1.6em + (var(--file-depth, 1) - 1) * 1.35em);
                top: 50%;
                bottom: 0;
                border-left: 1px solid var(--color-border);
                pointer-events: none;
            }
        }

        > .folder {
            position: relative;
            &::before {
                content: '';
                position: absolute;
                left: calc(28px + 1.6em + (var(--file-depth, 1) - 1) * 1.35em);
                top: 0;
                height: 1.1em;
                width: 0.6em;
                border-left: 1px solid var(--color-border);
                border-bottom: 1px solid var(--color-border);
                pointer-events: none;
            }
            &:not(:last-child)::after {
                content: '';
                position: absolute;
                left: calc(28px + 1.6em + (var(--file-depth, 1) - 1) * 1.35em);
                top: 1.1em;
                bottom: 0;
                border-left: 1px solid var(--color-border);
                pointer-events: none;
            }
        }
    }
}

@media only screen and (max-width: 65em) {
    .landing-group--file-tree {

        /* Hide secondary column labels in the header */
        .file-tree-header .file-tree-col-date,
        .file-tree-header .file-tree-col-by { display: none; }

        /* All row types: collapse to 3 columns */
        .file-tree-header,
        .folder-label,
        .file-row {
            grid-template-columns: 28px minmax(0, 1fr) 56px;
        }

        /* File rows only: add a second row for the date sub-line.
           Folder labels are excluded — their date cell is empty and
           adding a second row would create unwanted extra height. */
        .file-row {
            grid-template-rows: auto auto;
        }

        /* Checkbox spans both rows on file rows */
        .file-row .file-tree-col-check { grid-row: 1 / 3; }

        /* Name stays on row 1 */
        .file-tree-col-name { grid-column: 2; grid-row: 1; }

        /* Date drops to a muted sub-line on row 2.
           margin-inline-start mirrors the name's depth indent so the date
           aligns under the file icon rather than sticking out to its left. */
        .file-tree-col-date {
            grid-column: 2;
            grid-row: 2;
            font-size: 0.78rem;
            padding-block-end: 0.3em;
            margin-inline-start: calc(var(--file-depth, 0) * 1.35em);
        }

        /* Uploaded By hidden — date sub-line carries the context */
        .file-tree-col-by { display: none; }

        /* Actions button spans both rows on file rows */
        .file-row .file-tree-col-actions { grid-column: 3; grid-row: 1 / 3; }

        /* Fix connector lines — 50% of a 2-row cell overshoots into the date
           sub-line. Pin the elbow to 1.1em (icon centre in the name row). */
        .folder-children > .file-row {
            &::before { height: 1.1em; }
            &:not(:last-child)::after { top: 1.1em; }
        }
    }
}

.landing-group--file-tree--compact {
    .file-tree-header,
    .folder-label,
    .file-row {
        grid-template-columns: minmax(0, 1fr) 56px;
    }
    .file-tree-col-check,
    .file-tree-col-date,
    .file-tree-col-by { display: none; }

    /* Recalculate connector lines — no checkbox column in compact mode */
    .folder-children > .file-row,
    .folder-children > .folder {
        &::before {
            left: calc(1.6em + (var(--file-depth, 1) - 1) * 1.35em);
        }
        &:not(:last-child)::after {
            left: calc(1.6em + (var(--file-depth, 1) - 1) * 1.35em);
        }
    }
}

/* #endregion FILE TREE */
/* ================================================================= */


/* ================================================================= */
/* #region CARD LIST PANEL — MOBILE */
/*
 * Desktop styles live in the nested &.card-list-container--panel block
 * inside #region PAGE CONTENT, where they carry the right specificity.
 * This section only handles: shared base styles + mobile overrides.
 * The mobile selector matches the desktop nesting depth exactly so it wins.
 */

/* Shared — applies at all breakpoints */
.card-list-container--panel {
    .card-list-panel-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
    }
}

/* Panel "open full page view" action — above the detail cards. Shares the
   landing container's horizontal inset + background so the button lines up
   with the cards below; the container's own top padding supplies the gap to
   the first card. A leading half-width metric group (e.g. Current Value)
   can share this same row, left-aligned; the button stays pinned top-right
   rather than centering against the metric's taller card. */
.panel-action-bar {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    /* Deliberately `em`, not --space-lg: this has to track .landing-container's
       own em-based inset (1.5em), which is relative to the inherited
       --font-size-body and shrinks at the narrower breakpoints. A rem token
       resolves larger and leaves the bar inset further than the cards below. */
    padding: 1.5em 1.5em 0;
    background: var(--background-page-secondary);
    .landing-group {
        margin: 0;
    }
    /* A lone button (no leading metric) must still sit right — space-between
       parks a single flex child at the start. Auto margins absorb the free
       space before justify-content applies, so the metric-left layout is
       unchanged when a half-width metric group shares the row. */
    > a.button {
        margin-left: auto;
    }
    .button {
        gap: var(--space-xs);
        padding: 0.5em 1em;
        background: var(--background-page);
        text-decoration: none;
        span {
            margin-inline-start: 0;
        }
        &:hover {
            background: var(--background-page);
            text-decoration: none;
        }
    }
}

/* Below the breakpoint the panel is a narrow full-screen overlay, so the row
   above squeezes both items to about half width and wraps the metric's label
   over three lines. Stack them full width instead, action first. The metric
   group needs no width here -- .landing-group--half is already 100% at this
   breakpoint. */
@media only screen and (max-width: 65em) {
    .panel-action-bar {
        flex-direction: column;
        /* Matches .landing-container's own gap, so the button, the metric card
           and the first detail card below are all spaced alike. `em` for the
           same reason the padding above is -- see that comment. */
        gap: 1.5em;
        /* The base rule's flex-start would shrink both children to their
           content width once the main axis is vertical. */
        align-items: stretch;
        > a.button {
            /* Puts the action above the metric without touching the DOM order,
               which the desktop row's metric-left / button-right layout uses. */
            order: -1;
            /* The base rule right-pins the button with margin-left:auto for the
               row. An auto margin also beats align-items:stretch, so leaving it
               would keep the button content-width and shoved right. */
            margin-left: 0;
        }
    }
}

@media only screen and (max-width: 65em) {
    body .page-container .page-container-body .landing-container.card-list-container.card-list-container--panel {
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
        padding: 0;
        gap: 0;
        .card-list-panel-list {
            flex: 1;
            overflow-y: auto;
        }
        .card-list-panel {
            display: flex;
            position: absolute;
            inset: 0;
            z-index: 2;
            background: var(--background-page-secondary);
            flex-direction: column;
            overflow-x: hidden;
            transform: translateX(100%);
            transition: transform 0.25s ease;
            &.card-list-panel--open {
                transform: translateX(0);
            }
        }
        .card-list-panel-back {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-sm) var(--space-md);
            font-size: var(--font-size-regular);
            color: var(--color-primary);
            cursor: pointer;
            border-bottom: 1px solid var(--color-border);
            background: var(--background-page);
            i { font-size: var(--font-size-large); }
            &:hover { color: var(--color-primary-dark); }
        }
        .card-list-panel-placeholder {
            display: none;
        }
    }
}

/* #endregion CARD LIST PANEL — MOBILE */
/* ================================================================= */


/* ================================================================= */
/* #region LANDING — MOBILE */

.landing-tile-rows {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--space-xs);
    &.landing-tile-rows--mobile { display: none; }
}

@media only screen and (max-width: 65em) {

    /* Allow the page body to scroll when sticky column is present */
    body .page-container .page-container-body:has(.landing-column--sticky) {
        overflow: auto;
    }

    body .page-container .page-container-body {

        /* Mobile list tile row sets — desktop hidden, mobile shown */
        .landing-tile-rows--desktop { display: none; }
        .landing-tile-rows--mobile  { display: flex; }

        /* Stack all two-column containers into a single column */
        .landing-container {
            grid-template-columns: 1fr;

            &.landing-container--split,
            &.landing-container--equal,
            &.landing-container--fifty,
            &.landing-container--sixty,
            &.landing-container--seventy {
                grid-template-columns: 1fr;
            }

            /* Release the desktop row/column pinning on the two-column prompt. With a
               single track, leaving both columns pinned to row 2 would stack them in
               the same cell on top of each other. */
            &.landing-container--equal {
                > .page-prompt,
                > .landing-column {
                    grid-row: auto;
                    grid-column: auto;
                }
            }

            /* Undo sticky-container height/padding/gap overrides */
            &:has(.landing-column--sticky) {
                grid-template-columns: 1fr;
                height: auto;
                padding: 1.5em;
                gap: 1.5em;
                align-items: start;

                > .landing-column:not(.landing-column--sticky) {
                    overflow-y: unset;
                    padding: 0;
                    overflow-x:hidden;
                }
            }

            /* Sticky column is hidden — agenda lives in the FAB drawer */
            .landing-column--sticky {
                display: none;
            }

            /* Row groups (Family / Pets / Properties) stack vertically */
            .landing-row-groups {
                flex-direction: column;
                align-items: stretch;
            }

            /* Snapshot: metrics go 2-up instead of 3-up.
               Use compound selector to match base specificity exactly. */
            .landing-group.landing-group--snapshot {
                .landing-snapshot-metrics {
                    grid-template-columns: 1fr 1fr;
                }
                /* Remove right border from items at the end of each row */
                .landing-snapshot-metric-block:nth-child(2n) {
                    border-right: none;
                }
                /* Row separator when last item is alone in col 1 (odd total) */
                .landing-snapshot-metrics:has(.landing-snapshot-metric-block:last-child:nth-child(odd)) {
                    .landing-snapshot-metric-block:not(:last-child) {
                        border-bottom: 1px solid var(--color-border);
                    }
                }
                /* Row separator when last row is full (even total) */
                .landing-snapshot-metrics:has(.landing-snapshot-metric-block:last-child:nth-child(even)) {
                    .landing-snapshot-metric-block:not(:nth-last-child(-n+2)) {
                        border-bottom: 1px solid var(--color-border);
                    }
                }

                /* Score + chart stack vertically */
                .landing-snapshot-top {
                    flex-direction: column;
                }

                .landing-snapshot-score {
                    width: 100%;
                    border-right: none;
                    padding-right: 0;
                }

                /* Scrollable chart — fixed min-width lets all 12 months breathe */
                .landing-snapshot-chart {
                    overflow-x: auto;
                    -webkit-overflow-scrolling: touch;
                    box-shadow: inset -16px 0 12px -12px rgba(0, 0, 0, 0.04);
                    transition: box-shadow 0.3s ease;
                    &.is-scrolled-end { box-shadow: none; }
                    .landing-chart-label {
                        position: sticky;
                        left: 0;
                    }
                }

                .landing-snapshot-chart .landing-chart-container {
                    min-width: 480px;
                    flex: none;
                    height: 180px;
                }

                /* OK / Needs Attention columns stack vertically */
                .landing-snapshot-categories {
                    grid-template-columns: 1fr;
                }

                .landing-snapshot-cat-col:first-child {
                    border-right: none;
                    border-bottom: 1px solid var(--color-border);
                }
            }
        }
    }

    /* ── Landing chart scroll (line + bar_vertical types) ───────────────────── */

    .landing-chart-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: inset -16px 0 12px -12px rgba(0, 0, 0, 0.04);
        transition: box-shadow 0.3s ease;
        &.is-scrolled-end { box-shadow: none; }

        .landing-chart-container {
            min-width: 480px;
            flex: none;
        }
    }

    /* ── Agenda FAB + Drawer ─────────────────────────────────────────────────── */

    .agenda-fab {
        position: fixed;
        bottom: var(--space-lg);
        right: var(--space-lg);
        width: 3rem;
        height: 3rem;
        border-radius: var(--radius-pill);
        background: var(--color-primary);
        color: var(--color-white);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-large);
        box-shadow: var(--box-shadow-tile);
        cursor: pointer;
        z-index: 100;
        &:hover { background: var(--color-primary-dark); }
    }

    .agenda-drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 101;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        &.is-open {
            opacity: 1;
            pointer-events: auto;
        }
    }

    .agenda-drawer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 70dvh;
        background: var(--background-page);
        border-radius: var(--radius-base) var(--radius-base) 0 0;
        z-index: 102;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        &.is-open {
            transform: translateY(0);
            box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
        }

        .agenda-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-sm) var(--space-md);
            border-bottom: 1px solid var(--color-border);
            flex-shrink: 0;
            background: var(--background-page);
            border-radius: var(--radius-base) var(--radius-base) 0 0;
        }

        .agenda-drawer-title {
            font-size: var(--font-size-regular);
            font-weight: var(--font-weight-semi-bold);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-gray);
        }

        .agenda-drawer-body {
            flex: 1;
            overflow-y: auto;
            padding: var(--space-sm) 0;

            .events-agenda-month-header {
                font-size: var(--font-size-regular);
                font-weight: var(--font-weight-medium);
                text-transform: uppercase;
                color: var(--color-primary);
                padding: var(--space-sm) var(--space-md) var(--space-xs);
                border-top: 1px solid var(--color-border);
                margin-top: var(--space-xs);
                &:first-child { border-top: none; margin-top: 0; }
            }

            .events-agenda-group {
                display: flex;
                flex-direction: row;
                gap: var(--space-sm);
                padding: var(--space-xs) var(--space-md);
                position: relative;
                &:not(:first-of-type)::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: var(--space-md);
                    right: var(--space-md);
                    height: 1px;
                    background: var(--color-border);
                    opacity: 0.5;
                }
                &.events-agenda-group--past { opacity: 0.45; }
            }

            .events-agenda-left {
                display: flex;
                flex-direction: column;
                align-items: center;
                flex-shrink: 0;
                width: 2.5rem;
                padding-top: 0.1rem;
            }

            .events-agenda-dow {
                font-size: var(--font-size-regular);
                font-weight: var(--font-weight-semi-bold);
                text-transform: uppercase;
                letter-spacing: 0.06em;
                color: var(--color-gray);
                &:has(+.events-agenda-day--today) { color: var(--color-primary); }
            }

            .events-agenda-day {
                font-size: var(--font-size-large);
                font-weight: var(--font-weight-medium);
                line-height: 1.2;
                color: var(--color-gray);
                &.events-agenda-day--today span {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 1.75rem;
                    height: 1.75rem;
                    border-radius: var(--radius-pill);
                    background: var(--color-primary);
                    color: var(--color-white);
                    font-size: var(--font-size-large);
                }
            }

            .events-agenda-right {
                flex: 1;
                min-width: 0;
                display: flex;
                flex-direction: column;
                gap: var(--space-xs);
            }

            .events-agenda-cat-group { display: flex; flex-direction: column; }

            .events-agenda-cat-label {
                font-size: var(--font-size-small);
                font-weight: var(--font-weight-normal);
                text-transform: uppercase;
                letter-spacing: 0.08em;
                color: var(--color-muted);
                margin-bottom: 0.15rem;
            }

            .events-panel-item {
                display: flex;
                flex-direction: column;
                padding: 0.1rem 0;
                font-size: var(--font-size-body);
            }

            .events-panel-item-name {
                color: var(--color-gray);
                font-size: var(--font-size-regular);
            }

            .events-panel-item-entity {
                color: var(--color-muted);
                font-size: var(--font-size-small);
            }

            .events-panel-empty {
                color: var(--color-muted);
                padding: var(--space-xs) var(--space-md);
            }
        }
    }
}

/* ================================================================= */
/* #region SECTION CHART — MOBILE SCROLL */

@media only screen and (max-width: 65em) {
    .section-chart-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: inset -16px 0 12px -12px rgba(0, 0, 0, 0.04);
        transition: box-shadow 0.3s ease;
        &.is-scrolled-end { box-shadow: none; }

        .chart-container {
            min-width: 480px;
            flex: none;
        }
    }
}

/* #endregion SECTION CHART — MOBILE SCROLL */
/* ================================================================= */

/* #endregion LANDING — MOBILE */
/* ================================================================= */

/* ================================================================= */
/* #region PAGINATION — MOBILE */

@media only screen and (max-width: 65em) {
    .pagination-container .pagination-entity-count {
        display: none;
    }
}

/* #endregion PAGINATION — MOBILE */
/* ================================================================= */

/* ================================================================= */
/* #region RECORD PAGE — MOBILE */

@media only screen and (max-width: 65em) {
    body .page-container .page-container-body {
        .record-crumbs {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-sm) var(--space-md) 0;
            font-size: var(--font-size-small);
            background-color: var(--background-page);
            .record-crumb {
                color: var(--color-primary);
                text-decoration: none;
                &:hover { text-decoration: underline; }
            }
            .record-crumb--current {
                color: var(--color-black);
                font-weight: var(--font-weight-medium);
            }
            .record-crumb-sep {
                color: var(--color-gray);
                font-size: var(--font-size-small);
            }
        }
        .record-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: var(--space-sm) var(--space-md) var(--space-sm);
            gap: var(--space-sm);
            background-color: var(--background-page);
            .record-header-left {
                display: flex;
                align-items: center;
                gap: var(--space-sm);
                min-width: 0;
            }
            .record-header-avatar {
                width: 2.25rem;
                height: 2.25rem;
                border-radius: var(--radius-pill);
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-weight: var(--font-weight-semi-bold);
                font-size: var(--font-size-regular);
                flex-shrink: 0;
                line-height: 1;
            }
            .record-header-avatar--icon {
                background-color: var(--color-gray-light);
                border: 1px solid var(--color-border);
            }
            .record-header-meta {
                display: flex;
                flex-direction: column;
                gap: var(--space-xs);
                min-width: 0;
            }
            .record-header-name-row {
                display: flex;
                align-items: center;
                gap: var(--space-sm);
                flex-wrap: wrap;
            }
            .record-header-name {
                margin: 0;
                font-size: var(--font-size-large);
                font-weight: var(--font-weight-semi-bold);
                color: var(--color-black);
            }
            .record-header-badge {
                font-size: var(--font-size-badge);
                font-weight: var(--font-weight-medium);
                padding: var(--badge-padding);
                border-radius: var(--radius-pill);
                background: var(--background-badge);
                color: var(--badge-font-color--inactive);
                border: var(--badge-border);
                &.inactive { color: var(--badge-font-color--inactive); }
                &.success  { color: var(--badge-font-color--success); }
                &.alert    { color: var(--badge-font-color--alert); }
                &.primary  { color: var(--badge-font-color--primary); }
            }
            .record-header-sub {
                display: flex;
                align-items: center;
                font-size: var(--font-size-small);
                .color-muted { color: var(--color-gray); }
                .record-sub-sep { color: var(--color-gray); }
            }
            .record-header-right {
                display: flex;
                align-items: center;
                gap: var(--space-xs);
                flex-shrink: 0;
            }
        }
        .record-tab-bar {
            display: flex;
            border-bottom: 1px solid var(--color-border);
            border-top: 1px solid var(--color-border);
            padding: 0 var(--space-md);
            overflow-x: auto;
            overflow-y: hidden;
            background-color: var(--background-page);
            .record-tab {
                padding: var(--space-sm) var(--space-md);
                cursor: pointer;
                font-size: var(--font-size-regular);
                color: var(--color-gray);
                border-bottom: 3px solid transparent;
                margin-bottom: -1px;
                white-space: nowrap;
                &.active {
                    color: var(--color-primary);
                    border-bottom-color: var(--color-primary);
                    font-weight: var(--font-weight-medium);
                }
                &:hover:not(.active) { color: var(--color-primary); }
            }
        }
        .record-body {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
            padding: var(--space-md) var(--space-md) var(--space-3xl);
            flex: 1;
            overflow-y: auto;
            .landing-container {
                padding: 0;
                background: transparent;
                gap: var(--space-md);
            }
            /* Match desktop: stack bands with a gap so a fullwidth band
               (.record-band--full) is spaced from the band above it. Without
               this, mobile .record-columns is a plain block and the fullwidth
               band butts against the preceding band (0 gap). */
            .record-columns {
                display: flex;
                flex-direction: column;
                gap: var(--space-md);
            }
            .record-band {
                grid-template-columns: 1fr;
            }
            .record-side {
                display: none;
            }
            /* Panel section fills the tab body; detail slides over the list. */
            &:has(.landing-group--panel) {
                /* Root of the bounded-height chain: the mobile base .record-body
                   lacks min-height:0, so without this it grows to the full card
                   list height and the inner list never gets an overflow to scroll. */
                min-height: 0;
                padding: 0;
                gap: 0;
                overflow: hidden;
                .record-columns {
                    /* Mobile has no base flex on .record-columns (desktop does),
                       so declare it here or .record-band--full stays a block child
                       and never inherits the bounded height. */
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    min-height: 0;
                    padding: 0;
                    gap: 0;
                    overflow: hidden;
                }
                .record-band--full {
                    flex: 1;
                    min-height: 0;
                    display: flex;
                }
                .landing-group--panel {
                    /* Reset the base .landing-group card border/radius — the panel
                       fills the tab body edge-to-edge on mobile. */
                    border: none;
                    border-radius: 0;
                    flex: 1;
                    min-height: 0;
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                }
                .landing-group--panel .record-panel-view {
                    flex: 1;
                    min-height: 0;
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    grid-template-columns: none;
                    .card-list-panel-list {
                        /* Bounded flex column so the header stays pinned and only
                           the items scroll — mirrors the desktop panel layout. */
                        flex: 1;
                        min-height: 0;
                        display: flex;
                        flex-direction: column;
                        overflow: hidden;
                        border-right: none;
                        .landing-group-header {
                            flex-shrink: 0;
                        }
                        .card-list-panel-items {
                            flex: 1;
                            min-height: 0;
                            overflow-y: auto;
                            /* Clear the fixed comments FAB so it never covers
                               the last item. */
                            padding-bottom: var(--space-3xl);
                            &:has(.card-list-contact-card) {
                                background: var(--background-page-secondary);
                            }
                        }
                    }
                    .card-list-panel {
                        position: absolute;
                        inset: 0;
                        z-index: 2;
                        background: var(--background-page-secondary);
                        overflow-x: hidden;
                        transform: translateX(100%);
                        transition: transform 0.25s ease;
                        &.card-list-panel--open {
                            transform: translateX(0);
                        }
                    }
                    .card-list-panel-back {
                        /* Full-width header bar so the divider spans the panel. */
                        width: 100%;
                        display: flex;
                        flex-shrink: 0;
                        align-items: center;
                        justify-content: flex-start;
                        gap: var(--space-sm);
                        padding: var(--space-sm) var(--space-md);
                        font-size: var(--font-size-regular);
                        color: var(--color-primary);
                        cursor: pointer;
                        border-bottom: 1px solid var(--color-border);
                        background: var(--background-page);
                        i { font-size: var(--font-size-large); }
                    }
                    .card-list-panel-content {
                        /* Breathing room around the detail content, incl. a gap
                           below the back button. */
                        padding: var(--space-md);
                    }
                    .card-list-panel-placeholder {
                        display: none;
                    }
                }
            }
        }
    }
}

/* #endregion RECORD PAGE — MOBILE */
/* ================================================================= */

/* ================================================================= */
/* #region RECORD COMMENTS FAB — MOBILE */

@media only screen and (max-width: 65em) {
    .comments-fab {
        position: fixed;
        bottom: var(--space-lg);
        right: var(--space-lg);
        width: 3rem;
        height: 3rem;
        border-radius: var(--radius-pill);
        background: var(--color-primary);
        color: var(--color-white);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-large);
        box-shadow: var(--box-shadow-tile);
        cursor: pointer;
        z-index: 100;
        &:hover { background: var(--color-primary-dark); }
        /* Hidden while a panel detail view is slid over the list. */
        body:has(.card-list-panel--open) & {
            display: none;
        }
    }

    .comments-drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 101;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        &.is-open {
            opacity: 1;
            pointer-events: auto;
        }
    }

    .comments-drawer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 70dvh;
        background: var(--background-page);
        border-radius: var(--radius-base) var(--radius-base) 0 0;
        z-index: 102;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        &.is-open {
            transform: translateY(0);
            box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
        }

        .comments-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-sm) var(--space-md);
            border-bottom: 1px solid var(--color-border);
            flex-shrink: 0;
            background: var(--background-page);
            border-radius: var(--radius-base) var(--radius-base) 0 0;
        }

        .comments-drawer-title {
            font-size: var(--font-size-regular);
            font-weight: var(--font-weight-semi-bold);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-gray);
        }

        .comments-drawer-body {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            .note-cards-container {
                flex: 1;
                overflow-y: auto;
                padding: var(--space-sm) var(--space-md);
                gap: var(--space-sm);
            }
        }

        .comments-drawer-actions {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-sm) var(--space-md);
            border-bottom: 1px solid var(--color-border);
            flex-shrink: 0;
        }
    }
}

/* On desktop, the FAB and drawer are never shown */
@media only screen and (min-width: 65em) {
    .comments-fab,
    .comments-drawer,
    .comments-drawer-backdrop {
        display: none !important;
    }
}

/* #endregion RECORD COMMENTS FAB — MOBILE */
/* ================================================================= */

/* ================================================================= */
/* #region EXPLORER */

/* Secondary sidebar — scoped to explorer sections (files, notes).
   Desktop only. Below the breakpoint the sidebar is a 100dvw overlay on
   `5em 1fr`, so a fixed 30em track made the panel wider than the viewport
   instead of letting it take the space left beside the icon rail. This rule
   outweighs that one (0,5,0 vs 0,1,0), so it has to be gated on the width
   rather than relying on source order. */
@media only screen and (min-width: 65em) {
    .sidebar.has-secondary:has(.sidebar-secondary[data-section-id="files"]:not([style*="display"])),
    .sidebar.has-secondary:has(.sidebar-secondary[data-section-id="notes"]:not([style*="display"])) {
        grid-template-columns: 60px 30em;
    }
}

.sidebar-secondary[data-section-id="files"],
.sidebar-secondary[data-section-id="notes"] {
    overflow-y: auto;
    padding: 0 !important;
    /* No border-top here. Below the breakpoint the panel sits in row 2 beside
       the icon rail, and the rail's own border-top is what continues the line
       under the logo across the sidebar -- suppressing it on the panel left that
       line stopping partway. Desktop still gets border-top:none from
       `.sidebar.has-secondary .sidebar-secondary` (0,3,0), where the panel spans
       both rows and there is no logo row beside it to divide from. */
}

.explorer-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--space-md);
    gap: var(--space-sm);
    position: sticky;
    top: 0;
    background: var(--background-page);
    z-index: 1;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-sm);
}

.explorer-sidebar-title {
    font-size: 1.5em;
    font-weight: var(--font-weight-semi-bold);
    color:var(--color-black);
    margin: 0;
}

.explorer-sidebar-buttons {
    display: flex;
    gap: var(--space-xs);
    flex-shrink: 0;
}

/* Main content pane (page-container-body when explorer is active) */
.page-container-body.explorer-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.explorer-main--empty,
.explorer-main-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--color-muted);
}

.explorer-main-empty i {
    font-size: 2.5rem;
    opacity: 0.4;
}

/* Section */
.explorer-section {
    margin-bottom: var(--space-xs);
}

.explorer-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    cursor: pointer;
    user-select: none;
}

.explorer-section-header:hover {
    background: var(--background-table-row);
}

.explorer-section-chevron {
    font-size: 0.7rem;
    color: var(--color-muted);
    transition: transform 0.15s ease;
}

.explorer-section-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.explorer-section-rule {
    flex: 1;
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0;
}

.explorer-section-body {
    overflow: hidden;
}

.explorer-section.collapsed .explorer-section-chevron {
    transform: rotate(-90deg);
}

.explorer-section.collapsed .explorer-section-body {
    display: none;
}

/* Items (flat lists) */
.explorer-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
    cursor: pointer;
    border-radius: var(--radius-sm);
    margin: 0 var(--space-xs);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.explorer-item:hover {
    background: var(--background-table-row);
}

.explorer-item.active {
    background: var(--color-primary-light, #e8f0fe);
    color: var(--color-primary);
}

.explorer-item-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    font-size: 1rem;
}

.explorer-item-text {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex: 1;
    min-width: 0;
}

.explorer-item-name {
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.explorer-item-context {
    font-size: var(--font-size-xs);
    color: var(--color-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.explorer-item-context::before {
    content: " ";
    font-style: normal;
}

/* Tree nodes (expandable) */
.explorer-node-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
    cursor: pointer;
    border-radius: var(--radius-sm);
    margin: 0 var(--space-xs);
}

.explorer-node-row:hover {
    background: var(--background-table-row);
}

.explorer-node-menu {
    flex-shrink: 0;
    padding: 0.25em;
}

.explorer-node-row > .explorer-node-menu {
    margin-left: auto;
}

.explorer-leaf-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.explorer-leaf-star {
    font-size: var(--font-size-sm);
    color: goldenrod;
    padding: 0.25em;
}

.explorer-node-icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--color-folder);
}

.explorer-node-icon--shared {
    color: var(--color-primary);
}

/* Notes-style sections: chevron replaces folder icon; names styled as links */
.explorer-node-chevron {
    flex-shrink: 0;
    font-size: 0.65rem;
    color: var(--color-muted);
    transition: transform 0.15s ease;
    width: 0.75rem;
    text-align: center;
}

.explorer-node.open > .explorer-node-row > .explorer-node-chevron {
    transform: rotate(90deg);
}

.explorer-section--notes .explorer-item-name {
    color: var(--color-primary);
}

.explorer-section--notes .explorer-node-row .explorer-item-name {
    color: var(--color-secondary);
    font-weight: var(--font-weight-medium);
}

.explorer-node-children {
    display: none;
    padding-left: var(--space-lg);
}

.explorer-node.open > .explorer-node-children {
    display: block;
}

/* Leaf items inside tree */
.explorer-node-children .explorer-leaf {
    padding-left: var(--space-sm);
}

/* Preview pane */
.explorer-preview-content {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: var(--background-page-secondary);
}

.explorer-preview-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.explorer-preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.explorer-preview-unsupported {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    color: var(--color-muted);
    font-size: 3rem;
}

.explorer-preview-unsupported span {
    font-size: var(--font-size-base);
}

.explorer-preview-footer {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xs) var(--space-md);
    border-top: 1px solid var(--color-border);
    background: var(--background-page);
    flex-shrink: 0;
    flex-wrap: wrap;
    min-height: 2.5rem;
}

.explorer-preview-footer-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explorer-preview-meta {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.explorer-empty {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    padding: var(--space-xs) var(--space-md);
}

/* Note side sheet. The floating control and sheet header are chrome that only
   exists while the pane is too narrow for a 25% side column, so both are hidden
   by default and switched on in the block below. */
@media only screen {
    .note-side-actions,
    .note-side-sheet-header {
        display: none;
    }
}

/* Up to 90em, not 65em: the explorer sidebar already takes about 34em of the
   viewport (a 60px rail plus a 30em panel), so the note pane crosses into the
   desktop grid long before it can afford a 25% side column. At 1194px that
   column lands around 184px. Above 90em there is room for both and the desktop
   layout takes over. Everything here is scoped to .explorer-main, so record
   pages outside the explorer keep their own behaviour at every width. */
@media only screen and (max-width: 90em) {
    /* The sheet is absolutely positioned, so its containing block must not be the
       thing that scrolls, or it would scroll away with the note. The pane keeps
       its own height and hands the scrolling to .record-sections, which is what
       the desktop layout already does with its side column. The chain is spelled
       out to outrank the four-class base rule that sets padding and overflow. */
    body .page-container .page-container-body.explorer-main .record-container {
        /* Above 65em the desktop rule makes this a `1fr 25%` grid, so the stacked
           layout has to be restated rather than merely inherited. */
        display: flex;
        flex-direction: column;
        /* Declared here so the button's size, where it sits, and the room the
           note scrolls past it cannot drift apart. --note-pane-pad is the card's
           inset from the pane, and --note-fab-gap is the button's breathing room
           inside the card, measured from the card's edge rather than the pane's,
           so the button lands over the note instead of straddling its border. */
        --note-fab-size: 3.25em;
        --note-fab-gap: 1.25em;
        --note-pane-pad: 1.5em;
        position: relative;
        overflow: hidden;
        /* Moved onto .record-sections below: the sheet covers the padding box, so
           padding here would frame it and leak the note through the gap. */
        padding: 0;
        gap: 0;
    }
    body .page-container .page-container-body.explorer-main .record-container > .record-sections {
        flex: 1;
        /* Lets a flex child shrink below its content height. */
        min-height: 0;
        /* Not a scroller: the note's editor (.ql-editor) scrolls its own content,
           so an `auto` here only ever caught the few pixels the section rounds
           past this box, and spent a full-height scrollbar beside the editor's to
           do it. */
        overflow: hidden;
        /* Even on the bottom edge: the button floats over the note rather than
           sitting in a strip below it, so there is nothing to reserve here. The
           clearance lives inside the editor, where it scrolls with the text. */
        padding: var(--note-pane-pad);
        box-sizing: border-box;
    }
    /* The note's body is sized `height: 100%` of its section, which ignores the
       section header sitting above it, so it hangs past the section by exactly the
       header's height and the note runs off the bottom of the page. The section is
       a flex column, so the body should take what is left rather than all of it. */
    body .page-container .page-container-body.explorer-main .record-container > .record-sections > .section > .section-body:has(.markdown-body) {
        height: auto;
        flex: 1;
        min-height: 0;
    }
    /* The note scrolls under the button, so the clearance belongs here, inside the
       scrolling text: mid-scroll the content passes beneath the button, and at the
       end of the note the last line comes to rest clear of it. Derived from the
       button's own footprint so the two cannot drift apart. Doubles as a click
       target below the final paragraph, which is where you reach to carry on
       writing. */
    body .page-container .page-container-body.explorer-main .record-container > .record-sections .ql-editor {
        padding-bottom: calc(var(--note-fab-size) + var(--note-fab-gap) * 2);
    }
    body .page-container .page-container-body.explorer-main .record-container > .record-side-sections {
        position: absolute;
        inset: 0;
        z-index: 2;
        /* Overrides height:fit-content from the stacked mobile layout, which would
           collapse the sheet to its content instead of filling the pane, and the
           desktop max-height that goes with the side column. */
        height: auto;
        max-height: none;
        overflow-y: auto;
        /* No padding: it would become the sticky header's offset, so the header
           would stick 1.5em down and let content scroll through the gap above it.
           The inset lives on the visible section instead. */
        padding: 0;
        /* Spaces the header from the first section and the sections from each
           other. The outer inset is a margin on the sections themselves, since
           padding here would become the sticky header's offset. */
        gap: 1.5em;
        box-sizing: border-box;
        background: var(--background-page-secondary);
        transform: translateX(100%);
        transition: transform 0.25s ease;
    }
    body .page-container .page-container-body.explorer-main .record-container > .record-side-sections.note-side-sheet--open {
        transform: translateX(0);
    }
    body .page-container .page-container-body.explorer-main .record-container > .record-side-sections > .section {
        margin-inline: 1.5em;
        /* The stacked layout sets width:100%, which the inline margins would then
           add to, overflowing the sheet by exactly their width. Stretching to the
           line instead makes the margins part of the width rather than extra. */
        width: auto;
    }
    body .page-container .page-container-body.explorer-main .record-container > .record-side-sections > .section:last-child {
        margin-bottom: 1.5em;
    }
    /* The desktop side column caps each body and scrolls it on its own, which
       belongs to a column that is always on screen. In the sheet the sections
       size to their content and the sheet scrolls as one. */
    body .page-container .page-container-body.explorer-main .record-container > .record-side-sections > .section .section-body {
        max-height: none;
        overflow-y: visible;
    }
    /* The same cap on the note's own column, where it is what put a second
       scrollbar inside the one .record-sections already provides. The mobile base
       leaves these bodies unscrolled for exactly that reason; this restates it for
       the band where the desktop rule is still live. */
    body .page-container .page-container-body.explorer-main .record-container > .record-sections > .section .section-body {
        max-height: none;
        overflow-y: visible;
    }

    /* Floating control: the always-visible affordance that the side content
       exists. Below the sheet's z-index, so opening the sheet covers it and the
       back chevron is the single way out. */
    .note-side-actions {
        display: flex;
        position: absolute;
        right: calc(var(--note-pane-pad) + var(--note-fab-gap));
        bottom: calc(var(--note-pane-pad) + var(--note-fab-gap));
        z-index: 1;
    }
    /* A note with no side sections at all leaves this empty, and unplaced. */
    .note-side-actions:empty {
        display: none;
    }
    .note-side-action {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--note-fab-size);
        height: var(--note-fab-size);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-pill);
        background: var(--background-page);
        color: var(--color-primary);
        box-shadow: var(--box-shadow-tile);
        cursor: pointer;
    }
    .note-side-action i {
        font-size: var(--font-size-large);
    }

    /* Sticky so the way back stays reachable however far the sheet scrolls. The
       sheet carries no padding, so top:0 lands flush against its edge. The row is
       a button, so the declarations below are mostly resets: border-box because a
       button defaults to content-box and the flex stretch would then push its
       padding past the sheet, and font/text-align because a button inherits
       neither. */
    .note-side-sheet-header {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        position: sticky;
        top: 0;
        z-index: 1;
        flex-shrink: 0;
        box-sizing: border-box;
        padding: var(--space-sm) var(--space-md);
        border: none;
        border-bottom: 1px solid var(--color-border);
        background: var(--background-page);
        color: var(--color-primary);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }
    .note-side-sheet-header i {
        font-size: var(--font-size-large);
    }
    .note-side-sheet-title {
        font-size: var(--font-size-regular);
        font-weight: bold;
    }
}

/* #endregion EXPLORER */

/* #region INFO TOGGLE ROW */
.overview-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -1em;
    padding: 0.6em 1.25em;
    border-bottom: 1px solid var(--color-border);
}
.overview-toggle-row:last-child {
    border-bottom: none;
}
.overview-toggle-label {
    color: var(--color-gray);
    font-size: var(--font-size-sm);
}
.overview-toggle-indicator {
    font-size: 1.15rem;
    flex-shrink: 0;
    line-height: 1;
}
.overview-toggle-indicator--on {
    color: var(--color-primary);
}
.overview-toggle-indicator--off {
    color: var(--color-border);
}
/* #endregion INFO TOGGLE ROW */

/* #region LANDING GROUP WIDTH MODIFIERS */
.landing-group.landing-group--half {
    width: 50%;
    align-self: flex-start;
}
@media only screen and (max-width: 65em) {
    .landing-group.landing-group--half {
        width: 100%;
    }
}
/* #endregion LANDING GROUP WIDTH MODIFIERS */
/* ================================================================= */

/* ================================================================= */
/* #region Quill table overrides                                     */

/*
 * Our Quill editors carry the `markdown-body` class so notes render with the
 * GitHub styling, but github-markdown.css rewrites every table it finds into
 *
 *     display: block; width: max-content; max-width: 100%; overflow: auto;
 *
 * which is fine for static markdown and wrong for an editable table.
 * `display: block` means the <table> element stops being the table box — the
 * browser builds an anonymous one around the rows instead — so the width and
 * `table-layout` that quill-table-better writes onto the <table> apply to a
 * block wrapper and never reach the columns. The anonymous table falls back to
 * automatic layout, where the <col width> values the module stores are only
 * hints: a column can't go below its longest word plus the 6px/13px cell
 * padding, so dragging one narrow snaps it back and steals width from its
 * neighbours. Measured on a 668px table: a 60px drag rendered at 75px and
 * knocked the other two columns from 304px to 296px.
 *
 * Restoring a real table box with fixed layout makes the module's stored widths
 * authoritative, which is what the drag handles assume. Specificity has to beat
 * `.markdown-body table` because style.css is linked before github-markdown.css.
 */
.markdown-body.ql-container table {
    display: table;
    width: auto;
    max-width: none;
    overflow: visible;
    table-layout: fixed;
}

/*
 * github-markdown.css gives rows an opaque base background plus a stripe on the
 * even ones — the alternating look we want, so it stays. The one problem is that
 * those row backgrounds paint above the table's own, so a colour picked in the
 * table-properties dialog is invisible. Let a table carrying its own background
 * opt out of the striping instead, so an explicit choice wins where one was made
 * and every other table keeps striping. Cell and row colours from that dialog
 * land inline on the cell or row, so they paint above this either way.
 */
.markdown-body.ql-container table[style*="background"] tr,
.markdown-body.ql-container table[style*="background"] tr:nth-child(2n) {
    background-color: transparent;
}

/* #endregion */
/* ================================================================= */

/* ================================================================= */
/* #region Quill link editor                                         */

/*
 * The two-field link popup built by LinkEditor in quill-custom.js. It's a Quill
 * Tooltip subclass, so it keeps the `.ql-tooltip` class for that class's
 * positioning, box styling and hide-while-disabled rule, and everything here
 * either lays out the fields or undoes the parts of snow's own one-field link
 * tooltip that don't apply — the "Visit URL:" label it prints in ::before, the
 * display:none it puts on inputs until its own edit mode opens, and the nowrap
 * that assumes a single row. Selectors have to carry `.ql-snow .ql-tooltip` to
 * outweigh those.
 */
.ql-snow .ql-tooltip.ql-link-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm) 0.75em;
    white-space: normal;
    border-radius: var(--radius-sm);
    z-index: 5;
}

/* The rule above outweighs Quill's `.ql-snow .ql-hidden { display: none }`, which
   is how the popup is dismissed — so it has to be restated at this specificity. */
.ql-snow .ql-tooltip.ql-link-editor.ql-hidden {
    display: none;
}

.ql-snow .ql-tooltip.ql-link-editor::before {
    content: none;
    display: none;
}

.ql-snow .ql-tooltip.ql-link-editor .ql-link-editor-field {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    line-height: normal;
}

.ql-snow .ql-tooltip.ql-link-editor .ql-link-editor-field span {
    width: 3em;
    color: var(--color-gray);
    font-size: var(--font-size-input);
}

.ql-snow .ql-tooltip.ql-link-editor input[type="text"] {
    display: block;
    width: 20em;
    height: auto;
    padding: 0.3em 0.5em;
    border: var(--border-input);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--font-size-input);
}

.ql-snow .ql-tooltip.ql-link-editor input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
}

.ql-snow .ql-tooltip.ql-link-editor .ql-link-editor-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
}

/* No `display` on the buttons — the Remove button is shown and hidden with
   Quill's `.ql-hidden`, which these selectors would otherwise outweigh. */
.ql-snow .ql-tooltip.ql-link-editor .ql-link-editor-buttons button {
    padding: 0.3em 0.9em;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit;
    font-size: var(--font-size-input);
    cursor: pointer;
}

/* Tag name included so these outweigh the shared `... button` rule above rather
   than tying with it. */
.ql-snow .ql-tooltip.ql-link-editor button.ql-link-editor-remove {
    color: var(--color-danger);
}

.ql-snow .ql-tooltip.ql-link-editor button.ql-link-editor-remove:hover {
    border-color: var(--color-danger);
}

.ql-snow .ql-tooltip.ql-link-editor button.ql-link-editor-apply {
    background: var(--color-primary);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

.ql-snow .ql-tooltip.ql-link-editor button.ql-link-editor-apply:hover {
    background: var(--color-primary-dark);
}

/* #endregion */

/* ================================================================= */
/* #region Quill table menu                                          */

/*
 * A table menu dropdown flipped to open upward by flipTableMenuDropdowns in
 * quill-custom.js, when opening below would run past the editor's clipped
 * bottom. The module's own rule pins the list's bottom edge to the menu's and
 * pushes it down its own height; this pins the top edge instead and pulls it up.
 */
.ql-table-dropdown-list.ql-table-dropdown-up {
    top: 0;
    bottom: auto;
    transform: translateY(-100%);
}

/* #endregion */
/* ================================================================= */