@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";


a.link {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    &:hover {
        color:var(--color-primary-dark) !important;
        text-decoration: underline !important;
    }
}

/* ================================================================= */
/* #region ALERTS */

@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;
                font-size:1.2em;
                font-weight:500;
                span {
                    color: var(--color-gray);
                    font-size:1.15em;
                }
                img {
                    height: 1.5em;
                    width: 1.5em;
                }
            }
            .logo-banner {
                display:flex;
                align-items: center;
                justify-content: center;
                max-width:200px;
                img {
                    width:75%;
                    object-fit: contain;
                }
            }
        }
        .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, rgba(62, 127, 243, 1) 0%, rgba(32, 75, 193, 1) 50%, rgba(32, 75, 193, 1) 80%, rgba(62, 127, 243, 1) 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: #5173D6;
                    border: 3px solid #8397D8;
                    border-radius: 50px;
                    font-size:1rem;
                    padding-inline:1.75rem;
                    padding-block: 1rem;
                    font-weight:bold;
                }
            }
            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;
        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;
            }
        }
    }
    .link-button {
        background: var(--color-primary);
        color:white;
        padding:0.5em;
        padding-inline:0.5em;
        border-radius:5px;
        display:flex;
        flex-direction: row;
        align-items: center;
        gap:0.5em;
        text-decoration: none;
        justify-content: space-between;
        text-wrap:nowrap;
        overflow:hidden;
        text-overflow: ellipsis;
        i {
            font-size:1.25rem;
            margin-left:0.25em;
        }
        &:hover {
            background: var(--color-primary-dark);
        }
        &:first-child {
            margin-top:0.5em;
        }
        &:has(+.link-button) {
            margin-bottom:0.5em;
        }
        span {
            box-sizing: border-box;
            text-wrap:nowrap;
            width:100%;
            text-overflow: ellipsis;
            overflow:hidden;
            align-items: center;
            display:flex;
            gap:0.5em;
        }
    }
    button:disabled:not(.button-secondary, .button-border), button-dropdown[disabled="true"]:not(.button-secondary, .button-border) {
        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: 5px;
        color: var(--color-button-standard);
        &:hover {
            background-color: var(--background-button-standard-hover);
            border: var(--border-button-standard-hover);
            color: var(--color-button-standard-hover);
        }
        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;
        }
    }
    /* The quiet neutral button, ported from CoreSights, where this same styling
       carries the name `button-standard`. That name is already taken here by the
       filled primary button, so it lives on `button-secondary` instead. Every
       token below resolves to the identical value in both codebases, so this is
       the CoreSights appearance exactly and not an approximation of it. */
    .button-secondary {
        background-color: var(--background-page-secondary);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        color: var(--color-primary);
        padding: 0.5em 1em;
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
        &:hover {
            /* CoreSights names --color-gray-light here, but that token is #EEEEEE
               there and #a9a9a9 in SMD, so following the name would darken the
               button on hover instead of lifting it. --color-xlight is #e0e0e0 in
               both codebases and is the light fill SMD already uses elsewhere. */
            background-color: var(--color-xlight);
            border: 1px solid var(--color-gray);
            color: var(--color-primary-dark);
            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;
        }
        /* Loud variant, as in CoreSights: same shape, primary fill. */
        &.primary {
            background-color: var(--color-primary);
            color: white;
            &:hover {
                background-color: var(--color-primary-dark);
            }
        }
        /* Kept from the styling this replaced. The global button:disabled rule
           excludes .button-secondary, so without this the table multiselect
           actions, which are built disabled, would render as though enabled. */
        &:disabled, &[disabled="true"] {
            background:transparent;
            opacity: 0.5;
            border: 1px solid var(--color-xlight);
            color: var(--color-gray);
            &:hover {
                background:transparent;
                cursor:default;
                border:1px solid var(--color-xlight);
                box-shadow: none;
            }
        }
    }
    .button-border {
        background:transparent;
        border: 1px solid var(--color-primary);
        border-radius: 5px;
        color: var(--color-primary);
        i {
            font-size: var(--font-size-button-icon);
        }
        span {
            font-weight: bold;
            margin-inline-start: 0.25em;
            text-wrap:nowrap;
        }
        .bold {
            -webkit-text-stroke: 0.5px;
        }
        &:hover {
            border-color: var(--color-primary-xdark);
            color: var(--color-primary-xdark);
            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-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 var(--color-danger-dark);
        border-radius: 5px;
        color: var(--color-button-standard);
        &:hover {
            background-color: var(--color-danger-dark);
            border: 1px solid var(--color-danger-dark);
            color: var(--color-button-standard-hover);
        }
        i {
            font-size: var(--font-size-button-icon);
        }
        span {
            font-weight: 500;
            margin-inline-start: 0.5em;
            text-wrap: nowrap;
        }
        .bold {
            -webkit-text-stroke: 0.5px;
        }
    }
    .button-standard-success {
        background-color: var(--color-green);
        border: 1px solid var(--color-green-dark);
        border-radius: 5px;
        color: var(--color-button-standard);
        &:hover {
            background-color: var(--color-green-dark);
            border: 1px solid var(--color-green-dark);
            color: var(--color-button-standard-hover);
        }
        i {
            font-size: var(--font-size-button-icon);
        }
        span {
            font-weight: 500;
            margin-inline-start: 0.5em;
            text-wrap: nowrap;
        }
        .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;
        }
        &.white {
            color: var(--color-white);
            &:hover {
                color:white;
                background: var(--color-primary-xdark);
            }
        }
    }
    .button-none {
        padding:0;
        background:transparent;
        border:none;
        color: var(--color-gray);
        &:hover {
            cursor:default;
        }
    }
    .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: black;
            &:has(option[value=""]:checked:disabled) {
                -webkit-text-fill-color: rgba(108, 117, 125, 0.7);
            }
        }
        &::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: 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 {
        .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;
            }
        }
        .reviewer-group {
            padding:1em;
            margin-bottom:1em;
            position:relative;
            border-radius:5px;
            border: 1px solid var(--color-border);
            background: var(--color-xlight);
            &:first-of-type {
                margin-top:1em;
            }
            .reviewer-header {
                display:flex;
                justify-content:flex-end;
                align-items:center;
                min-height:1.5em;
                margin-bottom:0.25em;
            }
            .reviewer-order-controls {
                display:flex;
                gap:0.25em;
                align-items:center;
            }
            .reviewer-move {
                height:fit-content;
            }
            .reviewer-remove {
                color:red;
                height:fit-content;
            }
            .reviewer-fields {
                display:grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap:0.75em;
                .form-group {
                    width:100%;
                }
                .reviewer-value-group {
                    grid-column: 1 / -1;
                }
            }
        }
        .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 */
            }
            &:has(.title-block-group) {
                border-top: 1px solid var(--color-border);
                padding-top:1.5em;
            }
            /* 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;
               the button stretches to match the input's height, capped at one row. */
            &: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, since
                   .button-secondary pads 0.5em 1em. */
                .field-add {
                    aspect-ratio: 1;
                    box-sizing: border-box;
                    padding-inline: 0;
                    /* Capped rather than left to stretch: a multi-select grows as its
                       chips wrap, and aspect-ratio would widen the button to match.
                       The cap is the input's own single-row height, which is
                       min-height calc(1.25em + 1em) at font-size 1.25em. Stretch
                       still handles anything shorter, and a clamped button stays at
                       the top of the row, level with the input's first line. */
                    max-height: calc(1.25 * (1.25em + 1em));
                }
            }
            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);
                    }
                }
            }
            fieldset {
                display:flex;
                flex-direction: row;
                gap:1em;
                padding:0;
                border:none;
                label {
                    pointer-events: all;
                    margin:0;
                    font-size: var(--font-size-radio-icon);
                    &:hover {
                        cursor:pointer;
                    }
                }
            }
            &.validation-form-group {
                label::after{
                    content:'*';
                }
            }
            .ql-editor {
                min-height: 100px;
                max-height: 250px;
            }
            .ql-toolbar:has(+.ql-disabled) {
                display:none;
                +.ql-disabled {
                    border-top: 1px solid var(--color-border);
                    .ql-editor.ql-blank::before {
                        display:none;
                    }
                }
            }
            .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;
                }

                &.error {
                    border: 1px solid var(--color-danger);
                }
                &.valid {
                    border: 1px solid var(--color-green);
                }
                &[type='date'] {
                    appearance: none;
                }
            }
            /* The picker icon is left at its browser default. It used to be stretched to the full
               width of the field at opacity 0, which turned the whole input into one invisible
               button, so a click could never land in the MM/DD/YYYY segments and a date could only
               be picked, never typed. */
            video {
                /* display:none; */
                position:absolute;
                visibility: hidden;
            }
            textarea {
                min-height: 10em;
            }
            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 {
                margin-top: 0.5em;
                min-height: 1.5em;
            }
            .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)) {
                        &.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);
                        }
                    }
                    &: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-secondary); */
                    /* 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;
                            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 {
                    font-style:italic;
                    width:100%;
                    text-align: center;
                    background:var(--color-xlight);
                    color:var(--color-light);
                    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;
                    }
                }
            }
        }
        .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, select {
                                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%;
            }
        }
        .list-modal-toolbar {
            display:flex;
            justify-content:flex-end;
            padding-bottom:0.25em;
        }
    }
}

/* 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;
                    }
                    &::before {
                        top:50%;
                        transform:translateY(-50%);
                        left:0.5em;
                    }
                    .form-group {
                        padding:0;
                        input {
                            background: var(--background-page);
                        }
                        label {
                            background: var(--background-page);
                            background-clip: padding-box;
                        }
                    }
                    .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;
                    }
                    &::before {
                        top:50%;
                        transform:translateY(-50%);
                        left:0.5em;
                    }
                    .form-group {
                        padding:0;
                        input {
                            background: var(--background-page);
                        }
                        label {
                            background: var(--background-page);
                            background-clip: padding-box;
                        }
                    }
                    .split-tags:not(:empty) {
                        padding-top:0.5em;
                    }
                }
                .split-transaction-footer {
                    border:none;
                    border-top: 1px solid var(--color-light);
                    border-radius:0;
                }
            }
        }
    }
}

/* #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:100%;
            /* left:0; */
            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;
    }
}

@media only screen
and (min-width: 65em) {
    .sidebar-logo:hover {
        .domain-changer {
            position:absolute;
            left:100%;
            top:0;
        }
    }
}

/* #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); */
            .card-left {
                i {
                    /* background-color: var(--background-page-secondary); */
                }
            }
            .card-right {
                .card-heading-container {
                    .card-heading {
                        /* color:white; */
                    }
                }
                .card-info {
                    /* color:white; */
                }
            }
            box-shadow: inset -10px 0 var(--color-primary);
        }
    }
}

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





