/* Layout utilities: small, single-purpose classes for building screens without new CSS. */

.is-hidden { display: none !important; }

.row { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; }

.grow { flex: 1; min-width: 0; }

.full-width { width: 100%; }

.pad { padding: var(--space-4) var(--space-5); }

.text-muted { margin: var(--space-2) 0; color: var(--color-text-muted); font-size: 14px; }

.text-small { font-size: 12px; }

.text-error { margin: var(--space-2) 0; color: var(--color-danger); font-size: 14px; }

.text-danger { color: var(--color-danger) !important; }

.label { color: var(--color-text-muted); font-size: var(--font-size-sm); }

.empty { padding: 30px var(--space-6); color: var(--color-text-muted); text-align: center; }

.offscreen { position: absolute; left: -999px; width: 1px; height: 1px; opacity: 0; }

/* a screen: leaves room for the bottom nav and the rest timer */
.view { padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 80px); }

.card { margin: var(--space-4) var(--space-gutter); padding: var(--space-4) var(--space-5); border-radius: var(--radius-xl); background: var(--color-surface); }

.card > input { margin: var(--space-3) 0; }

.stack-inputs input { margin: var(--space-3) 0; }

.plain-list { margin: 0; padding: 0; list-style: none; }