/*
 * MicsRO theme - base.
 *
 * Reset, type scale, the page shell (header, main column + aside, footer),
 * focus and motion. Components live in components.css, and everything the
 * older views and the stock default views still call is in compat.css.
 */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink);
	background: var(--ground);
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	color: var(--ink);
	background: linear-gradient(180deg, var(--ground) 0%, var(--ground2) 100%) fixed;
}

/* type scale: 15 / 17 / 20 / 26 / 34 / 44 */
h1, h2, h3, h4 {
	margin: 0 0 0.5em;
	font-family: var(--font-px);
	font-weight: 600;
	line-height: 1.1;
	color: var(--ink);
	letter-spacing: 0.01em;
	text-wrap: balance;
}
h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
h5, h6 { margin: 0 0 0.5em; font-size: 15px; font-weight: 700; }

p {
	margin: 0 0 1em;
	color: var(--ink);
	max-width: 72ch;
}
p:last-child { margin-bottom: 0; }

a {
	color: var(--accent);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

small { font-size: 13px; }
strong, b { font-weight: 700; }
hr { border: 0; border-top: 1px dotted var(--line); margin: 16px 0; }
img { max-width: 100%; height: auto; }
code, kbd, samp { font-family: var(--font-code); font-size: 0.93em; color: var(--accent); }

/* The pixel face is for words only: Pixelify's 5 reads as S and 8. Titles,
   window bars and the wordmark use it; every number - rates, times, counts,
   clocks, ranks, stat tiles, and a number inside a heading (wrap it in .n) -
   is the body face, bold, with tabular figures. */
.px {
	font-family: var(--font-px);
}
.num, .n,
h1 .n, h2 .n, h3 .n, h4 .n, .bar .n {
	font-family: var(--font-body);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: 0;
}
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* focus: the pink outline from the mockups, everywhere, keyboard only */
:focus-visible {
	outline: 2px solid var(--pink);
	outline-offset: 2px;
}
:focus:not(:focus-visible) {
	outline: none;
}

/* motion: only what answers an action, and none of it for those who opt out */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- shell ------------------------------------------------------------- */

.site-head {
	background: var(--win);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 50;
}
.site-head-inner {
	max-width: calc(var(--page) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
	min-height: 64px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
	text-decoration: none;
	flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand svg { display: block; width: 30px; height: 34px; shape-rendering: crispEdges; }
.brand-name {
	font-family: var(--font-px);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
}
.site-nav {
	display: flex;
	gap: 4px;
	flex-grow: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	/* a scrolling box clips on both axes: leave room so a tab's focus ring
	   (2px + 2px offset) is not cut off top and bottom */
	padding: 4px;
	margin: -4px;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.site-main {
	width: 100%;
	max-width: calc(var(--page) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 32px var(--gutter) 48px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	align-items: start;
	/* the grid fills the viewport (flex-grow); without this its rows stretch
	   to share the spare height, which on one column put ~330px of ground
	   between the content and the sidebar */
	align-content: start;
	flex-grow: 1;
}
.site-content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.site-aside {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: calc(var(--head-h) + 24px);
}

.site-foot {
	margin-top: auto;
	padding: 20px var(--gutter);
	font-size: 13px;
	color: var(--muted);
}
.site-foot-inner {
	max-width: var(--page);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
}
.site-foot a { color: var(--muted); text-decoration: underline; }
.site-foot a:hover { color: var(--ink); }
/* theme selector, only when the config lists more than one theme */
.site-foot-theme { display: inline-flex; align-items: center; gap: 8px; }
.site-foot-theme .input { width: auto; min-height: 30px; padding: 0 8px; font-size: 13px; }

/* Tablets and small laptops: the tabs no longer fit beside the logo and the
   account buttons, and a scrolling strip hid the last of them. They take a
   full-width second row instead; --head-h tells sticky columns below the
   header how tall it now is. */
@media (min-width: 721px) and (max-width: 1180px) {
	:root { --head-h: 88px; }
	.site-head-inner { flex-wrap: wrap; row-gap: 0; padding-top: 6px; }
	.brand { order: 1; }
	.site-actions { order: 2; margin-left: auto; }
	.site-nav { order: 3; flex-basis: 100%; margin: 0 -4px 4px; }
	.site-nav .nav-tab { padding: 0 10px; }
}

@media (max-width: 1000px) {
	.site-main {
		grid-template-columns: minmax(0, 1fr);
	}
	.site-aside {
		position: static;
	}
}

@media (max-width: 720px) {
	:root { --gutter: 16px; }
	.site-head-inner {
		flex-wrap: wrap;
		gap: 8px 16px;
		padding-top: 10px;
		padding-bottom: 8px;
	}
	/* Phones: the header scrolls away with the page. Pinned, its three rows took
	   a quarter of the screen over every page's content. */
	.site-head { position: static; }
	/* 1-2. Logo and actions share one row: a smaller wordmark and tighter buttons
	   fit both down to ~340px (signed in or out); narrower, the actions wrap. */
	.brand { order: 1; gap: 8px; }
	.brand svg { width: 24px; height: 28px; }
	.brand-name { font-size: 21px; }
	.site-actions { order: 2; margin-left: auto; gap: 6px; min-width: 0; }
	.site-actions .btn-sm { padding: 0 9px; font-size: 13px; }
	.site-actions .theme-toggle { width: 32px; min-width: 32px; padding: 0; }
	/* A long account name shortens instead of pushing Sign out off the row. */
	.site-actions a.btn-sm { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 32px; }
	/* 3. Every primary tab visible without swiping: a compact 3-column grid. */
	.site-nav {
		order: 3;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 4px;
		overflow: visible;
		padding: 0;
		margin: 0 0 2px;
	}
	.site-nav .nav-tab {
		min-width: 0;
		padding: 7px 4px;
		font-size: 13px;
		line-height: 1.15;
		text-align: center;
		justify-content: center;
		white-space: normal;
	}
	.site-main {
		padding-top: 20px;
		padding-bottom: 32px;
		gap: 16px;
	}
	.site-content { gap: 16px; }
	h1 { font-size: 28px; }
	h2 { font-size: 22px; }
}