/* rhys.wtf's tables of records (rhyswtf-apps, `rows`): accounts, jobs,
   spend, one thing to a row. A table reads across while its own box is
   wide enough for its columns; narrower than that, each row becomes a
   record: its title cell across the top, every other cell under its
   column's name, as many side by side as fit. Served at /static/rows.css
   and linked after the app's own stylesheet. Edit it in rhyswtf-web and
   sync, never in an app.

       <div class="rows">                 (the app gives it --rows-min)
         <div class="rows__gauge">
           <table>
             <thead><tr><th>Account</th><th>Email</th>…</tr></thead>
             <tbody><tr><td>@ada</td><td data-label="Email">…</td>…</tr></tbody>
           </table>
         </div>
       </div>

   - --rows-min is the table's own width: the width its columns need
     before they squeeze (measure it with the app's usual content). It
     follows the table's box, never the window, so the same table works
     in a narrow column on a desktop and across a phone.
   - A cell with `data-label` shows it above its value once stacked; a
     cell without one (the row's title: a handle, a name) runs across the
     record's top, wherever its column is. `rows__wide` makes a labelled
     cell run across the record too (a cell of buttons, a list). Empty
     cells go.
   - Long identifiers (emails, ids, subjects, titles people chose): mark
     their cell, or the part of it, `rows__id`, and they wrap anywhere.
     In the table that lets their column give way first, and only to the
     room left once the other columns have their words whole (everything
     else wraps between words: `anywhere` on every cell would let a wide
     column squeeze the others to a letter a line). In a record, every
     cell wraps anywhere as a last resort. An unmarked token too long for
     the table would be clipped, so mark anything a person or a machine
     chose.
   - An app's own tweaks for the stacked records go in the same container
     query as below (rows::STACKED). */

/* The threshold. Container queries can't read a custom property, so the
   one query below asks a fixed width (100rem) of a gauge that is
   100rem - --rows-min wider than the table's room: the gauge is under
   100rem exactly when the room is under --rows-min. The table inside
   takes the room back, and the gauge's overhang (blank) is clipped, with
   a little margin either side for focus rings. --rows-min must be under
   100rem. */
.rows {
    --rows-min: 40rem;
    overflow-x: clip;
    padding-inline: 0.25rem;
    margin-inline: -0.25rem;
}

.rows__gauge {
    container: rows / inline-size;
    width: calc(100% + 100rem - var(--rows-min));
}

.rows__gauge > table {
    width: calc(100% - 100rem + var(--rows-min));
}

.rows td {
    overflow-wrap: break-word;
}

.rows .rows__id {
    overflow-wrap: anywhere;
}

.rows td::before {
    content: attr(data-label);
    display: none;
}

/* Stacked: below --rows-min (above). Each row a grid of cells of at least
   --rows-cell (9rem), as many across as fit; the column names (the
   header) move into the cells as their labels. */
@container rows (width < 100rem) {
    .rows thead {
        display: none;
    }

    .rows table,
    .rows tbody {
        display: block;
    }

    .rows tr {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--rows-cell, 9rem)), 1fr));
        gap: 0.4rem 1rem;
        padding: 0.65rem 0;
        border-bottom: 1px solid var(--color-border, currentColor);
    }

    .rows td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        overflow-wrap: anywhere;
    }

    .rows td:not([data-label]) {
        grid-column: 1 / -1;
        order: -1;
    }

    .rows td.rows__wide {
        grid-column: 1 / -1;
    }

    .rows td:empty {
        display: none;
    }

    .rows td[data-label]::before {
        display: block;
        font-size: 0.8em;
        color: var(--color-muted, inherit);
    }
}