/* Tables and boxes in rendered QuickText content (see RenderHtml). Like the rest of the rendered
   document (see text-render.css), everything is set through the variables in each section, so a
   rendering style only needs to redefine them. */

/* Tables (see RenderHtml.tableToHtml). A table is lined (%table, or no directive), a grid with no
   lines (%grid), columns (%cols), with a line between them but none around the edge, or a chart
   (%chart). */

div.qt-render {
    --qt-table-margin: 0 0 var(--qt-paragraph-gap) 0;
    --qt-table-cell-padding: 0.3em 0.6em;
    --qt-table-head-weight: bold;
    --qt-table-head-color: var(--qt-heading-color);
    --qt-table-stripe-background: #f2f2f2;

    --qt-table-line: 1px solid #999999;
    --qt-table-head-line: 2px solid #222222;
    --qt-table-head-background: #E6EBF5;

    --qt-cols-line: 2px solid var(--qt-heading-color);
    --qt-cols-cell-padding: 0.3em 1.2em;
}

/* Full width, with columns of equal width, unless its directive gives their widths */
div.qt-render table.qt-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: var(--qt-table-margin);
}

div.qt-render .qt-table-cell {
    padding: var(--qt-table-cell-padding);
    vertical-align: top;
}

div.qt-render .qt-table-left {
    text-align: left;
}

div.qt-render .qt-table-center {
    text-align: center;
}

div.qt-render .qt-table-right {
    text-align: right;
}

/* The cell's padding provides the space below its content */
div.qt-render .qt-table-cell > :last-child {
    margin-bottom: 0;
}

/* Lists are always left-aligned, as their bullets and numbers are */
div.qt-render .qt-table-cell div.qt-list {
    text-align: left;
}

div.qt-render .qt-table-head,
div.qt-render .qt-table-lead {
    font-weight: var(--qt-table-head-weight);
    color: var(--qt-table-head-color);
}

div.qt-render tr.qt-table-stripe > .qt-table-cell {
    background-color: var(--qt-table-stripe-background);
}

/* A lined table: headers and leaders are shaded, with a heavier line separating them from the rest */
div.qt-render table.qt-table-lined > tbody > tr > .qt-table-cell {
    border: var(--qt-table-line);
}

div.qt-render table.qt-table-lined > tbody > tr > .qt-table-head,
div.qt-render table.qt-table-lined > tbody > tr > .qt-table-lead {
    background-color: var(--qt-table-head-background);
}

div.qt-render table.qt-table-lined > tbody > tr > .qt-table-head {
    border-bottom: var(--qt-table-head-line);
}

div.qt-render table.qt-table-lined > tbody > tr > .qt-table-lead {
    border-right: var(--qt-table-head-line);
}

/* Columns: a wide gutter, with a line down its middle, and the outer columns' content going right
   to the table's edges */
div.qt-render table.qt-table-cols > tbody > tr > .qt-table-cell {
    padding: var(--qt-cols-cell-padding);
}

div.qt-render table.qt-table-cols > tbody > tr > .qt-table-first {
    padding-left: 0;
}

div.qt-render table.qt-table-cols > tbody > tr > .qt-table-last {
    padding-right: 0;
}

div.qt-render table.qt-table-cols > tbody > tr > .qt-table-cell:not(.qt-table-first) {
    border-left: var(--qt-cols-line);
}

/* Charts: lines between the columns, a darker one after any leaders, and lines below the header row
   and along the bottom. Along the top is a double line, the upper one being the table's own border,
   above its padding, so the lines between the columns stop short of it. Its borders are kept apart
   from its cells' for that, and lie along its whole width, which merged cells can't break. Only the
   header row is styled differently. */

div.qt-render {
    --qt-chart-line: 1px solid #999999;
    --qt-chart-lead-line: 2px solid #999999;
    --qt-chart-double-gap: 0.2em;
    --qt-chart-head-variant: small-caps;
}

div.qt-render table.qt-table-chart {
    border-collapse: separate;
    border-spacing: 0;
    border-top: var(--qt-chart-line);
    border-bottom: var(--qt-chart-line);
    padding-top: var(--qt-chart-double-gap);
}

div.qt-render table.qt-table-chart > tbody > tr:first-child > .qt-table-cell {
    border-top: var(--qt-chart-line);
}

