/* =====================================================================
   utilities.css — the small set of helpers that exist so views never
   carry a style attribute. Deliberately short: a utility that is used
   once should have been a component class instead.
   ===================================================================== */

/* -- Text ------------------------------------------------------------ */
.u-muted     { color: var(--c-ink-3) !important; }
.u-dim       { color: var(--c-ink-4) !important; }
.u-bad       { color: var(--c-bad) !important; }
.u-center    { text-align: center; }
.u-ink       { color: var(--c-ink) !important; }
.u-mono      { font-family: var(--mono); font-size: var(--fs-sm); }
.u-xs        { font-size: var(--fs-xs); }
.u-sm        { font-size: var(--fs-sm); }
.u-md        { font-size: var(--fs-md); }
.u-medium    { font-weight: 500; }
.u-semibold  { font-weight: 600; }
.u-nowrap    { white-space: nowrap; }
.u-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-break     { word-break: break-word; }

/* Small uppercase label used above groups of fields and in tiles. */
.u-eyebrow {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-ink-3);
}

/* -- Layout ---------------------------------------------------------- */
.u-min-0     { min-width: 0; }
.u-shrink-0  { flex-shrink: 0; }
.u-fill      { flex: 1 1 auto; }
.u-w-auto    { width: auto !important; }
.u-full      { width: 100%; }

/* Vertical rhythm inside panels, so views stop guessing margins. */
.u-stack > * + * { margin-top: 12px; }
.u-stack-sm > * + * { margin-top: 7px; }
.u-stack-lg > * + * { margin-top: 20px; }

.u-row { display: flex; align-items: center; gap: 10px; }
.u-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.u-row-top { display: flex; align-items: flex-start; gap: 12px; }

/* -- Scroll ---------------------------------------------------------- */
.scroll-y      { max-height: 400px; overflow-y: auto; }
.scroll-y--tall{ max-height: 520px; }

/* Wide tables scroll inside their panel, never the page. */
.table-wrap { overflow-x: auto; }

/* -- Sticky ---------------------------------------------------------- */
.u-sticky { position: sticky; top: calc(var(--header-h) + 18px); }

/* -- Definition list ------------------------------------------------- */
.kv {
    display: grid;
    grid-template-columns: minmax(96px, 148px) 1fr;
    gap: 9px 16px;
    font-size: var(--fs-md);
    margin: 0;
}
.kv--tight { grid-template-columns: 96px 1fr; }
.kv dt { color: var(--c-ink-3); font-weight: 400; }
.kv dd { margin: 0; color: var(--c-ink); }

/* -- Divider --------------------------------------------------------- */
.u-rule { border: 0; border-top: 1px solid var(--c-line); margin: 18px 0; }

/* -- Entrance -------------------------------------------------------- */
.u-rise { animation: rise var(--t-slow) var(--ease-out) both; }
.u-fade { animation: fade var(--t-mid) var(--ease) both; }