/* Reusable components: tags, pills, columns, code, lists */

.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--tag-ink, var(--t-default));
  background: var(--tag-bg, var(--b-default));
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--tag-ink, var(--t-default));
  background: var(--tag-bg, var(--b-default));
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Two-column layout */
.columns { display: flex; gap: 48px; flex-wrap: wrap; }
.col { flex: 1 1 0; min-width: 240px; }

/* Code block */
.codeblock {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 16px 0;
  overflow-x: auto;
}
.codeblock code {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre;
}

/* Lists */
ul.notion-list, ol.notion-list { margin: 8px 0; padding-left: 1.5em; }
ul.notion-list li, ol.notion-list li { margin: 5px 0; }

/* Contact + timeline rows */
.contact p { margin: 4px 0; color: var(--ink); }
.entry { margin: 7px 0; }
.entry .when { color: var(--ink-faint); margin-right: 8px; font-variant-numeric: tabular-nums; }