/* ================================================================= */
/* #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: bold;
                    }
                }
                .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;
                /* Uppy's Dashboard switches between its grid ("tile") and list
                   ("card") item layouts at a container-width breakpoint that it
                   tracks with a ResizeObserver. When the modal body's vertical
                   scrollbar appears it narrows the content by the scrollbar
                   width, flipping Uppy across that breakpoint; the new layout
                   changes the content height, which clears the overflow and
                   removes the scrollbar, which widens the content again — an
                   endless relayout loop that reads as the modal flashing on
                   short screens. Reserving the scrollbar gutter keeps the
                   content width constant whether or not the bar is shown, so
                   its presence can no longer trigger the view switch. */
                &:has(.uppy-container) {
                    scrollbar-gutter: stable;
                }
                .modal-prompt {
                    font-size: var(--font-size-modal-prompt);
                    font-style: italic;
                    text-wrap: wrap;
                }
            }
            .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;
                            }
                            /* Picker icon left at its browser default, so the field stays
                               typeable. See the note in the modal form group rule. */
                        }
                        .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:1.25em;
                    background-color: var(--background-button-modal);
                    border: var(--border-button-modal);
                    border-radius: 0.25em;
                    color: var(--color-button-modal);
                    font-weight: bold;
                    margin-block-end: 1em;
                    margin-block-start: 1em;
                    margin-inline-end: 1em;
                    text-transform: uppercase;
                    &: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);
                    }
                    &: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);
                    &:hover {
                        background-color: var(--color-xlight);
                    }
                    &:disabled {
                        opacity: 0.5;
                        cursor:default;
                    }
                }
            }
        }
        .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(.ql-container) {
                        grid-column: span 2;
                    }
                    padding-block-end:0;
                }
            }
        }
        .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;
            }
        }
        /* `{'type': 'row', 'fields': [...]}` — lays child fields side by side.
           Ported from CoreSights. The grid-column keeps a row spanning the full
           width in the two-column `.modal-dialog.medium` body; it is inert in
           the default single-column body. */
        .form-row {
            display: flex;
            flex-direction: row;
            gap: 1em;
            grid-column: span 2;
            .form-group {
                flex: 1;
                min-width: 0;
            }
        }
        /* `'half': True` on a field. Ported from CoreSights. Skipped for the
           grid-bodied .full/.medium dialogs, where the grid governs width. */
        .modal-dialog:not(.full):not(.medium) .modal-body .form-group.half-width {
            width: 50%;
        }
        /* .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;
                }
            }
        }
    }
    .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-list {
            box-sizing: border-box;
            background-color: var(--background-page-secondary);
            width:calc(30px + 3em);
            transition-duration: 0.25s;
            transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
            position:relative;
            border-right:1px solid var(--color-border);
            max-height:inherit;
            height:100%;
            padding-inline:0;
            padding-block:1em;
            display:flex;
            flex-direction: column;
            display:none;
            .containers-title {
                display:flex;
                align-items: center;
                justify-content: center;
                padding-bottom:1em;
                p {
                    margin:0;
                    font-size:1.25em;
                    font-weight:500;
                    display:none;
                }
                .expand-button {
                    border:none;
                    transition-duration: 0.1s;
                    z-index:2;
                    background: var(--background-page);
                    color: var(--color-primary);
                    border: 1px solid var(--color-border);
                    border-radius: 5px;
                    font-size:1.5em;
                    &::after {
                        font-family: 'Bootstrap-icons';
                        color: var(--color-primary);
                        content: '\F45F';
                    }
                    &:hover {
                        background: var(--color-xlight);
                    }
                }
            }
            .expanding-container {
                padding:1.5em;
                background: var(--background-page);
                border: 1px solid var(--color-border);
                border-radius: 5px;
                display:none;
                gap:0.5em;
                .expanding-container-title {
                    display:flex;
                    align-items: center;
                    justify-content: space-between;
                    padding:0;
                    .expanding-container-title-text {
                        font-weight:bold;
                        margin:0;
                        font-size:1.25em;
                    }
                    .expanding-container-button {
                        border:none;
                        background:transparent;
                        -webkit-text-stroke: 1px;
                        &::after {
                            content: '\F282';
                            font-family: 'Bootstrap-icons';
                        }
                    }
                }
                .overview-group {
                    display:flex;
                    flex-direction: column;
                    gap:0.25em;
                    &:has(+.overview-group) {
                        padding-bottom:0.5em;
                    }
                    .overview-value {
                        overflow-wrap: break-word;
                        word-break: break-word;
                        &: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;
                        }
                    }
                    &.rich-text {
                        .overview-value {
                            font-weight:normal;
                            border: 1px solid var(--color-border);
                            border-radius: 5px;
                            padding-inline:1.5em;
                            background: var(--background-page-secondary);
                        }
                    }
                }
            }
            .modal-gallery-list-files {
                height:100%;
                overflow:hidden;
                overflow-y:auto;
                scrollbar-width: thin;
                display:flex;
                flex-direction: column;
                gap:1.5em;
                .folder {
                    flex-direction: column;
                    /* font-size:1.15em; */
                    /* font-size:1.15em; */
                    .folder-label {
                        width:100%;
                        min-width:100%;
                        display:flex;
                        flex-direction:row;
                        overflow:hidden;
                        box-sizing:border-box;
                        gap:0.25em;
                        padding-block:calc(5px + 0.25em);
                        padding-inline:0.5em;
                        flex-wrap:nowrap;
                        position: relative;
                        span {
                            text-wrap:nowrap;
                            overflow:hidden;
                            text-overflow:ellipsis;
                        }
                        &:hover {
                            cursor:pointer;
                            background:var(--color-xlight);
                        }
                        &::after {
                            position:absolute;
                            right:0;
                            font-family: 'Bootstrap-icons';
                            content: '\F285';
                            padding-right:1em;
                        }
                        &::before {
                            font-family:'Bootstrap-icons';
                            color: var(--color-folder);
                            content: '\F3D7';
                        }
                    }
                    > .file {
                        padding-left:1.5em;
                        display:none;
                    }
                    > .folder {
                        padding-left:1.5em;
                        display:none;
                    }
                    &.open {
                        > .file {
                            display:flex;
                            button-dropdown {
                                align-self:right;
                            }
                        }
                        > .folder {
                            display:flex;

                        }
                        .folder-label::after {
                            content: '\F282';
                        }
                    }
                    &:has(.file) {
                        .folder-label::before {
                            content: '\F3D1';
                        }
                    }
                    &:has(.active) {
                        display:flex;
                    }
                }
                .file {
                    width:100%;
                    min-width:100%;
                    display:flex;
                    flex-direction: row;
                    align-items:center;
                    overflow:hidden;
                    box-sizing: border-box;
                    gap:0.25em;
                    padding-block:0.25em;
                    padding-inline:0.5em;
                    width:100%;
                    flex-wrap:nowrap;
                    position:relative;
                    /* font-size:1.15em; */
                    justify-content: space-between;
                    &:hover {
                        cursor:pointer;
                        background:var(--color-xlight);
                    }
                    &.active {
                        background: var(--color-primary);
                        display:flex;
                        i {
                            color:white;
                        }
                        span {
                            color:white;
                        }
                        &:hover {
                            background: var(--color-primary);
                        }
                        button-dropdown {
                            color:white;
                            i {
                                color:white;
                            }
                        }
                    }
                    .file-text-container {
                        display:flex;
                        align-items: center;
                        gap:0.5em;
                    }
                    span {
                        text-wrap:nowrap;
                        overflow:hidden;
                        text-overflow:ellipsis;
                    }
                    button-dropdown {
                        padding:5px;
                        &:hover {
                            background:transparent;
                        }
                    }
                }
            }
            .button-container {
                display: none;
            }
            .folder .file {
                font-size:1em;
            }
            &.expanded {
                padding:1em;
                width:100%;
                .containers-title {
                    justify-content: space-between;
                }
                .containers-title p {
                    display:block;
                }
                .expanding-container {
                    display:block;
                    >:not(.expanding-container-title) {
                        display:none;
                    }
                    &.expanded {
                        >:not(.expanding-container-title) {
                            display:flex;
                        }
                        .folder.open {
                            /* display:flex; */
                            flex-direction: column;
                        }
                        .expanding-container-title {
                            padding-bottom:1.5em;
                            .expanding-container-button::after {
                                content: '\F282';
                                font-family: 'Bootstrap-icons';
                            }
                        }
                    }
                }
                .button-container {
                    display:flex;
                    justify-content: end;
                    gap: 0.5em;
                }
            }
        }
        .modal-body {
            display: flex;
            flex: 1 1 100%;
            flex-direction: column;
            overflow:hidden;
            .modal-title-data {
                display:flex;
                padding:1em;
                color: var(--color-gray);
                gap:1em;
                border-top:1px solid var(--color-border);
                align-items:center;
                justify-content: space-between;
                .file-data {
                    display:flex;
                    gap:0.25em;
                }
                .meta-data-text {
                    display:flex;
                    align-items: center;
                    gap:1em;
                }
                .meta-data-functions {
                    display:flex;
                    align-items: center;
                    gap:1em;
                    .version-status {
                        font-size:2em;
                        &.current-version {
                            color:var(--color-green);
                        }
                    }
                }
            }

            .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;
                    .card.card-inactive {
                        background-color: var(--background-card-inactive);
                    }
                    .form-group {
                        padding-inline:1em;
                        &:first-child {
                            padding-top:1em;
                        }
                        .form-group {
                            padding:0;
                        }
                    }
                    .card.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);
                                    }
                                }
                            }
                        }
                    }
                    .card {
                        border: var(--border-modal-container);
                        border-radius: 0.25em;
                        color: var(--color-card-text);
                        display: flex;
                        flex-direction: column;
                        margin-block: 0.5em;
                        margin-inline: 1em;
                        .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;
                                .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;
                                    .card-field-row {
                                        display: flex;
                                        flex-direction: row;
                                        font-size: var(--font-size-card-fields);
                                        margin-block-start: 0.5em;
                                        i {
                                            margin-inline-end: 0.5em;
                                        }
                                    }
                                }
                            }
                        }
                        .card-body {
                            border-top: var(--border-modal-container);
                            padding-block: 0.5em;
                            padding-inline: 1em;
                        }
                        .card-field-container {
                            .card-field-row {
                                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 {
                            &: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);
                                }
                            }
                            }
                        }
                    }
                    .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[data-state="-2"] {
                        .active-review-files {
                            .card-heading-container {
                                &::after {
                                    content: "CANCELED";
                                } 
                            }
                        }
                    }
                    .active-review[data-state="-1"], .active-review-container[data-state="0"] {
                        .active-review-files {
                            .card-heading-container {
                                &::after {
                                    content: "DRAFT";
                                    color: var(--color-primary);
                                } 
                            }
                        }
                    }
                    .active-review[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);
                        }
                    }
                }
            }
            .modal-gallery-container {
                display:flex;
                flex: 1 1;
                box-sizing: border-box;
                overflow:hidden;
                position:relative;
                height: calc(97dvh - 36px);
                border-top: 1px solid var(--color-border);

                .modal-gallery-view {
                    height:100%;
                    width:100%;
                    background:transparent;
                    .file-content.display {
                        width:100%;
                        align-items: center;
                        display: flex;
                        flex-direction: column;
                        height: 100%;
                        justify-content: center;
                        border:none;
                        i {
                            color: var(--color-gray-light);
                            font-size: 2rem;
                        }
                        p {
                            color: var(--color-gray-light);
                        }
                    }
                    img.file-content {
                        object-fit:contain;
                        background-color:var(--color-gray-light);
                        height:auto;
                    }
                    video.file-content {
                        background-color:var(--color-gray);
                    }
                    .file-content:not(.display) {
                        display: none;
                    }
                }

                .gallery-content {
                    box-shadow: var(--box-shadow-modal-gallery);
                    display: flex;
                    flex: 1 1 0px;
                    flex-direction: column;
                    justify-content: space-between;
                    overflow: auto;
                    position:relative;
                    margin-right:1.25em;
                    .file-container {
                        align-items: stretch;
                        display: flex;
                        flex: 1 1 0px;
                        flex-direction: column;
                        justify-content: stretch;
                        overflow: auto;
                        .file-content.display {
                            align-items: center;
                            display: flex;
                            flex-direction: column;
                            height: 100%;
                            justify-content: center;
                            border:none;
                            i {
                                color: var(--color-gray-light);
                                font-size: 2rem;
                            }
                            p {
                                color: var(--color-gray-light);
                            }
                        }
                        img.file-content {
                            object-fit:contain;
                            background-color:var(--color-gray-light);
                            height:auto;
                        }
                        .file-content:not(.display) {
                            display: none;
                        }
                    }
                    .file-metadata {
                        align-items: center;
                        border-top: var(--border-file-metadata);
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        padding-inline: 1em;
                        padding-block: 0.5em;
                        .file-textdata {
                            display: flex;
                            flex: 1 1 0px;
                            flex-direction: row;
                            overflow: hidden;
                            span {
                                display: block;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                width: 100%;
                            }
                        }
                        .file-count-container{
                            align-items: center;
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                        }
                        .gallery-buttons {
                            align-items: center;
                            display: flex;
                            flex: 1 1 0px;
                            flex-direction: row;
                            justify-content: right;
                            select {
                                background-color: var(--background-input);
                                border: var(--border-input);
                                border-radius: 0.5em;
                                box-sizing: border-box;
                                cursor: pointer;
                                display: block;
                                font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                                padding: 0.5em;
                                text-align: left;
                                text-decoration: none;
                                max-width: 15ch;
                                &:hover {
                                    outline: none;
                                }
                                &:focus {
                                    outline: none;
                                }
                            }
                            .version-status{
                                font-size: var(--font-size-modal-version-status);
                                margin-inline-end: 0.25em;
                            }
                            .current-version {
                                color: var(--color-modal-version-current);
                            }
                            .superseded-version {
                                color: var(--color-modal-version-superseded);
                            }
                        }
                    }
                    .upload-data {
                        color: var(--color-gray-light);
                        font-size: 0.8rem;
                        margin-block-end: 0.5em;
                        margin-inline: 1em;
                        span {
                            margin-inline-end: 1em;
                        }
                    }
                }
                .gallery-navigation {
                    height:100%;
                    position:absolute;
                    right:0;
                    background: var(--background-modal);
                    transition-duration: 0.1s;
                    display:flex;
                    pointer-events:none;
                    &::before {
                        pointer-events:all;
                        display:flex;
                        align-items: center;
                        justify-content: center;
                        width:1em;
                        height:100%;
                        background: var(--background-modal);
                        box-shadow: -2.5px 0 3px 0 var(--color-shadow);
                        transition-duration: 0.1s;
                        color:var(--color-light);
                        font-size:1.25em;
                        font-family: 'Bootstrap-icons';
                        content: '\F22D';
                    }
                    &:hover::before {
                        cursor:pointer;
                        background: var(--color-xlight);
                        width:1.25em;
                        color:var(--color-primary);
                    }
                    &.expanded {
                        width: 26.25em;
                        &::before {
                            content: '\F231';
                            color: var(--color-primary);
                            border-right:1px solid var(--color-border);
                        }
                        &:hover::before {
                            width:1em;
                        }
                    }
                    .card {
                        display:none;
                    }
                }
                .card-container {
                    max-height:100%;
                    overflow-y:auto;
                    pointer-events:all;
                    width:0;
                    position:absolute;
                    right:0;
                    overflow-x:hidden;
                    .card-search {
                        position:sticky;
                        top:0;
                        width:100%;
                        border-style:none;
                        outline:none;
                        background:var(--background-modal);
                        border-bottom:1px solid var(--color-border);
                        border-left:1px solid var(--color-border);

                        padding:0.5em;
                    }
                    .card {
                        border: var(--border-modal-container);
                        border-radius: 0.25em;
                        color: var(--color-card-text);
                        display: flex;
                        flex-direction: column;
                        margin-block: 0.5em;
                        margin-inline: 1em;
                        .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;
                                .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;
                                    .card-field-row {
                                        display: flex;
                                        flex-direction: row;
                                        font-size: var(--font-size-card-fields);
                                        margin-block-start: 0.5em;
                                        i {
                                            margin-inline-end: 0.5em;
                                        }
                                    }
                                }
                            }
                        }
                        .card-body {
                            border-top: var(--border-modal-container);
                            padding-block: 0.5em;
                            padding-inline: 1em;
                        }
                        .card-field-container {
                            .card-field-row {
                                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 {
                            &: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);
                                }
                            }
                            }
                        }
                        &:hover {
                            cursor:pointer;
                            background: var(--color-primary);
                            color:white;
                            .card-heading-container {
                                .card-title-field-container {
                                    .card-title {
                                        color:white;
                                    }
                                }
                                .card-icon {
                                    i {
                                        color:white;
                                    }
                                }
                            }
                        }
                        &.active {
                            background: var(--color-primary-dark);
                            color:white;
                            .card-heading-container {
                                .card-title-field-container {
                                    .card-title {
                                        color:white;
                                    }
                                }
                            }
                        }
                    }
                    .file {
                        align-items: center;
                        color: var(--color-card-text);
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        padding-block: 0.25em;
                        /* width: 100%; */
                        .initials-icon {
                            display: none;
                        }
                        .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);
                                }
                            }
                        }
                        &:hover {
                            cursor:pointer;
                            background: var(--color-primary);
                            color:white;
                            .card-heading-container {
                                .card-title-field-container {
                                    .card-title {
                                        color:white;
                                    }
                                }
                                .card-icon {
                                    i {
                                        color:white;
                                    }
                                }
                            }
                            .file-button-container {
                                .button-icon {
                                    i {
                                        color:white;
                                    }
                                }
                            }
                        }
                        &.active {
                            background: var(--color-primary-dark);
                            color:white;
                            .card-heading-container {
                                .card-title-field-container {
                                    .card-title {
                                        color:white;
                                    }
                                }
                            }
                            .file-button-container {
                                .button-icon {
                                    i {
                                        color:white;
                                    }
                                }
                            }
                        }
                    }
                }
                .card-container.expanded {
                    width:25em;
                }
            }
        }


        .modal-footer {
            background: var(--background-modal);
            align-items: center;
            display: flex;
            flex-direction: row;
            justify-content: right;
            width: 100%;
            display:none;
            button {
                background-color: transparent;
                border: var(--border-button);
                color: var(--color-button);
                font-weight: bold;
                margin-block-end: 1em;
                margin-block-start: 1em;
                margin-inline-end: 1em;
                text-transform: uppercase;
                &:hover {
                    background-color: var(--background-button-hover);
                    border: var(--border-button-hover);
                    color: var(--color-button-hover);
                }
            }
            .modal-button-submit {
                background-color: var(--background-modal-submit);
            }
            .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);
                }
            }
        }
    }
}

