/* layout */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.none { flex: none; }
.start { align-items: flex-start; }
.end { justify-content: flex-end; }
.between { justify-content: space-between; }
.center { justify-content: center; }
.stretch { align-items: stretch; }
.gap-1 { gap: var(--s1); }
.gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); }
.gap-6 { gap: var(--s6); }
.gap-8 { gap: var(--s8); }
.ml-auto { margin-left: auto; }
.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-6 { margin-top: var(--s6); }
.mb-2 { margin-bottom: var(--s2); }
.mb-3 { margin-bottom: var(--s3); }
.mb-4 { margin-bottom: var(--s4); }
.p-3 { padding: var(--s3); }
.p-4 { padding: var(--s4); }
.px-4 { padding-left: var(--s4); padding-right: var(--s4); }
.w-full { width: 100%; }
.h-full { height: 100%; }
.scroll { overflow: auto; min-height: 0; }
.rel { position: relative; }
.hidden { display: none !important; }

/* text */
.t-11 { font-size: var(--fs-11); }
.t-12 { font-size: var(--fs-12); }
.t-13 { font-size: var(--fs-13); }
.t-14 { font-size: var(--fs-14); }
.t-16 { font-size: var(--fs-16); }
.t-18 { font-size: var(--fs-18); }
.t-20 { font-size: var(--fs-20); }
.t-24 { font-size: var(--fs-24); }
.fw-5 { font-weight: 500; }
.fw-6 { font-weight: 600; }
.muted { color: var(--ink-3); }
.muted-2 { color: var(--ink-2); }
.faint { color: var(--ink-4); }
.c-accent { color: var(--accent); }
.c-ok { color: var(--ok); }
.c-warn { color: var(--warn); }
.c-bad { color: var(--bad); }
.c-stale { color: var(--stale); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.serif { font-family: var(--font-doc); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.upper { letter-spacing: 0.06em; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* section label: small caps-like heading for panels */
.label {
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

/* surfaces */
.surface { background: var(--surface); }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.card-pad { padding: var(--s4); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.vdivider { width: 1px; align-self: stretch; background: var(--line); }
.hover-row { transition: background var(--t-fast) var(--ease); cursor: pointer; }
.hover-row:hover { background: var(--surface-2); }

.anim-in { animation: fade-up var(--t-med) var(--ease) both; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes shimmer {
  from { background-position: -200px 0; }
  to { background-position: 200px 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.skeleton {
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--paper-2) 0, var(--paper-3) 40px, var(--paper-2) 80px);
  background-size: 400px 100%;
  animation: shimmer 1.2s linear infinite;
  height: 10px;
}

.spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
  display: inline-block;
  flex: none;
}