via a token, never to the | as a literal.
═══════════════════════════════════════════════════════════════════════════ */
:root {
--dt-hdr-h: 34px;
--dt-fil-h: 30px;
/* The row-highlight wash. A conditional-format row rule sets --dt-cf-row to
the author's colour; this is the strength it is mixed in at, so a row
highlight can never swallow the per-cell colours painted on top of it. */
--dt-cf-row-mix: 26%;
}
html[data-dt-theme="dark"] { --dt-cf-row-mix: 34%; }
/* ══ 1 · THE SCROLLER ═════════════════════════════════════════════════════ */
.dtx-grid-wrap {
position: relative;
border: 1px solid var(--dt-line);
border-radius: var(--dt-radius);
background: var(--dt-panel);
overflow: auto;
max-height: calc(100vh - 268px);
min-height: 220px;
overscroll-behavior: contain;
}
.dtx-grid-wrap[data-empty] { min-height: 300px; }
.dtx-grid {
border-collapse: separate;
border-spacing: 0;
font-size: 13px;
/* width is written inline by the JS from the sum of the colgroup. */
table-layout: fixed;
}
/* ══ 2 · THE HEADER + FILTER ROWS ═════════════════════════════════════════ */
.dtx-grid thead th {
position: sticky;
z-index: 3;
background: var(--dt-panel2);
color: var(--dt-text2);
font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
text-align: left;
padding: 0 10px;
white-space: nowrap;
overflow: hidden;
border-bottom: 1px solid var(--dt-line);
border-right: 1px solid var(--dt-line);
user-select: none;
}
.dtx-grid thead tr.dtx-hrow th { top: 0; height: var(--dt-hdr-h); cursor: pointer; }
.dtx-grid thead tr.dtx-frow th {
top: var(--dt-hdr-h);
height: var(--dt-fil-h);
z-index: 3;
padding: 0 4px;
cursor: default;
background: var(--dt-panel3);
border-bottom: 2px solid var(--dt-line2);
}
.dtx-grid thead tr.dtx-hrow th:hover { color: var(--dt-text); background: var(--dt-panel3); }
.dtx-grid thead th[data-kind="chk"],
.dtx-grid thead th[data-kind="num"] { cursor: default; text-align: center; padding: 0; }
.dtx-grid thead th[data-kind="chk"]:hover { background: var(--dt-panel2); }
.dtx-th-lbl { display: inline-block; vertical-align: middle; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dtx-grid thead th .dtx-sort { color: var(--dt-accent); margin-left: 5px; }
/* The operational block (assignment + progress) is the grid's own, not the
sheet's. A hairline says so, which is what stops "Status" and "My Status"
reading as two attempts at the same column. */
.dtx-grid thead th.dtx-th-op { border-left: 2px solid var(--dt-line2); }
.dtx-grid tbody td[data-key^="__"]:not([data-key="__chk"]):not([data-key="__rownum"]) { }
.dtx-th-tag {
display: inline-block; margin-left: 5px; padding: 1px 5px;
border-radius: 5px; font-size: 9px; font-weight: 800; letter-spacing: .3px;
background: var(--dt-panel); color: var(--dt-text3);
border: 1px solid var(--dt-line2); vertical-align: middle;
}
.dtx-th-tag--qb { background: var(--dt-info-fill); color: var(--dt-info-ink); border-color: transparent; }
/* ── the filter boxes ── */
.dtx-fin {
width: 100%; height: 22px; padding: 0 6px;
border: 1px solid var(--dt-line2); border-radius: 5px;
background: var(--dt-panel); color: var(--dt-text);
font: inherit; font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0;
outline: none;
}
.dtx-fin::placeholder { color: var(--dt-text3); font-weight: 500; }
.dtx-fin:focus { border-color: var(--dt-accent); box-shadow: 0 0 0 2px var(--dt-accent-soft); }
.dtx-fcell[data-on="1"] { background: var(--dt-accent-soft); }
.dtx-fcell[data-on="1"] .dtx-fin { border-color: var(--dt-accent); color: var(--dt-accent); }
.dtx-fglyph { display: block; text-align: center; color: var(--dt-text3); font-size: 9px; }
/* ══ 3 · FROZEN COLUMNS ═══════════════════════════════════════════════════
The ladder, lowest to highest:
1 an ordinary body cell
2 a frozen body cell — must cover cells that scroll under it
3 an ordinary header cell — must cover every body cell
4 a frozen header cell — the corner; covers both of the above
Getting any pair the wrong way round produces text sliding through text,
which is the whole reason the numbers are written down here. */
.dtx-grid tbody td[data-frozen="1"] {
position: sticky;
z-index: 2;
background: var(--dt-panel);
}
.dtx-grid thead th[data-frozen="1"] { z-index: 4; }
.dtx-grid td[data-frozen="1"]:last-of-type,
.dtx-grid th[data-frozen="1"] + th:not([data-frozen="1"]) { }
.dtx-grid [data-frozen="1"] { box-shadow: 1px 0 0 var(--dt-line); }
/* ══ 4 · BODY CELLS ═══════════════════════════════════════════════════════ */
.dtx-grid tbody td {
padding: 0;
border-bottom: 1px solid var(--dt-line);
border-right: 1px solid var(--dt-line);
color: var(--dt-text);
vertical-align: middle;
overflow: hidden;
}
.dtx-grid tbody tr { background: var(--dt-panel); }
/* A conditional-format ROW rule paints here — on the |