@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-list {
                display:flex;
                &.expanded {
                    width:600px;
                    max-width:600px;
                }
            }
            .modal-body {
                padding:0;
                .modal-tab-container {
                    width: 30em;
                    .modal-tab-header{
                        .modal-button-container {
                            button {
                                span {
                                    display: block;
                                    margin-inline-start: 0.5em;
                                }
                            }
                        }
                    }
                }
                .modal-gallery-container {
                    display:flex;
                    flex: 1 1;
                    box-sizing: border-box;
                    overflow:hidden;
                    position:relative;
                    height: calc(97dvh - 36px);

                    .modal-gallery-view {
                        height:100%;
                        width:100%;
                        background:transparent;
                        .file-content.display {
                            width:100%;
                            align-items: center;
                            display: flex;
                            flex-direction: column;
                            height: 100%;
                            justify-content: center;
                            border:none;
                            i {
                                color: var(--color-gray-light);
                                font-size: 2rem;
                            }
                            p {
                                color: var(--color-gray-light);
                            }
                        }
                        img.file-content {
                            object-fit:contain;
                            background-color:var(--color-gray-light);
                            height:auto;
                        }
                        .file-content:not(.display) {
                            display: none;
                        }
                    }

                    .gallery-content {
                        box-shadow: var(--box-shadow-modal-gallery);
                        display: flex;
                        flex: 1 1 0px;
                        flex-direction: column;
                        justify-content: space-between;
                        overflow: auto;
                        position:relative;
                        margin-right:1.25em;
                        .file-container {
                            align-items: stretch;
                            display: flex;
                            flex: 1 1 0px;
                            flex-direction: column;
                            justify-content: stretch;
                            overflow: auto;
                            .file-content.display {
                                align-items: center;
                                display: flex;
                                flex-direction: column;
                                height: 100%;
                                justify-content: center;
                                border:none;
                                i {
                                    color: var(--color-gray-light);
                                    font-size: 2rem;
                                }
                                p {
                                    color: var(--color-gray-light);
                                }
                            }
                            img.file-content {
                                object-fit:contain;
                                background-color:var(--color-gray-light);
                                height:auto;
                            }
                            .file-content:not(.display) {
                                display: none;
                            }
                        }
                        .file-metadata {
                            align-items: center;
                            border-top: var(--border-file-metadata);
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            padding-inline: 1em;
                            padding-block: 0.5em;
                            .file-textdata {
                                display: flex;
                                flex: 1 1 0px;
                                flex-direction: row;
                                overflow: hidden;
                                span {
                                    display: block;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    width: 100%;
                                }
                            }
                            .file-count-container{
                                align-items: center;
                                display: flex;
                                flex-direction: row;
                                justify-content: center;
                            }
                            .gallery-buttons {
                                align-items: center;
                                display: flex;
                                flex: 1 1 0px;
                                flex-direction: row;
                                justify-content: right;
                                select {
                                    background-color: var(--background-input);
                                    border: var(--border-input);
                                    border-radius: 0.5em;
                                    box-sizing: border-box;
                                    cursor: pointer;
                                    display: block;
                                    font-family: 'Inter', 'Alata', Tahoma, 'Geneva', Verdana, sans-serif;
                                    padding: 0.5em;
                                    text-align: left;
                                    text-decoration: none;
                                    max-width: 15ch;
                                    &:hover {
                                        outline: none;
                                    }
                                    &:focus {
                                        outline: none;
                                    }
                                }
                                .version-status{
                                    font-size: var(--font-size-modal-version-status);
                                    margin-inline-end: 0.25em;
                                }
                                .current-version {
                                    color: var(--color-modal-version-current);
                                }
                                .superseded-version {
                                    color: var(--color-modal-version-superseded);
                                }
                            }
                        }
                        .upload-data {
                            color: var(--color-gray-light);
                            font-size: 0.8rem;
                            margin-block-end: 0.5em;
                            margin-inline: 1em;
                            span {
                                margin-inline-end: 1em;
                            }
                        }
                    }
                    .gallery-navigation {
                        height:100%;
                        position:absolute;
                        right:0;
                        background: var(--background-modal);
                        transition-duration: 0.1s;
                        display:flex;
                        pointer-events:none;
                        &::before {
                            pointer-events:all;
                            display:flex;
                            align-items: center;
                            justify-content: center;
                            width:1em;
                            height:100%;
                            background: var(--background-modal);
                            box-shadow: -2.5px 0 3px 0 var(--color-shadow);
                            transition-duration: 0.1s;
                            color:var(--color-light);
                            font-size:1.25em;
                            font-family: 'Bootstrap-icons';
                            content: '\F22D';
                        }
                        &:hover::before {
                            cursor:pointer;
                            background: var(--color-xlight);
                            width:1.25em;
                            color:var(--color-primary);
                        }
                        &.expanded {
                            width: 26.25em;
                            &::before {
                                content: '\F231';
                                color: var(--color-primary);
                                border-right:1px solid var(--color-border);
                            }
                            &:hover::before {
                                width:1em;
                            }
                        }
                        .card {
                            display:none;
                        }
                    }
                    .card-container {
                        max-height:100%;
                        overflow-y:auto;
                        pointer-events:all;
                        width:0;
                        position:absolute;
                        right:0;
                        overflow-x:hidden;
                        .card-search {
                            position:sticky;
                            top:0;
                            width:100%;
                            border-style:none;
                            outline:none;
                            background:var(--background-modal);
                            border-bottom:1px solid var(--color-border);
                            border-left:1px solid var(--color-border);

                            padding:0.5em;
                        }
                        .card {
                            border: var(--border-modal-container);
                            border-radius: 0.25em;
                            color: var(--color-card-text);
                            display: flex;
                            flex-direction: column;
                            margin-block: 0.5em;
                            margin-inline: 1em;
                            .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;
                                    .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;
                                        .card-field-row {
                                            display: flex;
                                            flex-direction: row;
                                            font-size: var(--font-size-card-fields);
                                            margin-block-start: 0.5em;
                                            i {
                                                margin-inline-end: 0.5em;
                                            }
                                        }
                                    }
                                }
                            }
                            .card-body {
                                border-top: var(--border-modal-container);
                                padding-block: 0.5em;
                                padding-inline: 1em;
                            }
                            .card-field-container {
                                .card-field-row {
                                    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 {
                                &: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);
                                    }
                                }
                                }
                            }
                            &:hover {
                                cursor:pointer;
                                background: var(--color-primary);
                                color:white;
                                .card-heading-container {
                                    .card-title-field-container {
                                        .card-title {
                                            color:white;
                                        }
                                    }
                                    .card-icon {
                                        i {
                                            color:white;
                                        }
                                    }
                                }
                            }
                            &.active {
                                background: var(--color-primary-dark);
                                color:white;
                                .card-heading-container {
                                    .card-title-field-container {
                                        .card-title {
                                            color:white;
                                        }
                                    }
                                }
                            }
                        }
                        .file {
                            align-items: center;
                            color: var(--color-card-text);
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            padding-block: 0.25em;
                            /* width: 100%; */
                            .initials-icon {
                                display: none;
                            }
                            .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);
                                    }
                                }
                            }
                            &:hover {
                                cursor:pointer;
                                background: var(--color-primary);
                                color:white;
                                .card-heading-container {
                                    .card-title-field-container {
                                        .card-title {
                                            color:white;
                                        }
                                    }
                                    .card-icon {
                                        i {
                                            color:white;
                                        }
                                    }
                                }
                                .file-button-container {
                                    .button-icon {
                                        i {
                                            color:white;
                                        }
                                    }
                                }
                            }
                            &.active {
                                background: var(--color-primary-dark);
                                color:white;
                                .card-heading-container {
                                    .card-title-field-container {
                                        .card-title {
                                            color:white;
                                        }
                                    }
                                }
                                .file-button-container {
                                    .button-icon {
                                        i {
                                            color:white;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .card-container.expanded {
                        width:25em;
                    }
                }
            }
        }
        .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: auto;
            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-reverse;
                            .heading-text-container {
                                display:flex;
                                align-items: center;
                                margin:0;
                                gap:0.5em;
                            }
                            .subheading-text-container {
                                margin:0;
                                font-weight:500;
                                color:var(--color-black);
                            }
                        }
                        .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 empty, since a gap is not drawn against an
                           element with no box. */
                        gap: var(--space-sm);
                        /* Inset carried over from the inline styles this replaced. It is what
                           holds the Filter control off the left edge on ordinary table pages —
                           the stray gap that prompted the cleanup came from the then-empty
                           .multiselect-options preceding the filters, not from this margin. */
                        margin-inline: 0.5em;
                    }
                    .result-container:not(:empty) {
                        display:flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: space-between;
                        .options-container:not(:empty) {
                            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;
                            align-items:center;
                            gap:0.5em;
                            margin-inline:0.5em;
                            &:not(:empty) {
                                padding-block:0.5em;
                            }
                            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);
                    }
                }
            }
            .page-container-body {
                padding-inline: 0em;
                overflow: auto;
                width:100%;
                height:100%;
                background:var(--background-page-secondary);
                display:flex;
                flex-direction: column;
                /* The panel view owns its own scrolling — the list column and the
                   detail pane each scroll independently, so the page body must not
                   scroll as a whole behind them. */
                &: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;
                        }
                        &:has(> .page-prompt) > .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;
                        gap: 0.75em;
                        padding: 1.5em 1.5em;
                        &:has(.card-list-contact-card) { padding: 0; }
                        .landing-group-items {
                            /* background: var(--background-page); */
                            /* border: 1px solid var(--color-border); */
                            border-radius: 0.5em;
                            overflow: hidden;
                            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 {
                                border-bottom: 1px solid var(--color-border);
                                padding-right: 0.75em;
                                &:last-child { border-bottom: none; }
                                &:hover { background: var(--background-page); }
                                .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 landing rule zeroes a divider's lead-in, which
                                       left the first group label pressed against the
                                       list header and the next one against the tile
                                       above it. Every inbox list gets the room back. */
                                    .landing-subgroup-divider {
                                        padding-top: var(--space-md);
                                        padding-bottom: var(--space-xs);
                                    }
                                }
                                .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);
                            }
                        }
                        &.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-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);
                                }
                            }
                        }
                        .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: 0.8rem;
                                color: var(--color-muted);
                                margin: var(--space-sm) 0 0 0;
                                border-top: 1px solid var(--color-border);
                                padding-top: var(--space-sm);
                            }
                            .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-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:0.35em;
                            padding-block:0.25em;
                            .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: 0.75em;
                            }
                        }
                        .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;
                                    /* The two-column grid assumes a label in the first
                                       column. A field that is the whole section (Notes,
                                       marked fullwidth and label-less) has no label to put
                                       there, so its value would be dealt the 120px column
                                       and wrap to a sliver. Give those the full width. */
                                    &.fullwidth,
                                    &:not(:has(label)) {
                                        grid-template-columns: 1fr;
                                        align-items: start;
                                    }
                                    &: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); }
                                            /* A model's own `status_color` vocabulary, so a
                                               record's status dot matches the badge on its
                                               tile in the list. Same variables as
                                               `.landing-tile-badge.blue` and friends. */
                                            &.blue     { background: var(--color-primary); }
                                            &.green    { background: var(--color-green); }
                                            &.red      { background: var(--color-danger); }
                                            &.orange   { background: var(--color-orange); }
                                            &.gray     { background: var(--color-gray); }
                                        }
                                        .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);
                                                }
                                            }
                                        }
                                    }

                                    /* A note field carries Quill output, where every line is its own <p> and a
                                       list is a top-level block. As a flex column the 0.5em gap above lands
                                       between every one of those lines, and flex items do not collapse their
                                       margins either, so the paragraph margins from the `.markdown` rules stack
                                       on top of it and the note reads as double spaced. Block layout restores
                                       collapsing and leaves the spacing to those rules alone. */
                                    &.markdown .overview-value {
                                        display: block;
                                    }
                                }
                            }
                        }
                        &.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-subgroup-divider {
                        display: flex;
                        align-items: center;
                        gap: 0.5em;
                        /* 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;
                        /* The menu has to land in the same column as the tile menus
                           below it. Those sit 9px in, from the padding-right on
                           `.section-body .landing-group-items .landing-tile-wrapper`,
                           and both menu buttons are the same size, so this side just
                           has to match that inset. 1em is 12px on this element, so
                           0.75em is the 9px it needs; measured, not assumed. */
                        padding-left: 1em;
                        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: 0.7rem;
                            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 where a tile's own menu sits. The box below
                           mirrors .landing-tile-actions, so the two menus are the
                           same size and their icons share a column. */
                        .landing-subgroup-divider-actions {
                            order: 1;
                            flex-shrink: 0;
                            padding: 0.25em;
                            line-height: 1;
                            font-size: 1rem;
                            border: none;
                            border-radius: 0.25em;
                            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;
                            }
                        }
                    }
                }
                .home-tile-container {
                    display: grid;
                    display:flex;
                    flex-direction: column;
                    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 40%; */
                        grid-template-columns: 1fr;
                    }
                    .tiles {
                        display:flex;
                        flex-direction: column;
                        gap:1.5em;
                    }
                    .side-tiles {
                        /* overflow:hidden;
                        overflow-y:auto; */
                        border-radius: 5px;
                        border: 1px solid var(--color-border);
                        background: var(--background-page);
                        padding:1.5em;
                        display:flex;
                        flex-direction: column;
                        /* height:fit-content; */
                        /* max-height:calc(100% - 3em); */
                        gap:0.5em;
                        .tile-section-title {
                            margin:0;
                            margin-bottom:0.5em;
                        }
                        .log-item {
                            display:grid;
                            grid-template-columns: 1fr auto;
                            gap:1.5em;
                            padding:0.5em;
                            a {
                                color: var(--color-primary);
                                text-decoration: none;
                                &:hover {
                                    color: var(--color-primary-dark);
                                    text-decoration: underline;
                                }
                            }
                            .log-time {
                                color: var(--color-black);
                            }
                            &:nth-child(odd) {
                                background:var(--background-page-secondary);
                                a {
                                    color: var(--color-primary-dark);
                                }
                            }
                        }
                    }
                    .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: 2px solid var(--color-border); */
                            .tile-section-title {
                                margin:0;
                            }
                            .tile-section-subtitle {
                                margin:0;
                                font-weight:400;
                            }
                            .title-section-filters {
                                display:flex;
                                flex-direction: row;
                                gap:0.5em;
                                .filter-stack {
                                    display:flex;
                                    align-items: center;
                                    gap:0.5em;
                                    input {
                                        background: var(--background-page-secondary);
                                        border: 1px solid var(--color-border);
                                        text-align: center;
                                        border-radius:5px;
                                        font-family: var(--font-family);
                                        font-size: var(--font-size-body);
                                        position: relative;
                                        /* Picker icon left at its browser default, so the field
                                           stays typeable. */
                                    }
                                }
                            }
                        }
                        .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;
                                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);
                                    }
                                    &.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;
                                    }
                                    .section-tile-subtitle {
                                        margin: 0;
                                        font-weight:500;
                                        color: var(--color-gray-light);
                                    }
                                }
                                &:has(.section-tile-title:empty) {
                                    &:has(.section-tile-subtitle:empty) {
                                        display: none;
                                    }
                                }
                            }
                            .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;
                                    &: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::before {
                                        color:var(--color-green);
                                    }
                                    &.yellow::before {
                                        color:var(--color-warning);
                                    }
                                    &.red::before {
                                        color:var(--color-danger);
                                    }
                                }
                            }
                            &[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);
                                }
                            } */
                        }
                    }
                    .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: 0.25em;
                        color: var(--color-tile);
                        display: flex;
                        justify-content: space-evenly;
                        padding: 1.5em;
                        text-decoration: none;
                        img.app-suite-icon {
                            max-width:100%;
                            width:40%;
                        }
                        &:hover {
                            background: var(--background-tile-hover);
                            border: var(--border-tile-hover);
                            color: var(--color-tile-hover);
                            cursor: pointer;
                        }
                        i {
                            font-size: var(--font-size-tile-icons);
                        }
                    } 
                }
                .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;
                }
                .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;
                    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:white;
                            color:var(--color-primary);
                            font-weight:bold;
                            margin-inline:0.25em;
                            border-radius:5px;
                            border:none;
                            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.select-cell {
                            padding:0.5em;
                            text-align:center;
                            width:20px;
                            input[type="checkbox"] {
                                height:1.15em;
                                width:1.15em;
                                &:hover {
                                    cursor:pointer;
                                }
                            }
                        }
                    }
                    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);
                        &: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;
                            &: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 {
                                i {
                                    color: var(--color-primary-light);
                                }
                                &:hover {
                                    i {
                                        color:var(--color-primary-dark);
                                    }
                                }
                            }
                            .gray-hover-icon {
                                &:hover {
                                    i {
                                        color:var(--color-primary-dark);
                                    }
                                }
                            }
                        }
                        td.heading-cell-icon {
                            /* padding:0.5em; */
                            text-align: center;
                        }
                        /* Three-dots row menu. Styled to sit as quietly in the
                           row as the .table-button icons it replaces, rather
                           than reading as a bordered button-icon. */
                        td.table-row-menu-cell {
                            padding: 0;
                            text-align: center;
                            .table-row-menu {
                                width: fit-content;
                                margin-inline: auto;
                                padding: 0.25em;
                                background-color: transparent;
                                border: none;
                                color: var(--color-gray-light);
                                &:hover {
                                    background-color: transparent;
                                    color: var(--color-primary);
                                }
                            }
                        }
                        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);
                        }
                    }
                    tr.major {
                        background:var(--color-primary-light);
                        color:white;
                        border-bottom: 2px solid var(--color-primary);
                        &:hover {
                            background: var(--color-primary-dark);
                        }
                        i {
                            color:white;
                        }
                        a.link {
                            color: white !important;
                        }
                    }
                    tr.minor {
                        background: var(--background-table-row-light);
                        &:hover {
                            background: var(--color-primary-dark);
                            color:white;
                            i {
                                color:white;
                            }
                            a.link {
                                color: white !important;
                            }
                        }
                    }
                    tr.inactive {
                        td:not(.heading-cell-icon) {
                            color: #aaaaaa;
                        }
                        /* opacity: 0.5; */
                    }
                    tbody tr:first-child {
                        border-top: 1px solid var(--color-border);
                    }
                    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);
                    }
                    tr:last-child {
                        border-bottom: 1px solid var(--color-border);
                    }
                }
                .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.5em;
                            padding-inline:1em;
                            text-align: right;
                            text-overflow: ellipsis;
                            text-transform: uppercase;
                            white-space: nowrap;
                        }
                        th:first-of-type {
                            min-width:20ch;
                        }
                    }
                    tr {
                        th, td {
                            font-size:0.65rem;
                            padding-inline:1em;
                            padding-block:0.25em;
                            margin-inline:0.25em;
                            min-width:10ch;
                            max-width:30ch;
                            overflow:hidden;
                            text-overflow:ellipsis;
                        }
                    }
                    tr.major {
                        background: var(--color-primary-light);
                        color:white;
                        border-bottom: 2px solid var(--color-primary);
                        &:hover {
                            border-bottom: 2px solid var(--color-primary);
                        }
                    }
                    tr.minor {
                        background: var(--color-xlight);
                        border-bottom: 2px solid var(--color-gray-light);
                        &:hover {
                            border-bottom: 2px solid var(--color-primary);
                        }
                    }
                    tr.normal {
                        background: var(--background-modal);
                        border-bottom: 2px solid var(--color-gray-light);
                        &:hover {
                            border-bottom: 2px solid var(--color-primary);
                        }
                    }
                    tr.highlight {
                        background: var(--color-primary);
                        color: white;
                        th, td {
                            padding-block:0.5em;
                            padding-inline:1em;
                        }
                    }
                    tr.hidden {
                        display:none;
                    }
                    td.right-align, th.right-align {
                        text-align:right;
                    }
                    tr:not(.highlight):hover {
                        background-color: var(--color-primary-light);
                        color:white;
                        cursor:default;
                    }
                }
                .record-container {
                    width:100%;
                    display:flex;
                    flex-direction: column;
                    padding:1.5em;
                    box-sizing:border-box;
                    gap:1.5em;
                    &:has(.markdown-body) {
                        height:unset;
                    }
                    .record-sections {
                        display:flex;
                        flex-direction: column;
                        gap:1.5em;
                        width:100%;
                        
                        .section {
                            max-width:100%;
                            width:100%;
                            border: 1px solid var(--color-border);
                            border-radius:5px;
                            /* padding:1.5em; */
                            box-sizing: border-box;
                            background:var(--background-page);
                            display:flex;
                            flex-direction: column;
                            
                            &:has(.ql-container) {
                                height:100%;
                                max-width:8.5in;
                                .section-header {
                                    border-bottom:1px solid var(--color-border);
                                }
                            }
                            &:empty {
                                display:none;
                            }
                            /* `width: 'half'` from Python. The column stays a
                               column — the section just stops short of the full
                               row rather than sharing it with its neighbour. */
                            &.half {
                                width: calc(50% - 0.75em);
                                align-self: flex-start;
                            }
                            .section-header {
                                padding:1.5em;
                                box-sizing: border-box;
                                width:100%;
                                display:flex;
                                justify-content: space-between;
                                align-items: center;
                                .header, .subtitle {
                                    padding:0;
                                    margin:0;
                                    display:flex;
                                    align-items: center;
                                    gap:0.5em;
                                }
                                .subtitle {
                                    font-weight:normal;
                                    color:var(--color-gray);
                                    font-size:1em;
                                }
                                &:has(.section-header-buttons:empty) {
                                    &:has(.header:empty) {
                                        &:not(:has(select)) {
                                            display:none;
                                        }
                                    }
                                }
                                .section-header-buttons {
                                    display:flex;
                                    align-items: center;
                                    gap:1em;
                                    .filter-stack {
                                        display:flex;
                                        flex-direction: row;
                                        gap:0.5em;
                                        align-items: center;
                                        input {
                                            border: 1px solid var(--color-border);
                                            border-radius: 5px;
                                            position: relative;
                                            text-align: center;
                                            font-family: var(--font-family);
                                            font-size: var(--font-size-body);
                                            background: var(--background-page-secondary);
                                            /* Picker icon left at its browser default, so the
                                               field stays typeable. */
                                        }
                                    }
                                }
                                .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.65em;
                                        p {
                                            margin:0;
                                        }
                                        &.gray {
                                            background: var(--color-xlight);
                                        }
                                        &.green {
                                            background: var(--color-green);
                                            color:white;
                                        }
                                        &.blue {
                                            background: var(--color-primary);
                                            color:white;
                                        }
                                        &.red {
                                            background: var(--color-danger);
                                            color:white;
                                        }
                                        &.orange {
                                            background: orange;
                                            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);
                                        }
                                        &.gray {
                                            color: var(--color-gray);
                                        }
                                    }
                                }
                            }
                            .section-body {
                                display:flex;
                                
                                &: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;
                                        }
                                    }
                                }
                                .metric-container {
                                    display:flex;
                                    flex-direction: column;
                                    padding-inline:1.5em;
                                    padding-bottom:1.5em;
                                    width:100%;
                                    box-sizing: border-box;
                                    gap:0.5em;
                                    .metric-line {
                                        display:flex;
                                        flex-direction: row;
                                        justify-content: space-between;
                                        p {
                                            margin:0;
                                        }
                                    }
                                }
                                /* The card itself is styled globally now - see #region CARD. */
                                .log-container {
                                    width: 100%;
                                    box-sizing: border-box;
                                    padding-inline:1.5em;
                                    padding-bottom:1.5em;
                                    display:flex;
                                    flex-direction: column;
                                    gap:0.5em;
                                    .log-item {
                                        display:flex;
                                        flex-direction: row;
                                        justify-content: space-between;
                                        gap:0.5em;
                                        .log-time {
                                            text-wrap:nowrap;
                                            color: var(--color-gray);
                                        }
                                    }
                                }
                                &:has(.overview-group) {
                                    display:grid;
                                    grid-template-columns: 1fr;
                                    gap:1em; 
                                    padding-inline:1.5em;
                                    padding-bottom:1.5em;
                                }
                                &:has(.review-group) {
                                    display:flex;
                                    flex-direction: column;
                                }
                                /* Stacks versions rather than laying them out in a row.
                                   Not covered by :has(.review-group) above, since a version
                                   with no comments never renders a review group. */
                                &:has(.version-block) {
                                    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);
                                            }
                                        }
                                    }
                                    /* Picker icon left at its browser default, so the field stays
                                       typeable. */
                                }
                                .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:white;
                                            color:var(--color-primary);
                                            font-weight:bold;
                                            margin-inline:0.25em;
                                            border-radius:5px;
                                            border:none;
                                            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) {
                                    /* The parent .section already sizes to its content and caps
                                       at the viewport, so it owns scroll containment. A manual
                                       max-height here fought that: with only a row or two the
                                       table's natural height (a fractional sticky header plus
                                       rows) landed a few px above the calc'd cap, forcing a
                                       phantom scrollbar over otherwise-empty space. Let the flex
                                       column size the wrapper; min-height:0 lets it shrink and
                                       scroll internally when the section is viewport-capped.
                                       max-height:none is set explicitly to override the
                                       less-specific .table-wrapper:has(+.pagination-container)
                                       rule elsewhere in this sheet, which would otherwise
                                       reintroduce the cap (and the phantom scrollbar). */
                                    max-height:none;
                                    min-height:0;
                                    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 {
                                        overflow-wrap: break-word;
                                        word-break: break-word;
                                        &: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;
                                    box-sizing: border-box;
                                    display:none;
                                    &:not(:empty) {
                                        padding-bottom:1.5em;
                                        display:flex;
                                        flex-direction: column;
                                        /* No gap on purpose. The space between entries comes from
                                           the preceding bubble's padding instead, because the
                                           connector line is drawn inside that bubble's box. A flex
                                           gap sits outside the box, so the line stopped short of
                                           the next icon by exactly the gap. */
                                    }
                                    .bubble {
                                        display:flex;
                                        flex-direction: row;
                                        width:100%;
                                        box-sizing: border-box;
                                        overflow:hidden;
                                        .bubble-icon {
                                            z-index:2;
                                            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;
                                            box-sizing: border-box;
                                            overflow:hidden;
                                            .bubble-title {
                                                font-weight:500;
                                                margin:0;
                                            }
                                            .bubble-subtitle {
                                                color:var(--color-gray);
                                                margin:0;
                                                display:flex;
                                                align-items: center;
                                                justify-content:space-between;
                                                position:relative;
                                                span {
                                                    background:var(--background-page);
                                                    z-index:1;
                                                    display:flex;
                                                    flex-direction: row;
                                                    gap:0.5em;
                                                    align-items: center;
                                                    &:first-child {
                                                        padding-right:1em;
                                                    }
                                                    &:last-child {
                                                        padding-left:1em;
                                                    }
                                                }
                                                .blue {
                                                    color: var(--color-primary);
                                                    font-weight:bold;
                                                }
                                                .green {
                                                    color: green;
                                                    font-weight:bold;
                                                }
                                                .red {
                                                    color: red;
                                                    font-weight:bold;
                                                }
                                                .gray {
                                                    font-weight:bold;
                                                }
                                                /* Goldenrod rather than the pill's true yellow.
                                                   This is text on the page background, where
                                                   yellow does not carry enough contrast to read. */
                                                .yellow {
                                                    color: var(--color-goldenrod);
                                                    font-weight:bold;
                                                }
                                                &::after {
                                                    position:absolute;
                                                    width:100%;
                                                    content:'';
                                                    border-top: 1px solid var(--color-border);
                                                    box-sizing: border-box;
                                                    top:50%;
                                                    transform:translateY(-50%);
                                                }
                                            }
                                            .bubble-attachments {
                                                width:100%;
                                                /* Same tray as .active-review-files: a tinted,
                                                   bordered container holding the files in a grid.
                                                   Column count widens per breakpoint further down,
                                                   matching that section. */
                                                display:grid;
                                                grid-template-columns: 1fr;
                                                gap:0.5em;
                                                border-radius:5px;
                                                box-sizing:border-box;
                                                &:not(:empty) {
                                                    padding:0.5em;
                                                    margin-top:0.5em;
                                                    border: 1px solid var(--color-border);
                                                    background: var(--background-page-secondary);
                                                }
                                                .attachment {
                                                    border-radius:5px;
                                                    overflow:hidden;
                                                    width:100%;
                                                    /* Lifts the tile off the tinted tray, the way
                                                       .card does inside the active review files. */
                                                    background: var(--background-page);
                                                    display:flex;
                                                    .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;
                                                        overflow:hidden;
                                                        text-wrap:nowrap;
                                                        text-overflow: ellipsis;
                                                        span {
                                                            max-width:100%;
                                                            overflow:hidden;
                                                            text-wrap:nowrap;
                                                            text-overflow: ellipsis;
                                                        }
                                                    }
                                                    .attachment-button {
                                                        border:none;
                                                        background: transparent;
                                                        text-align: center;
                                                        vertical-align: center;
                                                    }
                                                    .attachment-button:hover {
                                                        background:var(--color-primary);
                                                        color:white;
                                                    }

                                                }
                                                .attachment:hover {
                                                    cursor:pointer;
                                                    background: var(--color-xlight);
                                                    /* box-shadow: var(--box-shadow-card-hover); */
                                                }
                                            }
                                            .bubble-body {
                                                /* border-left: 2px solid var(--color-border); */
                                                /* background:var(--background-tile); */
                                                &:has(.markdown-body:not(:empty)) {
                                                    
                                                    /* padding-inline:1.5em; */
                                                    margin-block:0.5em;
                                                    display:flex;
                                                    flex-direction: row;
                                                    min-width:100%;
                                                    /* Keeps the quote glyph off the first word. */
                                                    gap:0.4em;
                                                    &::before {
                                                        content: '\F6B0';
                                                        font-family: 'Bootstrap-icons';
                                                        font-size:1.1rem;
                                                        height:fit-content;
                                                        transform:rotate(180deg);
                                                        /* Decoration, so it should not compete with
                                                           the comment text for attention. */
                                                        color:var(--color-border);
                                                    }
                                                    /* &::after {
                                                        content: '\F6B0';
                                                        font-family: 'Bootstrap-icons';
                                                        font-size:1.2rem;
                                                        transform: rotate(180deg);
                                                        height:fit-content;
                                                    } */
                                                }
                                                .markdown-body {
                                                    background: transparent;
                                                    font-size:var(--font-size-body);
                                                    font-family: var(--font-family);
                                                    /* margin-block:0.5em; */
                                                    * {
                                                        margin-bottom:0;
                                                    }
                                                }
                                            }
                                            .bubble-buttons {
                                                /* The buttons are built as adjacent spans with no
                                                   whitespace between them, so the row has to supply
                                                   the separation or they read as one word. */
                                                display:flex;
                                                flex-wrap:wrap;
                                                align-items: center;
                                                gap:var(--space-sm);
                                                .bubble-button {
                                                    color:var(--color-primary);
                                                    &:hover {
                                                        color: var(--color-primary-dark);
                                                        text-decoration: underline;
                                                        cursor:pointer;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    .bubble:has(.bubble-icon i) {
                                        .bubble-icon {
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            background: var(--color-3);
                                            &::after { content: none; }
                                            i { color: white; font-size: 0.9em; }
                                        }
                                    }
                                    .bubble-content {
                                            .ai-criteria-line {
                                                color: var(--color-gray);
                                                margin: 0 0 0.6em;
                                            }
                                            .ai-status-message {
                                                color: var(--color-gray);
                                                margin: 0.25em 0 0;
                                            }
                                            .ai-retry-btn {
                                                margin-top: 0.75em;
                                                padding: 0.3em 0.85em;
                                                border-radius: 4px;
                                                border: 1px solid #d93025;
                                                background: transparent;
                                                color: #d93025;
                                                cursor: pointer;
                                                display: inline-flex;
                                                align-items: center;
                                                gap: 0.35em;
                                                font-weight: 500;
                                                transition: background 0.12s, color 0.12s;
                                                &:hover {
                                                    background: #d93025;
                                                    color: white;
                                                }
                                            }
                                            .ai-severity-groups {
                                                display: flex;
                                                flex-direction: column;
                                                gap: 0.5em;
                                                margin-top: 0.25em;
                                                .ai-severity-group {
                                                    border: 1px solid var(--color-border);
                                                    border-radius: 6px;
                                                    overflow: hidden;
                                                    .ai-severity-header {
                                                        display: flex;
                                                        align-items: center;
                                                        gap: 0.5em;
                                                        padding: 0.45em 0.75em;
                                                        background: #f5f5f5;
                                                        &:hover { background: var(--color-xlight); }
                                                        cursor: pointer;
                                                        user-select: none;
                                                        .ai-dot {
                                                            width: 12px;
                                                            height: 12px;
                                                            border-radius: 50%;
                                                            flex-shrink: 0;
                                                            border: 2px solid white;
                                                            &.ai-dot-red    { background: #d93025; }
                                                            &.ai-dot-orange { background: #f9ab00; }
                                                            &.ai-dot-gray   { background: #80868b; }
                                                            &.ai-dot-green  { background: #1e8e3e; }
                                                            &.ai-dot-blue   { background: #1967d2; }
                                                        }
                                                        .ai-severity-label {
                                                            font-weight: 700;
                                                            letter-spacing: 0.04em;
                                                        }
                                                        .ai-severity-count {
                                                            margin-left: auto;
                                                            color: var(--color-gray);
                                                        }
                                                        .ai-chevron {
                                                            color: var(--color-gray);
                                                            transition: transform 0.15s;
                                                            &.rotated { transform: rotate(-90deg); }
                                                        }
                                                    }
                                                    .ai-finding-rows {
                                                        .ai-finding-row {
                                                            display: flex;
                                                            align-items: flex-start;
                                                            gap: 1em;
                                                            padding: 0.6em 0.75em;
                                                            border-top: 1px solid var(--color-border);
                                                            .ai-finding-body {
                                                                flex: 1;
                                                                display: flex;
                                                                flex-direction: column;
                                                                gap: 0.2em;
                                                                .ai-finding-text { line-height: 1.45; }
                                                                .ai-page-ref { color: var(--color-gray); }
                                                            }
                                                            .ai-verdict-area {
                                                                flex-shrink: 0;
                                                                display: flex;
                                                                align-items: center;
                                                                gap: 0.4em;
                                                                .ai-verdict-btn {
                                                                    padding: 0.2em 0.65em;
                                                                    border-radius: 4px;
                                                                    border: 1px solid var(--color-border);
                                                                    background: var(--background-page);
                                                                    cursor: pointer;
                                                                    white-space: nowrap;
                                                                    display: flex;
                                                                    align-items: center;
                                                                    gap: 0.3em;
                                                                    &.ignore { border-color: var(--color-gray); color: var(--color-gray); }
                                                                    &.ignore.active { background: var(--color-gray); color: white; }
                                                                    &:not(.active):hover { background: var(--color-xlight); }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    .bubble:has(+.bubble) {
                                        position: relative;
                                        /* Carries the whole gap between entries now that the
                                           group has none, so the connector below spans it. */
                                        padding-bottom:var(--space-md);
                                        &::after {
                                            content: '';
                                            height:100%;
                                            position:absolute;
                                            border-left: 2px solid var(--color-border);
                                            z-index:1;
                                            left:17px;
                                        }
                                    }
                                    /* The connector is drawn down the middle of the icon column,
                                       so a bubble with no icon has nothing to join and the line
                                       reads as stray. The padding above still applies, keeping
                                       the spacing between entries. */
                                    .bubble:not(:has(.bubble-icon))::after {
                                        content: none;
                                    }
                                }
                                .review-group:has(+.review-group) {
                                    /* border-bottom: 2px solid var(--color-xlight); */
                                    /* margin-bottom:1em; */
                                    position:relative;
                                    &::after {
                                        content: '';
                                        height:100%;
                                        position:absolute;
                                        border-left:2px solid var(--color-border);
                                        left:35px;
                                        top:0;
                                    }
                                }
                                /* One block per version in the shop drawing list. The rule
                                   sits between blocks only, so the newest version is not
                                   preceded by a stray divider. */
                                .version-block {
                                    display:flex;
                                    flex-direction: column;
                                    gap:1em;
                                    padding-inline:1.5em;
                                    padding-bottom:1.5em;
                                    box-sizing: border-box;
                                    /* Fills the section regardless of whether the body ends
                                       up flex or one of its grid variants. */
                                    width:100%;
                                    grid-column: 1 / -1;
                                    flex-shrink:0;
                                    & + .version-block {
                                        border-top:2px solid var(--color-border);
                                        padding-top:1.5em;
                                    }
                                    .version-header, .submittal-header {
                                        display:flex;
                                        flex-direction: row;
                                        align-items: center;
                                        justify-content: space-between;
                                        gap:0.5em;
                                        flex-wrap:wrap;
                                    }
                                    .version-heading, .submittal-heading {
                                        display:flex;
                                        flex-direction: row;
                                        align-items: center;
                                        gap:0.5em;
                                        flex-wrap:wrap;
                                        min-width:0;
                                    }
                                    /* Three tiers nest inside each other here: version, then
                                       submittal, then the step entries in its trail. They differ
                                       by size and weight so the nesting is readable without
                                       relying on the containers alone. */
                                    .version-title {
                                        margin:0;
                                        font-weight:600;
                                        font-size:1.15em;
                                    }
                                    .submittal-title {
                                        margin:0;
                                        font-weight:600;
                                    }
                                    /* The shared .status-pill rule is scoped to
                                       .section-header .left-header, so it never reached the pills
                                       in here and they rendered as bare text. This is the badge
                                       treatment for a version's and a submittal's state, colors
                                       included. */
                                    .version-heading .status-pill,
                                    .submittal-heading .status-pill {
                                        margin:0;
                                        padding-block:0.35em;
                                        padding-inline:0.75em;
                                        border-radius:999px;
                                        /* Deliberately rem, not em. The shared rule's 0.65em
                                           works because its pill sits inside an h2, but this one
                                           sits in a plain div, where the same value lands at
                                           roughly 10px and uppercase becomes unreadable. */
                                        font-size:0.75rem;
                                        font-weight:600;
                                        text-transform:uppercase;
                                        letter-spacing:0.03em;
                                        p {
                                            margin:0;
                                        }
                                        &.gray {
                                            background: var(--color-xlight);
                                        }
                                        &.green {
                                            background: var(--color-green);
                                            color:white;
                                        }
                                        &.blue {
                                            background: var(--color-primary);
                                            color:white;
                                        }
                                        &.red {
                                            background: var(--color-danger);
                                            color:white;
                                        }
                                        &.orange {
                                            background: orange;
                                            color:white;
                                        }
                                        /* The only pill that keeps dark text. White on yellow
                                           fails to read at this size. */
                                        &.yellow {
                                            background: var(--color-gold);
                                            color:var(--color-black);
                                        }
                                    }
                                    .submittal-byline {
                                        color:var(--color-gray);
                                    }
                                    /* Buttons for a version or submittal sit together on
                                       the right of their own header row. */
                                    .version-buttons, .submittal-buttons, .submittal-file-buttons {
                                        display:flex;
                                        flex-direction: row;
                                        align-items: center;
                                        gap:0.25em;
                                        flex-shrink:0;
                                    }
                                    .version-info {
                                        display:grid;
                                        grid-template-columns: repeat(3, minmax(0, 1fr));
                                        gap:1em;
                                    }
                                    .submittal-list {
                                        display:flex;
                                        flex-direction: column;
                                        gap:1em;
                                    }
                                    .submittal-empty, .submittal-no-files {
                                        color:var(--color-gray);
                                        margin:0;
                                    }
                                    .submittal-box {
                                        display:flex;
                                        flex-direction: column;
                                        gap:0.75em;
                                        border:1px solid var(--color-border);
                                        border-radius:5px;
                                        padding:1em;
                                        box-sizing: border-box;
                                        background:var(--background-page);
                                        /* A draft reads as unfinished rather than shipped. */
                                        &[data-state="Working"] {
                                            border-style:dashed;
                                        }
                                        .submittal-files {
                                            display:grid;
                                            grid-template-columns: 1fr;
                                            gap:0.5em;
                                            .card {
                                                margin-block:0;
                                                border-radius:5px;
                                                /* The whole card opens the gallery, so it reads
                                                   as clickable. Matches .attachment:hover on a
                                                   step's files. */
                                                &:hover {
                                                    cursor:pointer;
                                                    background: var(--color-xlight);
                                                }
                                            }
                                        }
                                        /* The thread is already padded by .review-group, so
                                           it does not need the box padding doubled up. Reply
                                           groups are excluded because they carry review-group
                                           too, and this rule outweighs their indent otherwise. */
                                        .review-group:not(.nested-review-group) {
                                            padding-inline:0;
                                            &:not(:empty) {
                                                padding-bottom:0;
                                            }
                                        }
                                        /* Steps hide their icon, so no connector is ever drawn
                                           between them here. The tighter spacing that fix needs
                                           would only squash the trail, so this keeps the group
                                           gap and the bubble padding the trail was built with. */
                                        .review-group:not(:empty) {
                                            gap:var(--space-md);
                                        }
                                        .bubble:has(+.bubble) {
                                            padding-bottom:1.5em;
                                        }
                                    }
                                }
                                /* Replies sit indented beneath the comment they answer. */
                                .review-group .nested-review-group {
                                    grid-column: unset;
                                    padding-right:0;
                                    padding-left:3em;
                                    &:not(:empty) {
                                        padding-bottom:0;
                                    }
                                }
                                .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 {
                                        border-radius:5px;
                                        overflow:hidden;
                                        max-height:100%;
                                        overflow-y:auto;
                                        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) {
                                            padding:0.5em;
                                            margin-top:0.5em;
                                            border: 1px solid var(--color-border);
                                            background: var(--background-page-secondary);
                                        }
                                        .card-heading-container {
                                            &::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: 1;
                                            } 
                                        }
                                    }
                                    .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-card-fields);
                                                        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 {
                                                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[data-state="-2"] {
                                    .active-review-files {
                                        .card-heading-container {
                                            &::after {
                                                content: "CANCELED";
                                            } 
                                        }
                                    }
                                }
                                .active-review[data-state="-1"], .active-review[data-state="0"] {
                                    .active-review-files {
                                        .card-heading-container {
                                            &::after {
                                                content: "DRAFT";
                                                color: var(--color-primary);
                                            } 
                                        }
                                    }
                                }
                                .active-review[data-state="1"] {
                                    .active-review-files {
                                        .card-heading-container {
                                            &::after {
                                                content: "REJECTED";
                                                color: var(--color-danger);
                                            } 
                                        }
                                    }
                                }
                                .active-review:has(+.review-group:not(:empty)) {
                                    margin-bottom:1em;
                                }

                                .main-transaction-container {
                                    display:flex;
                                    width:100%;
                                    gap:1em;
                                    .form-group {
                                        width:100%;
                                    }
                                }
                                .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) {
                                    height:100%;
                                    flex-direction: column;
                                }
                                .ql-toolbar {
                                    border:none;
                                    width:100%;
                                    position: sticky;
                                    top:0;
                                    background: white;
                                    display:flex;
                                    align-items: center;
                                    z-index:1;
                                    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-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';
                                        }
                                    }
                                }
                                .empty-message {
                                    text-align: center;
                                    color: var(--color-gray);
                                    font-style:italic;
                                }
                            }
                            &: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-block: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%;
                            }
                            &[data-type="card"] {
                                .section-body {
                                    display:flex;
                                    flex-direction: column;
                                    align-items: center;
                                    box-sizing: border-box;
                                    padding:1.5em;
                                    .card {
                                        box-sizing: border-box;
                                        width:100%;
                                    }
                                }
                            }
                        }
                    }
                    .record-side-sections {
                        overflow-y:auto;
                        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;
                            padding:1.5em;
                            /* min-height:100px; */
                            width:100%;
                            display:flex;
                            flex-direction: column;
                            box-sizing: border-box;
                            &:empty {
                                display:none;
                            }
                            .section-header {
                                width:100%;
                                display:flex;
                                height:2em;
                                justify-content: space-between;
                                align-items: center;
                                margin-bottom:0.5em;
                                .header {
                                    padding:0;
                                    margin:0;
                                    color: var(--color-primary);
                                    display:flex;
                                    align-items: center;
                                    gap:0.25em;
                                    &:hover {
                                        cursor:pointer;
                                        color: var(--color-primary-dark);
                                    }
                                    &::before {
                                        font-family:'Bootstrap-icons';
                                        content:'\F282';
                                    }
                                }
                                .section-header-buttons {
                                    display:flex;
                                    align-items: center;
                                    gap:1em;
                                }
                            }
                            .section-body {
                                display:flex;
                                flex-direction: column;
                                column-gap: 1em;
                                .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;
                                        overflow-wrap: break-word;
                                        word-break: break-word;
                                    }
                                }
                                .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;
                                            }
                                        }
                                        
                                    }
                                    /* Attachments closing out a scope, after its
                                       comments. A labelled list rather than chips: the
                                       heading names the group the way the mockup does,
                                       and rows keep long filenames readable. */
                                    .scope-of-work-files {
                                        display: flex;
                                        flex-direction: column;
                                        gap: var(--space-xs);
                                        margin-top: 1em;
                                        /* Same treatment as the panel view's
                                           .landing-subgroup-divider: a short primary-
                                           coloured label with the rule running inline
                                           from it to the edge, rather than a full-width
                                           underline beneath it. */
                                        .scope-of-work-files-heading {
                                            display: flex;
                                            align-items: center;
                                            gap: 0.5em;
                                            margin: 0 0 0.25em;
                                            font-size: var(--font-size-regular);
                                            font-weight: 600;
                                            color: var(--color-primary);
                                            white-space: nowrap;
                                            &::after {
                                                content: '';
                                                flex: 1;
                                                height: 1px;
                                                background: var(--color-border);
                                            }
                                        }
                                        /* Full-width rows: the whole row is the hit
                                           target, so the hover state reads as "this row
                                           is clickable" rather than just the filename.
                                           Negative inline margin lets the hover band run
                                           past the text to the container edges while the
                                           text stays aligned with everything above it. */
                                        .scope-of-work-file {
                                            display: flex;
                                            flex-direction: row;
                                            align-items: center;
                                            /* Name left, row menu right. */
                                            justify-content: space-between;
                                            gap: var(--space-sm);
                                            text-align: left;
                                            width: auto;
                                            padding: 0.25em 0.75em;
                                            margin-inline: -0.75em;
                                            border: none;
                                            border-radius: var(--radius-sm);
                                            background: none;
                                            color: var(--color-black);
                                            font-size: var(--font-size-regular);
                                            cursor: pointer;
                                            .scope-of-work-file-text {
                                                display: flex;
                                                flex-direction: row;
                                                align-items: center;
                                                gap: var(--space-sm);
                                                /* min-width lets the name truncate rather
                                                   than push the menu off the row. */
                                                min-width: 0;
                                            }
                                            .scope-of-work-file-name {
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                                white-space: nowrap;
                                            }
                                            /* Always visible. Revealing it on hover hides the
                                               only route to Download and Delete from anyone
                                               not using a mouse — on touch there is no hover
                                               at all — and gives no sign the actions exist.
                                               Muted instead, so it stays quiet without
                                               disappearing. */
                                            button-dropdown {
                                                flex-shrink: 0;
                                                color: var(--color-gray);
                                                &:hover {
                                                    color: var(--color-black);
                                                }
                                            }
                                            /* --background-page, not the secondary: the
                                               surrounding .scope-of-work-container is
                                               already secondary, so hovering with that
                                               painted the row the exact colour it sits on
                                               and read as no hover at all. */
                                            &:hover {
                                                background: var(--background-page);
                                                .scope-of-work-file-name {
                                                    color: var(--color-primary);
                                                }
                                            }
                                        }
                                    }
                                    .markdown-body {
                                        background: transparent;
                                        font-size:var(--font-size-body);
                                        margin-block:0.5em;
                                        * {
                                            margin-bottom:0;
                                        }
                                    }
                                }
                                .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-icon {
                                                height:35px;
                                                width:35px;
                                                aspect-ratio: 1;
                                                background-color: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;
                                                max-width:calc(100% - 35px - 0.5em);
                                                .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-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) {
                                            padding-bottom:0.5em;
                                            box-shadow: inset 1.5em 0 0 0 red;
                                        }
                                        .bubble:last-child {
                                            padding-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;
                                        &.h1 {
                                            font-weight:bold;
                                            padding-left:1em;
                                        }
                                        &.h2 {
                                            padding-left:2em;
                                        }
                                        &.h3 {
                                            padding-left:3em;
                                        }
                                        &.h4 {
                                            padding-left:4em;
                                        }
                                        &:hover {
                                            background: var(--color-xlight);
                                            cursor:pointer;
                                        }
                                    }
                                }
                                .empty-message {
                                    text-align: center;
                                    color: var(--color-gray);
                                    font-style:italic;
                                }
                                .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;
                }
            }
        }
    }
}



