/* Force the light palette, browser furniture included.
 *
 * UNFOLD["THEME"] = "light" stamps class="light" on <html>, which keeps
 * Unfold's own dark: variants switched off. That covers everything Unfold
 * paints, but says nothing about what the *browser* paints: with the OS in
 * dark mode the UA still renders scrollbars, <select> popups, date pickers
 * and autofilled inputs dark, and Chrome on Android will auto-darken the
 * whole page on top of that. color-scheme opts all of it back out.
 *
 * Two declarations on purpose: "only" (which is what disables Chrome's
 * auto-darkening outright) is newer than the property itself, and a browser
 * that does not know the keyword drops that whole line and keeps the first.
 */
:root {
    color-scheme: light;
    color-scheme: light only;
}

/* Narrow-phone tuning for changelist tables.
 *
 * On a small handset (or any phone with Display size turned up) the columns
 * are already at their minimum content width, so what is left over the edge
 * is cell padding: 12px each side on every column. Halving it buys back
 * roughly 16px per column, which is the difference between fitting and
 * scrolling sideways.
 *
 * Unfold injects UNFOLD["STYLES"] before its own stylesheet, so these rules
 * are keyed off #result_list - an id selector outranks Tailwind's classes
 * without needing !important.
 */
@media (max-width: 480px) {
    #result_list th,
    #result_list td {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* A long unbreakable token - an email address, a URL - sets a cell's
     * minimum width and so the whole table's. "anywhere" (unlike "break-word")
     * feeds into intrinsic sizing, so the column can shrink below it. */
    #result_list th,
    #result_list td {
        overflow-wrap: anywhere;
    }

    /* First cell is the drag/expand control, which ships with no padding of
     * its own; keep it that way so the tap target does not shrink. The
     * :not([colspan]) matters - an expanded row's section cell spans the whole
     * table, so it is a first-child too and was getting flattened to the edges
     * along with it. */
    #result_list th:first-child:not([colspan]),
    #result_list td:first-child:not([colspan]) {
        padding-left: 0;
        padding-right: 0;
    }

    /* The expanded row's contents, kept clear of the table edge. */
    #result_list td[colspan] {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Unfold's two-line header cell carries "text-right lg:text-left", so below
 * 1024px it right-aligns while every column beside it stays left-aligned,
 * leaving the row ragged. An id selector outranks the utility class, and
 * targeting the span rather than the class name keeps this working if Unfold
 * renames it.
 */
@media (max-width: 1023px) {
    #result_list th,
    #result_list td,
    #result_list th span,
    #result_list td span {
        text-align: left;
    }
}

/* Browsers give <fieldset> an implicit min-width: min-content, so a fieldset
 * refuses to shrink below the widest thing inside it and overflows its own
 * parent - on the quote change form that was 341px of fieldset in a 288px
 * column. Every change form is built from fieldsets, so reset it for all of
 * them rather than waiting to be bitten on the next one.
 */
#content fieldset {
    min-width: 0;
}