/* Editorial data tables in Journal articles. Compare tables use compare.css. */
.article-table-shell {
    --article-table-border: #dbe3ed;
    --article-table-header: #315f9f;
    --article-table-header-dark: #294f85;
    --article-table-stripe: #f6f8fb;
    --article-table-hover: #edf4fd;
    position: relative;
    margin: 24px 0 32px;
}

.article-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--article-table-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(24, 45, 76, .08);
    scrollbar-color: #9eafc4 #edf1f6;
    scrollbar-width: thin;
}

.article-table-scroll:focus-visible {
    outline: 3px solid rgba(61, 122, 206, .34);
    outline-offset: 3px;
}

.article-table-scroll::-webkit-scrollbar { height: 10px; }
.article-table-scroll::-webkit-scrollbar-track { background: #edf1f6; }
.article-table-scroll::-webkit-scrollbar-thumb {
    background: #9eafc4;
    border: 2px solid #edf1f6;
    border-radius: 999px;
}

.article-content table.article-data-table {
    width: 100%;
    min-width: 680px;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #243247;
    font-size: 16px;
    line-height: 1.45;
    table-layout: auto;
}

.article-content table.article-data-table caption {
    padding: 13px 18px;
    background: #f2f5f9;
    color: #526174;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.article-content table.article-data-table th,
.article-content table.article-data-table td {
    padding: 15px 18px;
    border: 0;
    border-right: 1px solid var(--article-table-border);
    border-bottom: 1px solid var(--article-table-border);
    background: #fff;
    text-align: left;
    vertical-align: top;
    overflow-wrap: break-word;
    word-break: normal;
}

.article-content table.article-data-table thead th {
    background: linear-gradient(180deg, var(--article-table-header), var(--article-table-header-dark));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    vertical-align: middle;
}

.article-content table.article-data-table:not(.article-data-table--legacy) tbody tr:nth-child(even) > * {
    background: var(--article-table-stripe);
}

.article-content table.article-data-table:not(.article-data-table--legacy) tbody tr:hover > * {
    background: var(--article-table-hover);
}

.article-content table.article-data-table:not(.article-data-table--legacy) tbody td:first-child {
    color: #1f3150;
    font-weight: 600;
}

/* Older journal tables were authored without thead/th markup. */
.article-content table.article-data-table--legacy tbody > tr:first-child > td {
    background: linear-gradient(180deg, var(--article-table-header), var(--article-table-header-dark));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    vertical-align: middle;
}

.article-content figure.wp-block-table.article-table-shell {
    display: block;
    width: 100%;
}

.article-content table.article-data-table tr > *:last-child { border-right: 0; }
.article-content table.article-data-table tbody tr:last-child > * { border-bottom: 0; }
.article-content table.article-data-table a {
    color: #315f9f;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.article-table-hint {
    display: none;
    margin: 0 0 8px;
    color: #5c6c80;
    font-size: 13px;
    line-height: 1.35;
}

.article-table-hint::before {
    content: '\2194';
    display: inline-block;
    margin-right: 7px;
    color: #315f9f;
    font-size: 17px;
    font-weight: 700;
    vertical-align: -1px;
}

@media (max-width: 767px) {
    .article-table-shell { margin: 20px 0 28px; }
    .article-table-shell.is-scrollable .article-table-hint { display: block; }
    .article-table-scroll { border-radius: 8px; }
    .article-content table.article-data-table {
        min-width: 620px;
        font-size: 14px;
        line-height: 1.4;
    }
    .article-content table.article-data-table th,
    .article-content table.article-data-table td { padding: 12px 13px; }
    .article-content table.article-data-table thead th { font-size: 13px; }
}

@media print {
    .article-table-hint { display: none !important; }
    .article-table-scroll {
        overflow: visible;
        border: 1px solid #999;
        box-shadow: none;
    }
    .article-content table.article-data-table { min-width: 0; font-size: 10pt; }
    .article-content table.article-data-table thead th {
        background: #e7e7e7 !important;
        color: #000;
    }
}