/* 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);
                                    }
                                }
                                /* Comment attachments follow the active review files. The full
                                   path is spelled out to match the base rule's specificity,
                                   which is ten classes deep. */
                                .review-group .bubble .bubble-content .bubble-attachments {
                                    grid-template-columns: repeat(2, 1fr);
                                }
                            }
                        }
                    }
                }
                .main-table {
                    display: table;
                    tbody {
                        display:table-row-group;
                    }
                    thead {
                        display:table-header-group;
                    }
                    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;
                            }
                            /* Pairs with the width="1%" the shrink heading option puts
                               on the th: the column settles on its longest value. The
                               35ch cap stays, so a pathological value truncates instead
                               of pushing the table into horizontal scroll. */
                            &[data-shrink="true"] {
                                width:1%;
                                white-space:nowrap;
                                overflow:hidden;
                                text-overflow:ellipsis;
                            }
                            /* The counterpart to shrink. With every other column pinned
                               to its content, this is the only one still asking for
                               width, so the leftover all lands here. The cap is raised
                               rather than removed: an uncapped cell takes its full
                               single-line width as its preferred size, which is what
                               pushed the table into horizontal scroll. */
                            &[data-grow="true"] {
                                max-width:60ch;
                            }
                            &.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 {
            width: 100%;
            .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;
                    &:has(.side-tiles) {
                        grid-template-columns: 1fr 40%;
                    }
                    .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;
                                .section-tile-title-container {
                                    display: none;
                                }
                            }
                        }
                    }
                    .home-tile {
                        width: 15em;
                    }
                    .side-tiles {
                        overflow:hidden;
                        overflow-y:auto;
                        .log-item {
                            display:grid;
                            grid-template-columns: 1fr auto;
                        }
                    }
                    
                }
                .tile-container {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                }
                .select-domain-container {
                    flex-direction: row;
                    flex-wrap: wrap;
                    .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:hidden;
                    box-sizing:border-box;
                    
                    &:has(.markdown-body) {
                        height:100%;
                    }
                    .record-sections {
                        display:flex;
                        flex-direction: column;
                        gap:1.5em;
                        max-height:100%;
                        overflow-y:auto;
                        .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);
                                    }
                                }
                                /* Comment attachments follow the active review files. The full
                                   path is spelled out to match the base rule's specificity,
                                   which is ten classes deep. */
                                .review-group .bubble .bubble-content .bubble-attachments {
                                    grid-template-columns: repeat(3, 1fr);
                                }
                            }
                        }
                    }
                    .record-side-sections {
                        max-height:inherit;
                        overflow-y:auto;
                        .section {
                            .section-body {
                                max-height:100%;
                                overflow-y:auto;
                            }
                        }
                    }
                    &:not(:has(.record-side-sections)) {
                        grid-template-columns: 1fr;
                    }
                }
                .main-table {
                    display: table;
                    tbody {
                        display:table-row-group;
                    }
                    thead {
                        display:table-header-group;
                    }
                    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;
                            }
                            /* Pairs with the width="1%" the shrink heading option puts
                               on the th: the column settles on its longest value. The
                               35ch cap stays, so a pathological value truncates instead
                               of pushing the table into horizontal scroll. */
                            &[data-shrink="true"] {
                                width:1%;
                                white-space:nowrap;
                                overflow:hidden;
                                text-overflow:ellipsis;
                            }
                            /* The counterpart to shrink. With every other column pinned
                               to its content, this is the only one still asking for
                               width, so the leftover all lands here. The cap is raised
                               rather than removed: an uncapped cell takes its full
                               single-line width as its preferred size, which is what
                               pushed the table into horizontal scroll. */
                            &[data-grow="true"] {
                                max-width:60ch;
                            }
                            &.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;
                        }
                    }
                }
            }
        }
    }
}

