/*
 * The declarations that were being written inline, given names.
 *
 * Measured across the app screens (email and print templates excluded, since
 * mail clients only honour inline styles): 433 static `style=""` attributes
 * carrying 173 distinct declarations. The top twenty account for most of
 * them — `font-size:11px` twenty times, `margin-right:15px` forty-two,
 * `display:none` thirty-four.
 *
 * None of these is broken today. The cost is that every one of them beats any
 * stylesheet, so a change made in CSS silently loses to markup written months
 * ago — which is exactly how the checkbox column's width hid for an hour.
 *
 * Only the repeated ones get classes. A declaration used once is not a
 * pattern, and inventing a name for it makes the stylesheet longer without
 * making anything easier to change. Anything holding a Blade expression stays
 * inline: a class cannot carry a value that differs per row.
 *
 * Names are deliberately boring and describe the value, not the intent. `u-fs-11`
 * says what it does; a name like `u-caption` would be a guess about why, and a
 * wrong guess is worse than no guess when the same value serves three purposes
 * across three screens.
 */

/* ==========================================================================
   Type sizes
   ========================================================================== */

.u-fs-11 { font-size: 11px; }
.u-fs-12 { font-size: 12px; }
.u-fs-13 { font-size: 13px; }
.u-fs-15 { font-size: 15px; }
.u-fs-16 { font-size: 16px; }
.u-fs-20 { font-size: 20px; }

/*
 * On a phone these floors lift with the rest of the type — an 11px label is
 * unreadable at arm's length, and a utility class should not be the one place
 * that opts out of that.
 */
@media (max-width: 767.98px) {
    .u-fs-11 { font-size: 12px; }
    .u-fs-12 { font-size: 12px; }
}

/* ==========================================================================
   Spacing
   ========================================================================== */

.u-mr-15 { margin-right: 15px; }
.u-ml-51 { margin-left: 51px; }

/* ==========================================================================
   Fixed sizes
   ========================================================================== */

/* Icon and avatar squares, which are the same handful of sizes everywhere. */
.u-sq-15 { width: 15px; height: 15px; }
.u-sq-16 { width: 16px; height: 16px; }
.u-sq-36 { width: 36px; height: 36px; }

.u-w-120 { width: 120px; }
.u-w-25p { width: 25%; }

/* ==========================================================================
   Behaviour
   ========================================================================== */

.u-hidden  { display: none; }
.u-cell    { display: table-cell; }
.u-click   { cursor: pointer; }
.u-rel     { position: relative; }
.u-top-0   { top: 0; }
.u-top-30  { top: 30px; }
.u-right   { float: right; }
.u-z-max   { z-index: 99999; }

/* ==========================================================================
   Emphasis
   ========================================================================== */

/*
 * `color:red` appeared eight times. Red is not a colour here, it is a
 * meaning — something is wrong — so the token carries it and dark mode gets
 * a red that is legible on a dark ground rather than the raw keyword.
 */
.u-danger { color: var(--ds-crit, #C4314B); }
.u-strong { color: var(--ds-ink, #101725); font-weight: 700; }