div.qt-render table.qt-table-chart > tbody > tr > .qt-table-cell:not(.qt-table-last) {
    border-right: var(--qt-chart-line);
}

div.qt-render table.qt-table-chart > tbody > tr > .qt-table-lead:not(.qt-table-last) {
    border-right: var(--qt-chart-lead-line);
}

div.qt-render table.qt-table-chart > tbody > tr > .qt-table-head {
    border-bottom: var(--qt-chart-line);
    font-variant: var(--qt-chart-head-variant);
}

div.qt-render table.qt-table-chart > tbody > tr > .qt-table-lead:not(.qt-table-head) {
    font-weight: normal;
    color: var(--qt-text-color);
}

/* Boxes (see RenderHtml.toHtml). A box is plain ({, structural only), filled ({:), filled more
   vibrantly ({;), hollow ({., an outline only), or dark ({=, with light text). */

div.qt-render {
    --qt-box-margin: 0 0 var(--qt-paragraph-gap) 0;
    --qt-box-padding: 0.5em 0.9em;
    --qt-box-border: 1px solid #BBBBBB;
    --qt-box-radius: 12px;
    --qt-box-fill: #f2f2f2;
    --qt-box-vibrant-fill: #c9f0ff;
    --qt-box-vibrant-border: 1px solid #A8BCE6;
    --qt-box-dark-fill: navy;
    --qt-box-dark-text: white;

    /* The colours a dark box changes, as they are outside it, for anything pale inside it */
    --qt-box-normal-heading-color: var(--qt-heading-color);
    --qt-box-normal-bullet-color: var(--qt-bullet-color);
    --qt-box-normal-number-color: var(--qt-number-color);
    --qt-box-normal-table-head-color: var(--qt-table-head-color);
}

/* Shrinks to fit its content, up to full width */
div.qt-render div.qt-box {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin: var(--qt-box-margin);
    padding: var(--qt-box-padding);
    border: var(--qt-box-border);
    border-radius: var(--qt-box-radius);
}

/* Full width when holding a table, whose width is a share of the box's, and when filling a cell */
div.qt-render div.qt-box:has(> table.qt-table),
div.qt-render .qt-table-cell div.qt-box {
    width: auto;
}

div.qt-render div.qt-box-plain {
    width: auto;
    padding: 0;
    border: none;
    border-radius: 0;
}

div.qt-render div.qt-box-filled {
    background-color: var(--qt-box-fill);
}

div.qt-render div.qt-box-vibrant {
    background-color: var(--qt-box-vibrant-fill);
    border: var(--qt-box-vibrant-border);
}

/* A dark box: its text, and the headings, bullets, numbers and table headers in it, are light */
div.qt-render div.qt-box-dark {
    background-color: var(--qt-box-dark-fill);
    border-color: var(--qt-box-dark-fill);
    color: var(--qt-box-dark-text);
    --qt-heading-color: var(--qt-box-dark-text);
    --qt-bullet-color: var(--qt-box-dark-text);
    --qt-number-color: var(--qt-box-dark-text);
    --qt-table-head-color: var(--qt-box-dark-text);
}

/* Anything with a pale background in a dark box has the usual colours again */
div.qt-render div.qt-box-dark div.qt-box-filled,
div.qt-render div.qt-box-dark div.qt-box-vibrant,
div.qt-render div.qt-box-dark tr.qt-table-stripe > .qt-table-cell {
    color: var(--qt-text-color);
}

div.qt-render div.qt-box-dark div.qt-box-filled,
div.qt-render div.qt-box-dark div.qt-box-vibrant,
div.qt-render div.qt-box-dark tr.qt-table-stripe > .qt-table-cell,
div.qt-render div.qt-box-dark table.qt-table-lined > tbody > tr > .qt-table-head,
div.qt-render div.qt-box-dark table.qt-table-lined > tbody > tr > .qt-table-lead {
    --qt-heading-color: var(--qt-box-normal-heading-color);
    --qt-bullet-color: var(--qt-box-normal-bullet-color);
    --qt-number-color: var(--qt-box-normal-number-color);
    --qt-table-head-color: var(--qt-box-normal-table-head-color);
}

/* The box's padding provides the space around its content */
div.qt-render div.qt-box > :first-child {
    margin-top: 0;
}

div.qt-render div.qt-box > :last-child {
    margin-bottom: 0;
}