/* Landscape tablets clear 65em and get the desktop table, but not the room for
   every column. A heading sent with tablet: False drops out between 65em and
   90em. The chain matches the desktop rule above so this one wins on order. */
@media only screen
and (min-width: 65em)
and (max-width: 90em) {
    body .page-container .page-container-body .main-table tr {
        th[data-tablet="false"],
        td[data-tablet="false"] {
            display:none;
        }
    }
}

/* #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:1.2em;
        .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;
                }
            }
            /* Picker icon left at its browser default, so the field stays typeable. */
        }
        .form-dropdown {
            border-radius: 5px;
            border: 1px solid var(--color-primary);
            padding:0.25em;
            padding-inline:0.5em;
            display:flex;
            flex-direction:column;
            position:relative;
            display:inline-block;
            .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:0.75em;
                    background:var(--color-xlight);
                    color:var(--color-primary-dark);
                    justify-content: center;
                    align-items: center;
                    font-weight:bold;
                }
                i {
                    font-size: 1.25em;
                }
            }
            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;
                gap:0.5em;
                font-size: var(--font-size-filter);
                max-height:500px;
                overflow:hidden;
                .form-body {
                    max-height: 350px;
                    display:flex;
                    gap:0.5em;
                    flex-direction: column;
                    overflow-y:auto;
                    /* Section heading inside the dropdown, separating the filters
                       from the sort selects. Same treatment
                       .landing-subgroup-divider gives a month heading: a short
                       primary label with a hairline running out to the edge. */
                    .filter-divider {
                        align-items: center;
                        display: flex;
                        gap: 0.5em;
                    }
                    /* The rule is drawn as ::after so a divider with no label still
                       renders a full-width line. */
                    .filter-divider::after {
                        background: var(--color-border);
                        content: '';
                        flex: 1;
                        height: 1px;
                    }
                    .filter-divider-label {
                        color: var(--color-primary);
                        font-size: 0.7rem;
                        font-weight: 600;
                        letter-spacing: 0.04em;
                        text-transform: uppercase;
                        white-space: nowrap;
                    }
                    /* The leading divider sits flush against the dropdown's own
                       padding; later ones get air above so they read as a break
                       between groups rather than a caption on the field above. */
                    .filter-divider:not(:first-child) {
                        margin-top: 0.5em;
                    }
                }
                &.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: calc(var(--font-size-filter) * 1.1);
                        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:1em;
        .form-dropdown {
            /* padding:0.5em; */
            padding-inline:0.75em;
        }
    }
}


