/* ==========================================================================
   Layout utilities (u-*) — replace the former static inline style="" attributes in index.html
   (hygiene sprint 2026-10-29). Single-purpose and loaded last so they behave like the old inline
   declarations. Inline styles that remain in index.html are JS-owned state (display: none,
   hero fill width / pace tick left) or data-bound swatch colours.
   ========================================================================== */

.u-dashed-box {
  margin-top: 0.65rem;
  padding: 0.65rem;
  border-radius: 8px;
  border: 1px dashed var(--border-subtle);
  background: var(--bg-subtle);
}
.u-modal-wide {
  max-width: 960px;
  width: 95vw;
  max-height: 92vh;
  overflow-y: auto;
}
.u-block { display: block; }
.u-flex { display: flex; }
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-justify-between { justify-content: space-between; }
.u-justify-end { justify-content: flex-end; }
.u-justify-start { justify-content: flex-start; }
.u-flex-wrap { flex-wrap: wrap; }
.u-shrink-0 { flex-shrink: 0; }
.u-text-left { text-align: left; }
.u-font-mono { font-family: var(--font-mono); }
.u-fs-0p78 { font-size: 0.78rem; }
.u-fs-0p8 { font-size: 0.8rem; }
.u-fs-0p82 { font-size: 0.82rem; }
.u-fs-0p92 { font-size: 0.92rem; }
.u-fw-600 { font-weight: 600; }
.u-lh-1p45 { line-height: 1.45; }
.u-lh-1p5 { line-height: 1.5; }
.u-lh-1p55 { line-height: 1.55; }
.u-scroll-y { overflow-y: auto; }
.u-maxh-210 { max-height: 210px; }
.u-maxw-380 { max-width: 380px; }
.u-cols-110-1fr { grid-template-columns: 110px 1fr; }
.u-cols-145-1fr { grid-template-columns: 145px 1fr; }
.u-cols-1fr-130 { grid-template-columns: 1fr 130px; }
.u-cols-1fr-140 { grid-template-columns: 1fr 140px; }
.u-cols-1fr-1fr { grid-template-columns: 1fr 1fr; }
.u-gap-0p4 { gap: 0.4rem; }
.u-gap-0p45 { gap: 0.45rem; }
.u-gap-0p5 { gap: 0.5rem; }
.u-gap-0p65 { gap: 0.65rem; }
.u-gap-0p75 { gap: 0.75rem; }
.u-p-0p65-0p75 { padding: 0.65rem 0.75rem; }
.u-p-0p7 { padding: 0.7rem; }
.u-p-0p75 { padding: 0.75rem; }
.u-pt-0p5 { padding-top: 0.5rem; }
.u-pt-0p75 { padding-top: 0.75rem; }
.u-pt-0p85 { padding-top: 0.85rem; }
.u-mt-0 { margin-top: 0; }
.u-mt-0p15 { margin-top: 0.15rem; }
.u-mt-0p25 { margin-top: 0.25rem; }
.u-mt-0p3 { margin-top: 0.3rem; }
.u-mt-0p35 { margin-top: 0.35rem; }
.u-mt-0p4 { margin-top: 0.4rem; }
.u-mt-0p45 { margin-top: 0.45rem; }
.u-mt-0p5 { margin-top: 0.5rem; }
.u-mt-0p55 { margin-top: 0.55rem; }
.u-mt-0p6 { margin-top: 0.6rem; }
.u-mt-0p65 { margin-top: 0.65rem; }
.u-mt-0p85 { margin-top: 0.85rem; }
.u-mt-0p9 { margin-top: 0.9rem; }
.u-mt-1 { margin-top: 1rem; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-0p25 { margin-bottom: 0.25rem; }
.u-mb-0p35 { margin-bottom: 0.35rem; }
.u-mb-0p4 { margin-bottom: 0.4rem; }
.u-mb-0p45 { margin-bottom: 0.45rem; }
.u-mb-0p5 { margin-bottom: 0.5rem; }
.u-mb-0p55 { margin-bottom: 0.55rem; }
.u-mb-0p65 { margin-bottom: 0.65rem; }
.u-mb-0p75 { margin-bottom: 0.75rem; }
.u-mb-0p85 { margin-bottom: 0.85rem; }
.u-mb-0p9 { margin-bottom: 0.9rem; }
.u-mb-1 { margin-bottom: 1rem; }
.u-mb-1p15 { margin-bottom: 1.15rem; }
.u-mb-1p25 { margin-bottom: 1.25rem; }
.u-mr-auto { margin-right: auto; }
.u-divider-top { border-top: 1px solid var(--border-subtle); }

/* JS reassigns className on these (54_view_settings.js), so they are keyed by id. */
#settings-key-status-badge {
  flex-shrink: 0;
  white-space: nowrap;
}