/** High-level layout, theming and typography */

.body {
	margin: 0;
	padding: 0;
	min-height: 100vh; display: flex; flex-direction: column;
	background: var(--bg);
}

main {
	flex: 1;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 28px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.page-content { flex: 1; min-width: 0; }

body { font-family: var(--font-sans); color: var(--ink); }

h1       { font-size: 24px;   font-weight: 600; letter-spacing: -0.4px; }
h2       { font-size: 15px;   font-weight: 600; letter-spacing: -0.2px; }
.body     { font-size: 14px;   font-weight: 500; }
.body-sm  { font-size: 13px; }
.caption  { font-size: 12.5px; color: var(--muted); }
.eyebrow  { font-size: 11px;   font-weight: 500;
            text-transform: uppercase; letter-spacing: 1px;
            color: var(--muted); }
.mono     { font-family: var(--font-mono); font-size: 13px; }
.mono-sm  { font-family: var(--font-mono); font-size: 11.5px; }
.branch   { font-family: var(--font-mono); color: var(--accent); }


.card    { border: 1px solid var(--line); border-radius: var(--r-xl);
           background: var(--panel); padding: 0; }

.control { border: 1.5px solid var(--line); border-radius: var(--r-lg); }

/* Active = swap border color, not width — prevents 0.5px jitter on selection */
.control[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

.horizontal-small-gap {
	display: inline-flex; align-items: stretch; gap: 10px;
  margin: 8px 0px;
	margin-bottom: 16px;
}