/* Full Screen */
@media only screen
and (min-width: 65em) {
    .filter-container {
        font-size:1em;
        .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 {
        box-sizing: border-box;
        display:grid;
        display:none;
        &.mobile-open {
            display:grid;
        }
        grid-template-rows: 5em minmax(0, 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);
                }
            }
            img {
                height:100%;
            }
            .logo-icon {
                display:none;
            }
            .logo-banner {
                display:flex;
                box-sizing: border-box;
                max-height:100%;
                height:100%;
                overflow:hidden;
                align-items: center;
                /* font-weight:bold; */
                font-size: large;
                img {
                    display:flex;
                    box-sizing: border-box;
                    max-height:100%;
                }
            }
        }
        
        .sidebar-icons {
            display:flex;
            flex-direction: column;
            height:100%;
            border-right:1px solid var(--color-border);
            /* border-right:0; */
            padding:0.5em;
            gap:0.25em;
            border-top:1px solid var(--color-border);
            box-sizing: border-box;
            justify-content: space-between;
            &.span {
                grid-column: span 2;
                .sidebar-icon {
                    text-align: left;
                }
            }
            .sidebar-icon {
                text-align: center;
                vertical-align: middle;
                padding:0.5em;
                font-size:1.75em;
                border-radius: 5px;
                -webkit-text-stroke: 0.25px;
                color: var(--color-sidebar-text);
                text-decoration: none;
                &:hover {
                    background:var(--color-primary-xlight);
                    cursor:pointer;
                    color:var(--color-primary);
                }
                &.active {
                    color: var(--color-primary);
                    background:var(--color-primary-xlight);
                }
                &::after {
                    content: attr(data-mobile-title);
                }
            }
            /* The rail is the height of the viewport, so once there are more
               icons than fit, the top group scrolls on its own rather than
               pushing the bottom group off screen. min-height:0 is what lets a
               flex child shrink below its content height and actually scroll. */
            .sidebar-icons-top {
                gap:0.25em;
                display:flex;
                flex-direction: column;
                min-height:0;
                overflow-y:auto;
                overscroll-behavior: contain;
                /* The bar stays visible, since it only appears once the icons
                   overflow and that is exactly when the cue is needed. It is
                   narrowed because the default Windows bar is wide enough to
                   squeeze the icons in a rail this narrow. */
                scrollbar-width: thin;
                scrollbar-color: var(--color-gray-light) transparent;
                &::-webkit-scrollbar {
                    width: 6px;
                }
                &::-webkit-scrollbar-track {
                    background: transparent;
                }
                &::-webkit-scrollbar-thumb {
                    background: var(--color-gray-light);
                    border-radius: 3px;
                }
            }
            .sidebar-icons-bottom {
                gap:0.25em;
                display:flex;
                flex-direction: column;
                flex-shrink:0;
            }
        }
        .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;
                }
            }
        }
    }

    .article-sidebar {
        display:none;
        &.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:5em;
        width:fit-content;
        max-width:5em;
        position:relative;
        .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;
            }
            .logo-banner {
                display:none;
            }
            &:hover {
                cursor:pointer;
                background: var(--color-xlight);
            }
        }
        .sidebar-icons {
            border-right:none;
            border-top:1px solid transparent;
            &.span {
                grid-column: span 1;
                .sidebar-icon {
                    text-align: center;
                }
            }

            .sidebar-icon {
                text-align: center;
                &::after {
                    display:none;
                }
            }
        }
        .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;
                    }
                }
            }
        }
    }
}

/* #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;
            }
        }

        /* The note sections on records and in the inbox reuse these rules, but their
           value is Quill output rather than prose: every line is its own <p> and a
           list is a top-level block, so the 0.25em on both sides of a paragraph, the
           1em under the last paragraph before a list, and the UA margin the list
           itself still carries (only its padding is set below) stack into what reads
           as double spacing. Scoped to `.overview-group` so the markdown page
           containers keep the prose spacing. These carry an extra class and come
           after the rules they replace, so they win on specificity and on order. */
        &.overview-group {
            p {
                margin-block: 0.25em;
            }
            /* getSemanticHTML() serializes a blank line as `<p></p>` with no <br>,
               and an empty paragraph establishes no line box, so it renders at zero
               height. The blank lines an author typed used to show only because the
               margins around the neighbouring blocks happened to fill the space. A
               zero-width no-break space gives the paragraph a line of its own, so it
               renders as the break it was. The trailing one Quill leaves on the end
               of a note is skipped, so a note does not close on a blank line. */
            p:empty:not(:last-child)::before {
                content: '\feff';
            }
            ol, ul {
                margin-block: 0.25em;
            }
        }

        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 */
/* ================================================================= */


@media print {
    .sidebar {
        display:none;
    }
    .table-options {
        display:none;
    }
    a.button-return {
        display:none;
    }
    .heading-search-links {
        display:none;
    }
    .page-container-body {
        width:100%;
        .nested-table {
            width: 100%;
        }
    }
    th {
        text-align:left;
    }
    .record-tabs {
        display:none;
    }
    .section-header {
        display:none;
    }
    table {
        width:100%;
        border-spacing:0;
        tr.major {
            font-weight:bold;
            border-bottom:1px solid black;
            td {
                border-bottom: 1px solid black;
                border-top: 1px solid black;
            }
        }
        td[data-align='right'], th[data-align="right"] {
            text-align: right;
        }
        td:has(+td) {
            border-right:1px solid black;
        }
        th, td {
            padding-inline: 5px;
        }
    }
}


/* ================================================================= */
/* #region EXPLORER (NOTES + FILES) */
/* Ported/adapted from CoreSights. The secondary-sidebar tree + inline
   preview shared by the notes and files explorers. Driven purely by
   content presence (:not(:empty)) so every other page is unaffected. */

@media only screen {
    /* Secondary sidebar panel — hidden until populated by buildExplorer */
    .sidebar-secondary[data-section-id="notes"],
    .sidebar-secondary[data-section-id="files"] {
        display: none;
        box-sizing: border-box;
        background: var(--background-page);
    }
    .sidebar:has(.sidebar-secondary[data-section-id="notes"]:not(:empty)) .sidebar-secondary[data-section-id="notes"],
    .sidebar:has(.sidebar-secondary[data-section-id="files"]:not(:empty)) .sidebar-secondary[data-section-id="files"] {
        display: block;
        /* Pin into the existing 1fr row instead of falling into an implicit
           auto-height row below the icon rail — an implicit row sizes to
           content, so overflow-y:auto never has a bounded height to scroll
           within and the tree just spills past the viewport on mobile. */
        grid-row: 2;
        grid-column: 2;
        height: 100%;
        overflow-y: auto;
        border-top: 1px solid var(--color-border);
        /* Keeps the panel's own z-indexes inside the panel. Without a stacking
           context here, the sticky header's z-index competes out in the sidebar
           instead of just against the bulk bar it was raised for, and paints
           over the nav flyout at both breakpoints. This makes the whole panel
           one layer, which the flyout clears. */
        isolation: isolate;
    }

    /* Panel header — page title + Add button, moved out of the main heading */
    .explorer-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5em;
        /* Horizontal padding only — height is matched to .heading-main-row via
           JS min-height, with vertical centering from align-items. */
        padding-inline: 1em;
        box-sizing: border-box;
        position: sticky;
        top: 0;
        /* Outranks the bulk bar below, which is also sticky: at equal z-index the
           bar wins on DOM order and paints over this header's whole subtree,
           burying the Add button's open dropdown panel. */
        z-index: 2;
        background: var(--background-page);
        border-bottom: 1px solid var(--color-border);
        /* No margin-bottom: the bulk bar sticks directly under this header, and a
           margin here would sit between the two sticky offsets, so the bar would
           ride up into the gap once stuck. The spacing lives on whatever follows
           instead. */
    }
    .explorer-sidebar-header + .explorer-section {
        margin-top: 0.5em;
    }
    /* Back chevron + title, kept on one row so the header still matches the
       heading row's height. */
    .explorer-sidebar-heading {
        display: flex;
        align-items: center;
        gap: 0.25em;
        min-width: 0;
    }
    .explorer-sidebar-back {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        font-size: 1.25em;
        color: var(--color-muted);
        text-decoration: none;
        cursor: pointer;
    }
    .explorer-sidebar-back:hover {
        color: var(--color-black);
    }
    .explorer-sidebar-title {
        font-size: 1.5em;
        font-weight: 600;
        color: var(--color-black);
        margin: 0;
    }
    .explorer-sidebar-buttons {
        display: flex;
        gap: 0.25rem;
        flex-shrink: 0;
    }

    /* Main content pane while the explorer is active (note preview). The chain is
       spelled out to outrank `body .page-container .page-container-body`, which
       sets overflow:auto: at two classes this lost to it, so the pane scrolled as
       well as whatever inside it was meant to, putting a second scrollbar beside
       the first. */
    body .page-container .page-container-body.explorer-main {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0;
    }
    .explorer-main-empty {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        color: var(--color-muted);
    }
    .explorer-main-empty i {
        font-size: 2.5rem;
        opacity: 0.4;
    }
    .explorer-main .record-container {
        flex: 1;
        overflow: auto;
        width: 100%;
    }

    /* File preview (files explorer). The viewer fills the pane and the footer
       carries the file's name and upload details. */
    .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,
    .explorer-preview-video {
        max-width: 100%;
        max-height: 100%;
        margin: auto;
        object-fit: contain;
    }
    .explorer-preview-unsupported {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* The pane aligns its content to the top, which is right for a document
           or a tall image but leaves this block stuck under the header. An auto
           margin centres it on both axes without changing the pane. */
        margin: auto;
        gap: 0.5rem;
        padding: 2rem;
        color: var(--color-muted);
        font-size: 3rem;
    }
    .explorer-preview-unsupported span {
        font-size: 1rem;
        text-align: center;
        word-break: break-word;
    }
    .explorer-preview-footer {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.25rem 0.75rem;
        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-weight: 600;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .explorer-preview-meta {
        color: var(--color-muted);
        display: flex;
        align-items: center;
        gap: 0.25rem;
        flex-shrink: 0;
    }

    /* Section. Text deliberately inherits --font-size-sidebar (as CoreSights
       does) so the whole panel reads at one consistent size. */
    .explorer-section {
        margin-bottom: 0.25rem;
    }
    .explorer-section-header {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        /* Right padding (0.5rem) matches the row menu inset (0.25rem row margin +
           0.25rem row padding) so the header three-dots line up with the rows'. */
        padding: 0.25rem 0.5rem 0.25rem 1rem;
        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-weight: 600;
        color: var(--color-sidebar-text);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    /* User content (e.g. notebook names) — keep original casing, more prominent */
    .explorer-section-label--raw {
        text-transform: none;
        letter-spacing: 0;
        color: var(--color-black);
    }
    .explorer-section-icon {
        flex-shrink: 0;
        font-size: 1rem;
        color: var(--color-folder);
    }
    .explorer-section-rule {
        flex: 1;
        border: none;
        border-top: 1px solid var(--color-border);
        margin: 0;
    }
    .explorer-section-body {
        overflow: hidden;
    }

    /* A row's inset, split the way the rows themselves apply it: a side margin
       (so the hover/active pill does not touch the panel edge) plus inner
       padding. Anything that has to line up with the list computes from these
       rather than repeating the total. */
    .sidebar-secondary {
        --explorer-row-gutter: 0.25rem;
        --explorer-row-padding: 1rem;
    }

    /* Drag and drop. The row being dragged fades, the folder under the cursor
       is highlighted the way table drop targets are. */
    .explorer-item.dragging,
    .explorer-node-row.dragging {
        opacity: 0.4;
    }
    /* Flat rows are drop targets too (a group row on the Notes landing), so they
       take the same highlight the tree's folder rows do. Their glyph keeps its
       own colour: it carries an inline style, which no rule here can override. */
    .explorer-item.drag-target,
    .explorer-node-row.drag-target {
        background: var(--color-primary-light);
        color: white;
        border-radius: 0.25rem;
    }
    .explorer-node-row.drag-target .explorer-node-icon {
        color: white;
    }
    .explorer-section.collapsed .explorer-section-chevron {
        transform: rotate(-90deg);
    }
    .explorer-section.collapsed .explorer-section-body {
        display: none;
    }
    .explorer-empty {
        padding: 0.25rem calc(var(--explorer-row-gutter) + var(--explorer-row-padding));
        margin: 0;
        color: var(--color-muted);
        font-style: italic;
    }

    /* Items (flat lists) */
    .explorer-item {
        display: flex;
        align-items: center;
        min-height: 2.1rem;
        gap: 0.5rem;
        padding: 0.25rem 0.25rem 0.25rem var(--explorer-row-padding);
        cursor: pointer;
        border-radius: 4px;
        margin: 0 var(--explorer-row-gutter);
        text-decoration: none;
        color: inherit;
        min-width: 0;
    }
    .explorer-item:hover {
        background: var(--background-table-row);
    }
    .explorer-item.active {
        background: var(--color-primary-xlight);
        color: var(--color-primary);
    }
    .explorer-item-icon,
    .explorer-node-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        /* Fixed box rather than the glyph's own width: a folder and a PDF are not
           the same width, which pushed the names out of line as well. */
        justify-content: center;
        width: 1.15rem;
        font-size: 1rem;
    }
    .explorer-item-text {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        /* Wrapping is what lets an item add a second line: the meta span below
           takes the full basis and drops beneath the name. Rows without one are
           laid out exactly as before. */
        flex-wrap: wrap;
        flex: 1;
        min-width: 0;
        gap: 0.5rem;
    }
    .explorer-item-meta {
        flex-basis: 100%;
        color: var(--color-muted);
        font-size: 0.85em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .explorer-item-select {
        flex-shrink: 0;
        margin: 0 0.25rem 0 0;
        cursor: pointer;
    }
    /* Disabled because a selected folder already covers this row. Faded rather
       than hidden, so the column stays intact and the reason reads from the
       tinted block around it. */
    .explorer-item-select:disabled {
        cursor: default;
        opacity: 0.4;
    }

    /* Actions for the panel's selection, directly above the list they act on. */
    .explorer-bulk-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        /* Sticks under the header, which is itself sticky at the top of the
           scrolling panel: the actions apply to a selection that can be spread
           down a long list, so they have to stay reachable. Opaque, or rows would
           slide under it. */
        position: sticky;
        top: var(--explorer-header-height, 0px);
        z-index: 1;
        background: var(--background-page);
        gap: 0.25rem;
        /* Left inset matches a row's margin + padding so the select-all sits in
           the same column as the row checkboxes. */
        padding: 0.25rem 0.5rem 0.5rem calc(var(--explorer-row-gutter) + var(--explorer-row-padding));
        border-bottom: 1px solid var(--color-border);
        margin-bottom: 0.25rem;
    }
    .explorer-bulk-dropdown {
        flex-shrink: 0;
    }
    .explorer-bulk-select-all {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        cursor: pointer;
        color: var(--color-muted);
        /* Pushes the actions to the right edge, leaving the select-all beside the
           column of row checkboxes it controls. */
        margin-right: auto;

        input {
            cursor: pointer;
            margin: 0;
        }
    }
    .explorer-item-name {
        white-space: nowrap;
        /* flex-shrink: 0; */
        text-overflow:ellipsis;
        overflow:hidden;
    }
    .explorer-item-context {
        color: var(--color-muted);
        font-style: italic;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    /* Tree nodes (expandable) */
    .explorer-node-row {
        display: flex;
        align-items: center;
        min-height: 2.1rem;
        /* Matches .explorer-item: a folder row and a file row at the same depth
           have to space their contents identically or their icons do not line up. */
        gap: 0.5rem;
        padding: 0.25rem 0.25rem 0.25rem var(--explorer-row-padding);
        cursor: pointer;
        border-radius: 4px;
        margin: 0 var(--explorer-row-gutter);
    }
    .explorer-node-row:hover {
        background: var(--background-table-row);
    }
    /* Fixed box, because this class is worn by two different elements: the plain
       button a row starts with and the button-dropdown it upgrades to on hover.
       Their intrinsic heights differ (the real one carries a shadow container and
       an empty label span), so without a fixed size every row resized as the
       pointer moved across the list. */
    .explorer-node-menu {
        flex-shrink: 0;
        padding: 0.25rem;
        box-sizing: border-box;
        width: 1.6rem;
        height: 1.6rem;
        line-height: 1;
    }
    .explorer-node-row > .explorer-node-menu {
        margin-left: auto;
    }
    .explorer-leaf-right {
        margin-left: auto;
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    .explorer-node-icon {
        color: var(--color-folder);
    }
    .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);
    }
    /* Note leaves read as links (primary); folder/notebook nodes read as
       structure (muted secondary). */
    .explorer-section--notes .explorer-item-name {
        color: var(--color-primary);
    }
    .explorer-section--notes .explorer-node-row .explorer-item-name {
        color: var(--color-sidebar-text);
        font-weight: 500;
    }
    .explorer-node-children {
        display: none;
        /* Deliberately not indented: the indent is a spacer inside each row, so
           that rows stay full width and their checkboxes share one column. */
    }
    .explorer-node.open > .explorer-node-children {
        display: block;
    }
    .explorer-indent {
        flex-shrink: 0;
    }
    /* A checked row is in the selection; everything beneath a checked folder is in
       its scope. Both are tinted, but only the row you ticked carries a tick: a
       file inside a selected folder cannot be excluded on its own, so it must not
       look individually selectable.
       The folder case tints the whole node rather than each row inside it, so the
       block is one continuous shape. Tinting the rows made every one of them show
       its own 4px corners, which scalloped down the run. Rows inside keep their
       radius, but against a background of the same colour it does not read. */
    .explorer-item.explorer-row-selected,
    .explorer-node-row.explorer-row-selected {
        background: var(--background-explorer-selected);
    }
    /* A run of selected rows reads as one shape rather than a stack of pills:
       square off whichever edge touches another selected row. Rows carry no
       vertical margin, so the joined edges meet flush. Driven by the class rather
       than :checked because the second rule needs :has(+ ...), and :has() cannot
       be nested inside another :has(). */
    .explorer-item.explorer-row-selected + .explorer-item.explorer-row-selected {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .explorer-item.explorer-row-selected:has(+ .explorer-item.explorer-row-selected) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .explorer-node:has(> .explorer-node-row.explorer-row-selected) {
        background: var(--background-explorer-selected);
        border-radius: 4px;
        /* The block takes the gutter its rows normally carry, and the rows inside
           drop theirs. Total content inset is unchanged, so the checkbox column
           does not move, but the block edge now lines up with what a single
           selected row's pill would be instead of overhanging it. */
        margin-inline: var(--explorer-row-gutter);
    }
    .explorer-node:has(> .explorer-node-row.explorer-row-selected) .explorer-node-row,
    .explorer-node:has(> .explorer-node-row.explorer-row-selected) .explorer-item {
        margin-inline: 0;
    }

    /* Hover has to stay visible on a selected row. The ordinary hover colour is
       lighter than the selected tint, so it would read as a hole punched in the
       selection rather than as feedback; a step darker reads as both at once.
       Declared after the selected rules, and more specific than them, so hover
       wins either way. */
    .explorer-item.explorer-row-selected:hover,
    .explorer-node-row.explorer-row-selected:hover,
    .explorer-node:has(> .explorer-node-row.explorer-row-selected) .explorer-node-row:hover,
    .explorer-node:has(> .explorer-node-row.explorer-row-selected) .explorer-item:hover {
        background: var(--background-explorer-selected-hover);
    }

    /* Active is the file open in the preview, and there is only ever one of them,
       so it reads over a selection tint rather than under it. Restated here, after
       the selection rules, because the base .explorer-item.active carries the same
       specificity and would otherwise lose on order. The tick still shows the row
       is selected. */
    .explorer-item.active,
    .explorer-item.active.explorer-row-selected,
    .explorer-node:has(> .explorer-node-row.explorer-row-selected) .explorer-item.active {
        background: var(--color-primary-xlight);
        color: var(--color-primary);
    }
}

/* 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 panel already takes 35em of the viewport, 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: 50%;
        background: var(--background-page);
        color: var(--color-primary);
        box-shadow: 0 2px 5px 0 var(--color-shadow);
        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;
    }
}

/* Mobile: the flyout nav shares the panel's cell and overlays it, the way it
   overlays the tree on desktop. Every rule is gated on a populated panel, so
   every other page is untouched. */
@media only screen and (max-width: 65em) {
    /* Without a placement of its own, .sidebar-sections is auto-placed into an
       implicit third row beneath a grid that already fills the viewport, because
       the panel definitely-places itself into row 2 / column 2. That is what
       stranded the nav links in a sliver against the bottom edge. */
    .sidebar:has(.sidebar-secondary[data-section-id="notes"]:not(:empty)) .sidebar-sections,
    .sidebar:has(.sidebar-secondary[data-section-id="files"]:not(:empty)) .sidebar-sections {
        grid-row: 2;
        grid-column: 2;
        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 open the empty
           container would sit above the tree and swallow taps meant for it.
           Restored below on the one section that is actually showing. */
        pointer-events: none;
    }
    .sidebar:has(.sidebar-secondary[data-section-id="notes"]:not(:empty)) .sidebar-sections .sidebar-section.hover,
    .sidebar:has(.sidebar-secondary[data-section-id="files"]:not(:empty)) .sidebar-sections .sidebar-section.hover {
        pointer-events: auto;
    }
    /* Matches the desktop rule: a section holding the active link does not show
       itself, or sharing the cell would mean covering the panel on arrival. The
       lit rail icon carries the active state instead, and a rail tap still opens
       the section over the panel at full height. */
    .sidebar:has(.sidebar-secondary[data-section-id="notes"]:not(:empty)) .sidebar-sections .sidebar-section:not(.hover),
    .sidebar:has(.sidebar-secondary[data-section-id="files"]:not(:empty)) .sidebar-sections .sidebar-section:not(.hover) {
        display: none;
    }
}

/* Desktop: persistent tree panel beside the 5em icon rail. The flyout nav
   panels (.sidebar-sections) are left intact — they overlay when triggered,
   so icon-rail navigation still works while in Notes. */
@media only screen and (min-width: 65em) {
    .sidebar:has(.sidebar-secondary[data-section-id="notes"]:not(:empty)) {
        grid-template-columns: 5em 30em;
        max-width: none;
        width: fit-content;
    }
    /* Wider than the notes panel: a file row carries a checkbox, a depth indent,
       an icon and a row menu around the name, so it runs out of room sooner. */
    .sidebar:has(.sidebar-secondary[data-section-id="files"]:not(:empty)) {
        grid-template-columns: 5em 44em;
        max-width: none;
        width: fit-content;
    }
    .sidebar:has(.sidebar-secondary[data-section-id="notes"]:not(:empty)) .sidebar-secondary[data-section-id="notes"],
    .sidebar:has(.sidebar-secondary[data-section-id="files"]:not(:empty)) .sidebar-secondary[data-section-id="files"] {
        grid-column: 2;
        grid-row: 1 / 3;
        height: 100%;
        /* Divider between the icon rail and the panel. The sidebar's own
           border-right stays the single outer edge (avoids a double border). */
        border-left: 1px solid var(--color-border);
        border-top: none;
    }
}

/* #endregion */

/* #region INLINE EDITABLE TABLE CELLS */
.main-table.edit-mode-active td.editable {
    cursor: pointer;
    outline: 1px dashed var(--color-border);
    outline-offset: -2px;
}
.main-table.edit-mode-active td.editable:hover {
    background: var(--background-table-row-hover);
}
/* The editor is not inside the cell (see .inline-edit-input), so the cell keeps
   its own text and padding while editing. Zeroing them here would resize the
   column the moment the editor opened, which is the thing the overlay avoids. */
.main-table td.editable.editing {
    outline: none;
}
/* Floats over the cell it is editing, positioned from the cell's rect. */
.inline-edit-input {
    position: fixed;
    z-index: 2000;
    font-size: 1em;
    font-family: var(--font-family);
    color: inherit;
    background: var(--background-table-row);
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    padding: 0.25em 0.5em;
    box-sizing: border-box;
}
/* Edit-mode toggle: sits in the page's .buttons-container next to the action buttons. */
.edit-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    font-size: var(--font-size-body);
    font-weight: 500;
    color: var(--color-gray-light);
    padding: 0.35em 0.6em;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}
