/* ascension-kit.css — the item x dimension matrix on ascension-kit-5.0.php.
 * Loaded AFTER explore.css, which supplies the shared visual language (top bar,
 * .xp-controls, .xp-pill). Only what the matrix itself needs lives here.
 * → nao-admin docs/www/ascension-kit.md */

/* The matrix is a real <table>, not explore's virtual scroller: 540 rows is
 * nothing to the DOM (explore virtualises because a player board is 121k), and
 * a plain table keeps every cell selectable, sortable and printable. Do NOT
 * reuse .xp-table here — it is position:absolute for that scroller. */
.kit-wrap {
    overflow-x: auto;          /* 13 role columns + 8 fixed do not fit narrow */
    border: 1px solid #c0c0c0;
    background-color: #ffffff;
}

table.kit {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: small;
    width: 100%;
}

table.kit th, table.kit td {
    padding: 0.15em 0.45em;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    text-align: right;
}

table.kit th {
    position: sticky;          /* the header survives a long scroll */
    top: 0;
    z-index: 2;
    background-color: #e8e8e8;
    border-bottom: 1px solid #c0c0c0;
    cursor: pointer;
    user-select: none;
}

table.kit th:hover { background-color: #dcdcdc; }
table.kit th.on    { background-color: #9999ff; }

/* The n= line under each dimension header. Small and grey on purpose: a column
 * whose denominator is 5 must SAY 5 next to every percentage it prints. */
table.kit th small { display: block; font-weight: normal; color: #555; }

table.kit td.kit-name, table.kit th.kit-name { text-align: left; }
table.kit td.kit-cat,  table.kit th.kit-cat  { text-align: left; color: #555; }

table.kit tbody tr:hover td { background-color: #ffffcc; }

/* Sequential ramp for the matrix cells, on the site's own accent (#9999ff).
 * Set inline as a background-color by the JS; these two classes only carry the
 * text colour, which has to flip before the ramp gets dark enough to swallow
 * black text. */
td.kit-cell        { color: #000000; }
td.kit-cell.deep   { color: #ffffff; }
td.kit-zero        { color: #c8c8c8; }

.kit-num { font-variant-numeric: tabular-nums; }

/* Provenance line. One line, never a box: the denominator has to be visible
 * without being explained. */
.kit-prov { font-size: small; color: #555; margin: 0 0 0.5em 0; }

.kit-filter input[type=text] {
    font-family: inherit;
    font-size: inherit;
    border: 1px solid #c0c0c0;
    padding: 0.15em 0.4em;
}

.kit-filter input[type=number] {
    font-family: inherit;
    font-size: inherit;
    border: 1px solid #c0c0c0;
    padding: 0.15em 0.4em;
    width: 4em;
}