@import url("./site.css");

/* ── Tiling grid (homepage layout) ── */
.tiling-grid {
	display: grid;
	gap: var(--space-xl);
	margin-top: var(--space-xl);
	&.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tile { min-width: 0; margin-top: 0; }
.tile-1 { grid-column: span 1; }
.tile-2 { grid-column: span 2; }

@media (max-width: 1040px) {
	.tiling-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tile-1, .tile-2 { grid-column: span 1; }
}
@media (max-width: 820px) {
	.tiling-grid.cols-3 { grid-template-columns: 1fr; }
	.tile-1, .tile-2 { grid-column: span 1; }
}

/* ── Hero ── */
.hero-info {
	padding: var(--space-xl) var(--space-lg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow-y: auto;
}
.hero-name {
	font-family: var(--font-mono);
	font-size: var(--text-hero);
	font-weight: 600;
	letter-spacing: var(--tracking-normal);
	line-height: var(--lh-tight);
	margin-top: var(--space-xs);
	margin-bottom: var(--space-2xs);
}
.hero-info-grid {
	display: grid;
	gap: 0;
	font-size: var(--text-label);
	font-family: var(--font-mono);
	line-height: var(--lh-base);
}

/* ── Inline text utilities ── */
.text-accent { color: var(--accent); }
.text-dim { color: var(--ink-dim); }
.text-ink { color: var(--ink); }

/* ── ASCII-style progress bars ── */
.bar {
	display: inline-grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-md);
	align-items: center;
	font-family: var(--font-mono);
	font-size: var(--text-label);
	width: 100%;
}
.bar .track {
	position: relative;
	height: var(--space-md);
	background: repeating-linear-gradient(90deg, var(--ink-ghost) 0, var(--ink-ghost) 1px, transparent 1px, transparent 2.5%);
	border: var(--border-rule);
}
.bar .fill {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	background: var(--accent);
	background-image: repeating-linear-gradient(90deg, var(--accent) 0, var(--accent) var(--space-2xs), color-mix(in srgb, var(--accent) 75%, black 0%) var(--space-2xs), color-mix(in srgb, var(--accent) 75%, black 0%) var(--space-2xs));
}
.bar .pct {
	color: var(--ink-dim);
	font-variant-numeric: tabular-nums;
	min-width: 42px;
	text-align: right;
}
.bar .label {
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-meta);
	text-transform: uppercase;
	color: var(--ink-faint);
}
.metric {
	display: grid;
	gap: var(--space-2xs);
	margin-bottom: var(--space-md);
}
.metric .row1 {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-meta);
	text-transform: uppercase;
	color: var(--ink-faint);
}
.metric .row1 .num {
	color: var(--accent);
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

/* ── Project rows (homepage compact) ── */
.proj-row.side-by-side { padding: 0; }
.proj-row.side-by-side .pname {
	display: flex; align-items: center; gap: var(--space-xs);
	padding: var(--space-md) var(--space-sm) var(--space-sm);
	transition: color 0.1s;
}
.proj-row.side-by-side:hover .pname { color: var(--accent); }
.proj-row.side-by-side .pname .kind {
	margin-left: auto; align-self: center;
	font-size: var(--text-micro); letter-spacing: var(--tracking-wide);
	text-transform: uppercase; padding: 1px 7px;
	border: var(--border-rule); border-radius: var(--border-radius);
	background: transparent; color: var(--ink-faint); flex-shrink: 0;
}
.proj-row.side-by-side .pname .kind.web    { border-color: var(--color-web);     color: var(--color-web); }
.proj-row.side-by-side .pname .kind.tool   { border-color: var(--color-tool);    color: var(--color-tool); }
.proj-row.side-by-side .pname .kind.gamedev { border-color: var(--color-gamedev); color: var(--color-gamedev); }
.proj-row.side-by-side .blurb {
	margin-top: 0; padding: 0 var(--space-sm);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.proj-row.side-by-side .tags { margin-top: 0; padding: var(--space-sm); }
.proj-row.side-by-side .tags span.t-0 { color: var(--essay); }
.proj-row.side-by-side .tags span.t-1 { color: var(--devlog); }
.proj-row.side-by-side .tags span.t-2 { color: var(--warn); }
.proj-row.side-by-side .tags span.t-3 { color: var(--review); }
.proj-row.side-by-side .tags span.t-4 { color: var(--note); }

/* ── Status dot for homepage project rows ── */
.home-dot {
	display: inline-block; width: 8px; height: 8px; border-radius: 50%;
	margin-right: var(--space-xs); vertical-align: middle; position: relative; top: -1px;
}
.home-dot.active { background: var(--ok); }
.home-dot.wip { background: var(--warn); border: 1px solid var(--warn); }
.home-dot.archived { border: 1px solid var(--ink-faint); background: transparent; }

/* ── Codestats panel ── */
.codestats-header { margin-bottom: var(--space-md); }
.codestats-name {
	font-family: var(--font-mono); font-size: var(--text-title); font-weight: 600;
	margin-bottom: var(--space-xs); display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap;
}
.codestats-name .u { color: var(--accent); }
.codestats-name .dim { color: var(--ink-faint); }
.codestats-total-bar { margin-bottom: var(--space-2xs); }
.codestats-next {
	font-size: var(--text-micro); color: var(--ink-faint); text-align: right;
}

/* ── Stats grid (repos/commits/streak) ── */
.stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xs) var(--space-lg);
	font-family: var(--font-mono);
	margin-bottom: var(--space-lg);
	&.numbers-only {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-xl) var(--space-md);
		margin-bottom: 0;
		margin-top: var(--space-md);
		&.code-stats { grid-template-columns: repeat(3, 1fr); }
	}
	& .stat-label {
		font-size: var(--text-micro);
		text-transform: uppercase;
		letter-spacing: var(--tracking-meta);
		text-align: center;
		margin-bottom: var(--space-2xs);
		color: var(--ink-faint);
		&.hint {
			text-decoration: underline dotted var(--ink-ghost);
			cursor: help;
		}
	}
	& .stat-num {
		font-size: var(--text-title); font-weight: 600; color: var(--accent);
		font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight);
		text-align: center; margin-top: 0; line-height: var(--lh-tight);
	}
}