.edit-mode-toggle:hover {
    background: var(--color-xlight);
    color: var(--color-black);
}
.edit-mode-toggle i {
    font-size: 1.7em;
    line-height: 1;
    color: var(--color-gray-light);
    transition: color 0.15s ease;
}
.edit-mode-toggle i.bi-toggle-on {
    color: var(--color-primary);
}
.edit-mode-toggle:has(i.bi-toggle-on) {
    color: var(--color-primary);
}
/* Inline editing is desktop only, so the toggle is not offered below 65em. */
@media only screen and (max-width: 65em) {
    .edit-mode-toggle {
        display: none;
    }
}

/* Rendered on document.body (fixed) so the table's overflow can't clip it. */
.inline-edit-menu {
    position: fixed;
    z-index: 2000;
    min-width: 160px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--background-page);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 2px 8px 0 var(--color-shadow);
    padding-block: 0.25em;
}
.inline-edit-menu .inline-edit-option {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.75em;
    font-size: var(--font-size-body);
    white-space: nowrap;
    cursor: pointer;
}
.inline-edit-menu .inline-edit-option i {
    font-size: var(--font-size-body);
}
.inline-edit-menu .inline-edit-option:hover {
    background: var(--color-primary);
    color: #fff;
}
.inline-edit-menu .inline-edit-option:hover i {
    color: #fff !important;
}
.inline-edit-menu .inline-edit-option.selected {
    font-weight: bold;
    background: var(--color-xlight);
}
/* #endregion */
/* ================================================================= */


/* ================================================================= */
/* #region LANDING TILES / ENTITY LIST                               */
/*
   Ported from CoreSights (`.landing-group-items` + `.landing-tile*`).
   These back the `entity_list` section type — the renderer CoreSights
   uses for its Education/Employment/Residence lists. Class names and
   rules are kept identical to CoreSights on purpose: the intent is to
   migrate the rest of SMD's sections onto these renderers, so the two
   codebases should stay diffable.

   In CoreSights the tiles live inside a `.landing-group` card. SMD's
   equivalent chrome is `.section`, so the divided-list treatment is
   re-scoped to `.section-body` below.
*/

.landing-group-items {
    padding: 0.4em 0.5em;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}
.landing-group-items .landing-tile-wrapper {
    display: flex;
    align-items: center;
    gap: 0.25em;
}
/* min-width: 0 so the tile may be narrower than its text. Without it the tile's
   automatic minimum size grows to the full width of the nowrap name below, and
   the tile pushes out of the wrapper instead of the name truncating. */
.landing-group-items .landing-tile-wrapper .landing-tile { flex: 1; min-width: 0; }
.landing-group-items .landing-tile-wrapper .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;
}
.landing-group-items .landing-tile-wrapper .landing-tile-actions:hover {
    color: var(--color-black);
    background: var(--background-page-secondary);
}
.landing-group-items .landing-tile-wrapper .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;
}
.landing-group-items .landing-tile-wrapper .landing-tile-remove: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;
}
.landing-tile:hover {
    background: var(--background-page-secondary);
    border-color: var(--color-border);
}
/* Selected tile in a master/detail panel list. The left border is set here as a
   transparent placeholder on every tile inside a panel column (see the
   `.card-list-container--panel` block in region PAGE CONTENT) so selecting one
   does not shift the row. */
.landing-tile.landing-tile--active {
    background: var(--background-container);
}
.landing-tile .landing-tile-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* Paired with the tile's min-width: 0. The row is already pinned to 100% of
       the tile, so this only stops it inflating the tile's minimum size. */
    min-width: 0;
    /* Divergence from CoreSights: they never put a line-0 badge and an
       inline_right on the same tile, so the two would butt together with no
       separation. The name group is flex:1, so this is a no-op otherwise. */
    gap: var(--space-sm);
}
.landing-tile .landing-tile-name {
    font-weight: 500;
    font-size: var(--font-size-regular);
    flex: 1;
}
.landing-tile .landing-tile-name-icon {
    font-size: var(--font-size-regular);
    color: var(--color-danger);
    margin-right: 0.3em;
    flex-shrink: 0;
}
.landing-tile .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 .landing-tile-avatar-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.landing-tile .landing-tile-avatar-label {
    font-size: var(--font-size-regular);
    font-weight: normal;
    white-space: nowrap;
}
.landing-tile .landing-tile-name-group {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
    overflow: hidden;
}
/* The name is the only variable-length part of the row, so it is the part that
   gives up space. Left rigid it squeezes the subname instead, which can shrink to
   nothing because its overflow is hidden (a flex item's automatic minimum size is
   zero unless overflow is visible). That is what clipped the date on COI tiles. */
.landing-tile .landing-tile-name-group .landing-tile-name {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Avatar leads the name (no dot separator) — needs a real gap where the
   separator would have been */
.landing-tile .landing-tile-name-group.landing-tile-name-group--avatar-lead {
    gap: var(--space-xs);
}
/* Same idea for `subname_no_dot`: with the separator gone the name and subname
   need real space between them. */
.landing-tile .landing-tile-name-group.landing-tile-name-group--no-sep {
    gap: var(--space-sm);
}
.landing-tile .landing-tile-sep {
    color: var(--color-gray);
    font-size: 0.75rem;
    flex-shrink: 0;
    line-height: 1;
}
.landing-tile .landing-tile-subname {
    color: var(--color-gray);
    font-weight: 400;
    font-size: var(--font-size-regular);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Fixed-length metadata, so it keeps its width and the name truncates. */
    flex-shrink: 0;
}
.landing-tile .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: var(--font-weight-normal);
    white-space: nowrap;
    text-transform: uppercase;
    /* Same reasoning as the subname: the name truncates, the status does not. */
    flex-shrink: 0;
}
.landing-tile .landing-tile-badge.primary { color: var(--badge-font-color--primary); }
.landing-tile .landing-tile-badge.alert   { color: var(--badge-font-color--alert); }
.landing-tile .landing-tile-badge.success { color: var(--badge-font-color--success); }
/* Badges keyed by a model's own `status_color` (gray / green / blue / red /
   orange), so a record's status reads the same colour on a tile as it does on its
   `.status-pill`. Those are the same colour variables the pill uses, with one
   necessary difference: the pill paints them as a background, this is text, so
   `gray` resolves to --color-gray rather than the pill's --color-xlight, which is
   a background tint and unreadable as type. */
.landing-tile .landing-tile-badge.blue   { color: var(--color-primary); }
.landing-tile .landing-tile-badge.green  { color: var(--color-green); }
.landing-tile .landing-tile-badge.red    { color: var(--color-danger); }
.landing-tile .landing-tile-badge.orange { color: var(--color-orange); }
.landing-tile .landing-tile-badge.gray   { color: var(--color-gray); }
/* Supplementary markers keep the casing Python sends instead of shouting
   like the status badges */
.landing-tile .landing-tile-badge.muted {
    color: var(--badge-font-color--muted);
    text-transform: none;
}
.landing-tile .landing-tile-badge.inactive {
    color: var(--badge-font-color--inactive);
    text-transform: none;
}
/* Colour-independent opt-out of the uppercase transform (`no_caps` on a badge). */
.landing-tile .landing-tile-badge.landing-tile-badge--no-caps {
    text-transform: none;
}
.landing-tile .landing-tile-badge .landing-tile-badge-icon {
    font-size: var(--font-size-regular);
    text-transform: none;
}
/* Status dot. With a dot present the colour class paints the dot only and the
   label goes muted, matching the subname and meta rows, so the status reads as
   a marker beside the name rather than as coloured type. Badges without a dot
   keep the coloured text above, where the colour is the only status signal.
   The dot therefore cannot use currentColor and needs the colour variables
   spelled out per class, the same set `.landing-tile-indicator` uses. */
