/* ===================================================
   TABLE SYSTEM
   ===================================================
   The house table style, applied to EVERY markdown table on the site
   by layouts/_default/_markup/render-table.html. Authors write plain
   markdown and get this for free.

   The hook emits:
       <div class="opal-table-wrap">
         <table class="opal-table td-initial ...author classes">

   `td-initial` is mandatory, not cosmetic. Docsy styles every table
   inside .td-content and .td-box via `table:not(.td-initial)` at
   specificity 0-2-1, and one of those rules sets `overflow-x: auto`
   on the TABLE element -- which makes the table a scroll container, so
   its box fills the parent while thead/tbody collapse to content
   width. No single class can out-specify 0-2-1, so the only fix is to
   stop the selector matching.

   Per-table overrides use Goldmark block attributes on the line
   directly beneath the table (no blank line between):

       | Col | Col |
       |---|---|
       | a | b |
       {.table-scroll}

   Modifiers below. They compose -- `{.table-fixed .table-compact}` is
   fine. Nothing here is OPAL-specific except the `opal-` prefix; to
   reuse on another Docsy site, copy this file plus the render hook and
   rename the prefix.
   =================================================== */

/* --- Scroll container ---
   Ours, not Docsy's. blocks/section content sits outside .td-content,
   so the global table-wrapping script in hooks/body-end.html never
   sees those tables; and for the ones it does see, it now skips
   anything already wrapped here. One wrapper, one behaviour. */
.opal-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
}


/* ===================================================
   BASE
   =================================================== */

.opal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    /* Explicit, because .td-content td sets line-height: 35px in
       _styles_project.scss and would otherwise stretch every docs row. */
    line-height: 1.5;
}

.opal-table th,
.opal-table td {
    padding: 1.05rem 1.75rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid rgba(127, 127, 127, 0.22);
    border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

/* The generous padding is for the gaps BETWEEN columns. Pulling the
   outer edges back in keeps the table flush with the surrounding copy
   instead of looking inset. */
.opal-table th:first-child,
.opal-table td:first-child {
    padding-left: 0.25rem;
}

.opal-table th:last-child,
.opal-table td:last-child {
    padding-right: 0.25rem;
}

.opal-table thead th {
    padding-top: 0.6rem;
    padding-bottom: 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
    white-space: nowrap;
}

.opal-table tbody tr:hover {
    background: rgba(127, 127, 127, 0.08);
    background: color-mix(in srgb, currentColor 5%, transparent);
}

/* Every fill is mixed from currentColor, so a table inherits whatever
   surface it lands on -- gs-base, gs-slate, docs page, light or dark --
   without knowing which. */
.opal-table code {
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    background: rgba(127, 127, 127, 0.16);
    background: color-mix(in srgb, currentColor 11%, transparent);
    color: inherit;
    font-size: 0.9em;
}


/* ===================================================
   MODIFIER: .table-scroll
   ===================================================
   Natural width, no wrapping, scroll horizontally. For wide reference
   tables where squeezing columns hurts more than scrolling does --
   this is the behaviour docs tables had before the hook existed. */

.opal-table.table-scroll {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.opal-table.table-scroll th,
.opal-table.table-scroll td {
    white-space: nowrap;
}


/* ===================================================
   MODIFIER: .table-fixed
   ===================================================
   Fixed layout, so column widths are honoured exactly instead of being
   treated as hints. Under auto layout the browser sizes to content and
   dumps every spare pixel into the last column.

   Set widths per table with custom properties -- no utility classes to
   invent, and the numbers live next to the table they describe:

       {.table-fixed style="--col-1: 30%; --col-2: 55%; --col-3: 15%"}

   Any column left unset falls back to auto, so you can pin one column
   and let the rest distribute. */

.opal-table.table-fixed {
    table-layout: fixed;
}

.opal-table.table-fixed th:nth-child(1) { width: var(--col-1, auto); }
.opal-table.table-fixed th:nth-child(2) { width: var(--col-2, auto); }
.opal-table.table-fixed th:nth-child(3) { width: var(--col-3, auto); }
.opal-table.table-fixed th:nth-child(4) { width: var(--col-4, auto); }
.opal-table.table-fixed th:nth-child(5) { width: var(--col-5, auto); }
.opal-table.table-fixed th:nth-child(6) { width: var(--col-6, auto); }
.opal-table.table-fixed th:nth-child(7) { width: var(--col-7, auto); }
.opal-table.table-fixed th:nth-child(8) { width: var(--col-8, auto); }


/* ===================================================
   MODIFIER: .table-compact
   =================================================== */

.opal-table.table-compact th,
.opal-table.table-compact td {
    padding: 0.55rem 0.9rem;
}

.opal-table.table-compact th:first-child,
.opal-table.table-compact td:first-child {
    padding-left: 0.25rem;
}


/* ===================================================
   DEFENSIVE
   ===================================================
   If a table ever reaches .td-content without the hook (raw HTML in
   content, say) the wrapping script may give it .td-table-wrapper,
   whose `width: max-content; table-layout: auto` (0-1-1) beats a bare
   class. Hold the line at higher specificity. */

.td-table-wrapper table.opal-table {
    width: 100%;
}

.td-table-wrapper .opal-table th,
.td-table-wrapper .opal-table td {
    white-space: normal;
}

.td-table-wrapper table.opal-table.table-scroll {
    width: max-content;
}

.td-table-wrapper .opal-table.table-scroll th,
.td-table-wrapper .opal-table.table-scroll td {
    white-space: nowrap;
}


/* ===================================================
   RESPONSIVE
   =================================================== */

@media (max-width: 40rem) {
    /* Wide gutters are a luxury of wide viewports -- claw them back. */
    .opal-table th,
    .opal-table td {
        padding: 0.85rem 0.75rem;
    }
}