/* ── ASCII divider rule ── */
.ascii-rule {
	display: flex; align-items: center; gap: var(--space-md);
	color: var(--ink-faint); font-size: var(--text-label);
	letter-spacing: var(--tracking-wide); text-transform: uppercase;
	margin: var(--space-lg) 0 var(--space-sm);
	& .l, & .r {
		flex: 0 1; height: 0; width: 2ch; border-top: 1px dashed var(--border);
	}
	& .r { flex: 1; }
}

/* ── Homepage listing rows (ls ~/) ── */
.listing { margin: 0 calc(var(--space-2xs) * -1); }
.listing .col-hd {
	display: grid; gap: var(--space-md);
	padding: var(--space-xs) var(--space-sm);
	font-size: var(--text-micro); letter-spacing: var(--tracking-wide);
	text-transform: uppercase; color: var(--ink-faint);
	border-bottom: var(--border-rule);
}
.listing .row {
	display: grid; gap: var(--space-md);
	padding: var(--space-md) var(--space-sm);
	align-items: baseline;
	border-bottom: 1px dashed var(--border);
	color: var(--ink); font-family: var(--font-mono);
	font-size: var(--text-label); transition: background 0.1s;
}
.listing a.row { color: inherit; text-decoration: none; }
.listing a.row:hover { background: var(--accent-dim); text-decoration: none; }
.listing .row:last-child { border-bottom: none; }
.listing .size {
	color: var(--ink-dim); text-align: right;
	font-variant-numeric: tabular-nums; font-size: var(--text-base);
}
.listing .name { color: var(--accent); }
.listing .note {
	color: var(--ink-dim); font-family: var(--font-sans); font-size: var(--text-label);
}
.listing .arrow { color: var(--ink-faint); text-align: right; }

.grid-home {
	grid-template-columns: 1fr 2fr 1fr 20px;
	align-items: baseline;
}

.box > .box-tag[data-live="ok"] {
	border-color: var(--ok);
	color: var(--ok);
}
.box > .box-tag[data-live="err"] {
	border-color: var(--err);
	color: var(--err);
}