.landing-tile .landing-tile-badge .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 .landing-tile-badge.landing-tile-badge--dot {
    color: var(--color-gray);
}
.landing-tile .landing-tile-badge--dot.primary  .landing-tile-badge-dot { background: var(--badge-font-color--primary); }
.landing-tile .landing-tile-badge--dot.alert    .landing-tile-badge-dot { background: var(--badge-font-color--alert); }
.landing-tile .landing-tile-badge--dot.success  .landing-tile-badge-dot { background: var(--badge-font-color--success); }
.landing-tile .landing-tile-badge--dot.muted    .landing-tile-badge-dot { background: var(--badge-font-color--muted); }
.landing-tile .landing-tile-badge--dot.inactive .landing-tile-badge-dot { background: var(--badge-font-color--inactive); }
.landing-tile .landing-tile-badge--dot.blue     .landing-tile-badge-dot { background: var(--color-primary); }
.landing-tile .landing-tile-badge--dot.green    .landing-tile-badge-dot { background: var(--color-green); }
.landing-tile .landing-tile-badge--dot.red      .landing-tile-badge-dot { background: var(--color-danger); }
.landing-tile .landing-tile-badge--dot.orange   .landing-tile-badge-dot { background: var(--color-orange); }
.landing-tile .landing-tile-badge--dot.gray     .landing-tile-badge-dot { background: var(--color-gray); }
.landing-tile .landing-tile-inline-right {
    font-size: var(--font-size-regular);
    color: var(--color-gray);
    white-space: nowrap;
}
.landing-tile .landing-tile-meta {
    display: flex;
    gap: 0.5em;
    font-size: var(--font-size-regular);
    color: var(--color-gray);
}
.landing-tile .landing-tile-meta .landing-tile-date.date-soon    { color: var(--color-warning); font-weight: 500; }
.landing-tile .landing-tile-meta .landing-tile-date.date-expired { color: var(--color-danger);  font-weight: 500; }
.landing-tile .landing-tile-meta.landing-tile-meta--spread {
    justify-content: space-between;
    width: 100%;
}
.landing-tile .landing-tile-meta--spread .landing-tile-icon-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}
.landing-tile .landing-tile-meta--spread .landing-tile-icon-group .trend-up   { color: var(--color-danger); }
.landing-tile .landing-tile-meta--spread .landing-tile-icon-group .trend-down { color: var(--color-green-dark); }
.landing-tile .landing-tile-meta--spread .landing-tile-icon-group .trend-flat { color: var(--color-muted); }
.landing-tile .landing-tile-meta--spread .landing-tile-icon-group .icon-muted { color: var(--color-muted); }
.landing-tile .landing-tile-meta--spread .landing-tile-meta-left {
    display: flex;
    align-items: center;
    gap: 0.2em;
    min-width: 0;
    overflow: hidden;
}
.landing-tile .landing-tile-meta--spread .landing-tile-meta-left .landing-tile-avatar {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.7rem;
}
.landing-tile .landing-tile-meta--spread .landing-tile-meta-left .landing-tile-avatar-group {
    min-width: 0;
    overflow: hidden;
}
.landing-tile .landing-tile-meta--spread .landing-tile-meta-left .landing-tile-avatar-group span:not(.landing-tile-avatar) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.landing-tile .landing-tile-meta--spread .landing-tile-meta-right {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.landing-tile .landing-tile-meta--spread .landing-tile-meta-right .bold        { font-weight: bold; }
.landing-tile .landing-tile-meta--spread .landing-tile-meta-right .danger      { color: var(--color-danger);  font-weight: 500; }
.landing-tile .landing-tile-meta--spread .landing-tile-meta-right .date-soon   { color: var(--color-warning); font-weight: 500; }
.landing-tile .landing-tile-meta--spread .landing-tile-meta-right .value-muted { color: var(--color-muted); }

.landing-tile.landing-tile--stacked {
    flex-direction: column;
    align-items: flex-start;
}
.landing-tile.landing-tile--stacked .landing-tile-name-row { width: 100%; }
.landing-tile.landing-tile--stacked .landing-tile-sub {
    font-size: var(--font-size-regular);
    color: var(--color-gray);
    margin-top: -0.1em;
}
.landing-tile.landing-tile--stacked .landing-tile-meta { width: 100%; }

.landing-tile.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
   client contract. */
.landing-tile.landing-tile--faded {
    opacity: 0.85;
    /* A neutral gray so the tile reads as set aside rather than highlighted. */
    background: #eeeeee;
}
/* The faded rule sits later at the same specificity, so without this a selected
   faded tile in a panel list would lose its selected background. */
.landing-tile.landing-tile--faded.landing-tile--active {
    background: var(--background-container);
}
/* 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.landing-tile--faded .landing-tile-name { color: var(--color-gray); }

/* The subname is fixed-width metadata by default (see .landing-tile-subname), which
   is right for a date or a category but not for a description: held rigid it makes
   the name truncate beside it. A shrink factor this large means the subname absorbs
   effectively all of the reduction, so the name - a reference number, the one thing
   identifying the record - only starts to give once the subname has run out. */
.landing-tile.landing-tile--shrink-subname .landing-tile-subname {
    flex-shrink: 999;
    min-width: 0;
}

/* Same idea one row down. In an info row the leading avatar item (a company, a
   provider) is the variable-length part, but it is the trailing items - a date, a
   separator - that give way first, because a bare span shrinks to its longest word
   while the avatar group is held together. Pinning the trailing items makes the
   company the part that ellipsises, so the date is never squeezed or clipped by a
   long name. Opt-in, so tiles that want the stock behaviour keep it. */
.landing-tile.landing-tile--meta-tail-fixed .landing-tile-meta-left > span:not(.landing-tile-avatar-group),
.landing-tile.landing-tile--meta-tail-fixed .landing-tile-meta-left > .landing-tile-sep {
    flex-shrink: 0;
    white-space: nowrap;
}

/* 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.landing-tile--with-indicator {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
}
.landing-tile.landing-tile--with-indicator .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);
}
.landing-tile.landing-tile--with-indicator .landing-tile-leading i {
    font-size: var(--font-size-xlarge);
}
.landing-tile.landing-tile--with-indicator .landing-tile-leading.landing-tile-leading--active {
    color: var(--color-blue);
}
.landing-tile.landing-tile--with-indicator .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.landing-tile--with-indicator .landing-tile-content .landing-tile-name-row { width: 100%; }
.landing-tile.landing-tile--with-indicator .landing-tile-content .landing-tile-meta { width: 100%; }

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

.landing-subgroup-divider {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 1em;
    padding-inline: 1em;
}
.landing-subgroup-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}
.landing-subgroup-divider .landing-subgroup-divider-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
}

.landing-group-list-wrapper:not(:empty) {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-block: 1em;
}
.landing-group-list-wrapper:not(:empty) .landing-group-items {
    padding-inline: 0;
}

.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;
}
.landing-group-overflow-footer:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.landing-group-empty {
    padding: 1.5em;
    text-align: center;
    color: var(--color-muted);
    margin: 0;
}

/* Contact-card variant (`card_style: 'contact'`) */
.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;
}
.card-list-contact-card:hover { background: var(--background-page-secondary); }
.card-list-contact-card.card-list-contact-card--active {
    border-color: var(--color-primary);
    background: var(--background-container);
}
.card-list-contact-card.card-list-contact-card--muted { opacity: 0.45; }
.card-list-contact-card .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 .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 .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 .card-list-contact-card-name-group {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
    overflow: hidden;
}
.card-list-contact-card .card-list-contact-card-status {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-gray);
    white-space: nowrap;
}
.card-list-contact-card .card-list-contact-card-status::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-gray);
    border: none;
    flex-shrink: 0;
}
.card-list-contact-card .card-list-contact-card-status.success::before  { background: var(--color-primary); }
.card-list-contact-card .card-list-contact-card-status.inactive::before { background: var(--color-gray); }
.card-list-contact-card .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 .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 .card-list-contact-card-row-right {
    flex-shrink: 0;
    white-space: nowrap;
}
.card-list-contact-card .card-list-contact-card-sep {
    color: var(--color-gray);
    flex-shrink: 0;
}
.card-list-contact-card .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);
}
.card-list-contact-card .card-list-contact-card-badge.alert   { color: var(--badge-font-color--alert); }
.card-list-contact-card .card-list-contact-card-badge.success { color: var(--badge-font-color--success); }
.card-list-contact-card .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 .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;
}

/* `.section-body` is `display:flex` with no direction, so it defaults to row.
   An entity list needs a column: otherwise the tile list shrink-wraps its
   content instead of spanning the card, and the empty message / overflow
   footer land beside the list rather than under it. */
.section-body:has(.landing-group-items),
.section-body:has(.landing-group-empty),
.section-body:has(.landing-group-list-wrapper) {
    flex-direction: column;
}

/* Inside a section card the tiles become a flush divided list, matching how
   CoreSights renders them inside a `.landing-group`. */
.section-body .landing-group-items {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    gap: 0;
}
.section-body .landing-group-items .landing-tile {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: 0.75em 1em;
}
.section-body .landing-group-items .landing-tile:hover { background: var(--background-page-secondary); }
.section-body .landing-group-items .landing-tile-wrapper {
    border-bottom: 1px solid var(--color-border);
    padding-right: 0.5em;
}
.section-body .landing-group-items .landing-tile-wrapper:hover { background: var(--background-page-secondary); }
/* The list is bounded top and bottom rather than only divided between rows.
   CoreSights does the same for its sidenav groups. The child combinator matters:
   a tile inside a wrapper is its wrapper's first child, and must not pick up a
   rule meant for the first row of the list. */
.section-body .landing-group-items > .landing-tile:first-child,
.section-body .landing-group-items > .landing-tile-wrapper:first-child {
    border-top: 1px solid var(--color-border);
}
.section-body .landing-group-items .landing-tile-wrapper .landing-tile { border-bottom: none; }
.section-body .landing-group-items .landing-tile-wrapper .landing-tile:hover { background: none; }
.section-body .landing-group-items:has(.card-list-contact-card) {
    padding: var(--space-sm);
    gap: var(--space-sm);
}

@media only screen and (max-width: 65em) {
    /* Mobile list tile row sets — desktop hidden, mobile shown */
    .landing-tile-rows--desktop { display: none; }
    .landing-tile-rows--mobile  { display: flex; }

    /* Half-width sections go full width once there is no room to spare */
    .record-sections .section.half { width: 100%; }

    /* Same for half-width modal fields (`'half': True`) */
    .modal-body .form-group.half-width { width: 100%; }
}
/* #endregion */
/* ================================================================= */

/* ================================================================= */
/* #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;
        text-decoration: none;
        &:hover {
            text-decoration: none;
        }
    }
}

@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 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 LANDING — MOBILE */
/* `.landing-tile-rows` base + the desktop/mobile row-set toggle already live
   in the LANDING TILES region above, ported with the tiles. */

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

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


/* ================================================================= */
/* #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 */


/* ================================================================= */
/* #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 HEADING INPUTS & TOGGLES                                  */
/*
 * Standalone search box in the page heading (`inputs`), sitting beside the filter
 * dropdown rather than inside it. Ported from CoreSights' HEADING INPUTS & TOGGLES
 * region; --color-text there is --color-black here, SMD's body text colour.
 * The toggles half is not ported — nothing in SMD emits `toggles` yet.
 */

/* Deliberately unscoped, as in CoreSights. The panel view moves .result-container
   (and the .options-container inside it) out of the heading and into its list
   column, so anything scoped to `.table-options .result-container` stops applying
   the moment the list renders — which left the search box and filter dropdown
   stacking instead of sitting side by side. The modal's own .options-container
   rule is nested six levels deep and still outranks this one. */
.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-black);
        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 HEADING INPUTS & TOGGLES */
/* ================================================================= */


/* ================================================================= */
/* #region OVERVIEW VALUE NOWRAP                                     */
/*
 * `.overview-value` sets `word-break: break-word` so long values wrap inside a
 * narrow column. That also lets the browser break after a hyphen, splitting an
 * identifier like PO-1066 or a date like 2025-02-06 across two lines. Info
 * sections wrap each hyphenated run in this class to hold it together.
 *
 * Unscoped on purpose: `.overview-value` is styled at four different nesting
 * depths (record sections, landing groups, the panel's detail pane, modals), and
 * a value can be rendered in any of them.
 */
.overview-nowrap {
    white-space: nowrap;
}
/* #endregion OVERVIEW VALUE NOWRAP */
/* ================================================================= */


/* ================================================================= */
/* #region OVERVIEW EMPTY VALUE                                      */
/*
 * Dash standing in for a field with no value. Muted and at normal weight so it
 * reads as an absence rather than as content — info sections bold their values.
 */
.overview-value .overview-value-empty {
    color: var(--color-gray);
    font-weight: normal;
}
/* #endregion OVERVIEW EMPTY VALUE */
/* ================================================================= */


/* ================================================================= */
/* #region TABLE BULK ACTIONS IN A LANDING GROUP                     */
/*
 * A `table` section rendered as a landing group (the panel's Files section, for
 * one) hangs its bulk-actions bar off `.landing-group-header-right`. Every
 * existing rule for these classes is scoped to the record-page chrome
 * (`.record-container .record-sections .section .section-body ...`), so in a
 * landing group the bar had no layout at all: the wrappers fell back to
 * display:block and button-dropdown, whose shadow `.container` is sized
 * width/height 100% of its host, had nothing to size against.
 *
 * Mirrors what `.table-context-menu .table-multiselect` provides on a record page.
 */
.landing-group .landing-group-header-right {
    .table-multiselect {
        display: flex;
        align-items: center;
    }
    .table-select-buttons {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
    }
}
/* #endregion TABLE BULK ACTIONS IN A LANDING GROUP */
/* ================================================================= */


/* ================================================================= */
/* #region BULK ACTIONS IN THE PAGE CHROME                            */
/*
 * Bulk-action buttons rendered into `.multiselect-options` from a table's
 * headings `multiselect` payload. Every other `.table-select-buttons` rule is
 * scoped to the record-page or landing-group chrome, so here the wrapper fell
 * back to display:block and the buttons stacked instead of sitting in a row.
 */
.multiselect-options .table-select-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);

    button {
        display: flex;
        align-items: center;
        gap: 0.25em;
        white-space: nowrap;

        span {
            display: flex;
            align-items: center;
            gap: 0.25em;
        }
    }
}
/* #endregion BULK ACTIONS IN THE PAGE CHROME */
/* ================================================================= */




/* ================================================================= */
/* #region EMBEDDED PANEL GROUP (`type: 'panel'`)                    */
/*
 * The panel view rendered as a group inside a page rather than as a whole
 * card_list page. Rules are CoreSights' style.css 10923-11043 verbatim.
 *
 * RE-SCOPED, and the one place this port diverges: in CoreSights these rules
 * are nested inside their record-page chrome (`.record-body` > `.record-columns`
 * / `.record-band--full` / `.record-side`), none of which exists in SMD — SMD's
 * record page is `.record-container` > `.record-sections`. So the ancestor chain
 * is replaced with `.landing-container`, which buildLanding always creates, plus
 * a leading `body` to outweigh the nested `.landing-group` base rules in region
 * PAGE CONTENT. The declarations themselves are unchanged.
 */

body .page-container .page-container-body .landing-container .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: 0.7rem;
                    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; }
        }
    }
}

/* Mobile: the detail pane becomes a slide-over, same as the standalone
   card_list panel page. CoreSights style.css 13510-13577, re-scoped as above. */
@media only screen and (max-width: 65em) {
    body .page-container .page-container-body .landing-container .landing-group--panel .record-panel-view {
        display: flex;
        flex-direction: column;
        position: relative;
        .card-list-panel-list {
            flex: 1;
            overflow-y: auto;
            border-right: none;
        }
        .card-list-panel {
            display: flex;
            position: absolute;
            inset: 0;
            z-index: 2;
            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 EMBEDDED PANEL GROUP */
/* ================================================================= */

/* ================================================================= */
/* #region RECORD SHELL                                              */
/*
 * The record page chrome: breadcrumbs, a header carrying the record's avatar,
 * name and actions, a tab bar, then the tab body in two columns with comments
 * beside it.
 *
 * Ported from CoreSights style.css (10942-11282 desktop, 13524-13756 mobile),
 * declarations unchanged. The ancestor chain is identical in both codebases -
 * `body .page-container .page-container-body` - so unlike the embedded panel
 * group above, nothing had to be re-scoped.
 *
 * `.record-body` is what gives a full-height record page: it claims the
 * remaining viewport and hides its own overflow, so the columns scroll inside
 * it and a panel group in a tab can size itself against something real.
 */
@media only screen and (min-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-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: 0.7rem;
                                    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);
                            }
                        }
                    }
                }
            }
    }
}

@media only screen and (max-width: 65em) {
    body .page-container .page-container-body {
            .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 SHELL */
/* ================================================================= */

/* ================================================================= */
/* #region CARD                                                      */
/*
 * Ported from CoreSights style.css 2925-3166, declarations unchanged, plus
 * SMD's own status-icon colours at the end.
 *
 * Global on purpose, exactly as CoreSights has it: a comment card renders in a
 * record section, a landing group, a panel's detail pane and the record shell's
 * side column, and only a context-free rule reaches all of them. SMD's copy used
 * to be nested under `.record-container .record-sections .section .section-body`,
 * so cards outside the legacy record chrome came out unstyled - which is what
 * this replaces.
 *
 * `--color-text` on .card-body-toggle-dots is undefined in CoreSights too, so
 * that one declaration is inert in both codebases; it is kept as-is rather than
 * silently repointed.
 */
.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);
            }
        }
        /* SMD only. CoreSights' comment card has no title, so this rule has no
           counterpart there to keep in step with. */
        .card-comment-title {
            font-size: var(--font-size-regular);
            font-weight: var(--font-weight-semi-bold);
        }
        .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); }
                }
            }
        }
    }
    .card-field-container {
        .card-field-row {
            /* SMD's own: status icons inside a card's field rows. No CoreSights
               equivalent, so they ride along with the ported block. */
            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);
            }
        }
    }
}
/* #endregion CARD */
/* ================================================================= */

/* ================================================================= */
/* #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 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;
}

/*
 * 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 */
/* ================================================================= */

/* ================================================================= */
/* #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 */
/* ================================================================= */