/*
== == == == == == == == == == == == == == == == == == == == == == == == ==
TITLE:			timcode-site.css -- styles for timcode.dev and the TMTG demo and documentation pages
AUTHOR:			Timothy Beto
CONTACT:		tim@timcode.dev (bug reports and feature requests)
LICENSE:		MIT License, Copyright (c) 2026 Timothy Beto; full text at https://opensource.org/license/mit
DESCRIPTION:	Shared look for the timcode.dev home page, tmtg.html, tmtg-readme.html, and tmtg-docs.html. The TMTG gallery doesn't need it (that's tmtg.css).
== == == == == == == == == == == == == == == == == == == == == == == == ==
*/

/* Colors: dark by default; timcode-site.js sets data-theme="light" on <html> when the visitor chooses light */
:root {
	--body-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono-font: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
	--bg: #111113;
	--ink: #f2f2f4;
	--muted: #9a9aa2;
	--card: #1c1c1f;
	--line: #2c2c31;
	--link: #6aa8ff;
	color-scheme: dark;
}
:root[data-theme="light"] {
	--bg: #fff;
	--ink: #1d1d1f;
	--muted: #6e6e73;
	--card: #f5f5f7;
	--line: #e3e3e8;
	--link: #0a5bd3;
	color-scheme: light;
}

/* ---------------------------------------------------------------- shared */
*, *::before, *::after {
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 0 16px;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--body-font);
	line-height: 1.55;
}
.site-header, .masthead, main, footer {
	max-width: 76rem;
	margin-inline: auto;
}
h1 {
	margin: 0;
	font-size: clamp(2.6rem, 2rem + 4vw, 4.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.03em;
}
h2 {
	margin: 0 0 .75rem;
	font-size: 1.15rem;
	letter-spacing: -.01em;
}
a {
	color: var(--link);
}
.ver {
	color: var(--muted);
	font-weight: 400;
}
.subtitle {
	margin: .5rem 0 0;
	font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem);
	color: var(--muted);
}
pre {
	margin: 0 0 1rem;
	padding: 1rem 1.1rem;
	overflow-x: auto;
	font-size: .85rem;
	line-height: 1.5;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
}
code {
	font-family: var(--mono-font);
}
:not(pre) > code {
	background: var(--card);
	padding: .1em .35em;
	border-radius: 5px;
	font-size: .9em;
}
footer {
	text-align: center;
	padding-block: 2rem 3rem;
	font-size: .9rem;
	color: var(--muted);
	border-top: 1px solid var(--line);
}
footer p {
	margin: .25rem 0;
}

/* The light/dark toggle: one button, its state in aria-pressed (on = light), with a sun or moon icon */
.theme-toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: .5rem;
	font: inherit;
	font-size: .85rem;
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
}
.theme-toggle:hover {
	border-color: var(--muted);
}
.theme-toggle:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 2px;
}
.theme-toggle svg {
	width: 1rem;
	height: 1rem;
}
.theme-toggle .moon, [data-theme="light"] .theme-toggle .sun {
	display: none;
}
[data-theme="light"] .theme-toggle .moon {
	display: inline;
}

/* crossfade between themes, where the browser has View Transitions (timcode-site.js) */
::view-transition-old(root), ::view-transition-new(root) {
	animation-duration: .3s;
}

/* KYB: the first Tab stop; it stays off screen until it has focus, then jumps past the site menu */
.skip {
	position: absolute;
	left: -999rem;
	top: .5rem;
	z-index: 1;
	padding: .5rem .9rem;
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
}
.skip:focus {
	left: 16px;
}

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--line);
}
.site-nav ul, .doc .site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* tighter on small phones, so the menu doesn't push the page down */
@media (max-width: 26rem) {
	.site-nav ul, .doc .site-nav ul {
		column-gap: .9rem;
		font-size: .9rem;
	}
}
.site-nav li, .doc .site-nav li {
	margin: 0;
}
.site-nav a {
	color: var(--ink);
	text-decoration: none;
}
/* the way back to the whole site, set apart from the pages of this project */
.site-nav .home a {
	font-weight: 700;
}
.site-nav a:hover {
	text-decoration: underline;
}
/* the page you're on: underlined, so it's not marked by color alone */
.site-nav a[aria-current="page"] {
	color: var(--link);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .3em;
}
.doc a:focus-visible, .site-nav a:focus-visible, .skip:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------- demo page */
.masthead {
	text-align: center;
	padding-block: 2.5rem 1.5rem;
}
.lede {
	width: fit-content;
	margin-inline: auto;
}
.intro {
	width: 0;
	min-width: 100%;
	margin: 1.25rem 0 0;
	text-align: left;
	font-size: 1.05rem;
}
.showcase, .whatsnew {
	display: grid;
	gap: 2rem 2.5rem;
	align-items: start;
	padding-block: 2rem;
}
.showcase {
	grid-template-columns: minmax(0, 2.2fr) minmax(15rem, 1fr);
}
.whatsnew {
	grid-template-columns: minmax(0, 1.3fr) minmax(15rem, 1fr);
}
.install {
	padding-block: 2rem;
}
.install, .whatsnew {
	border-top: 1px solid var(--line);
}
@media (max-width: 52rem) {
	.whatsnew {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 64rem) {
	.showcase {
		grid-template-columns: minmax(0, 1fr);
	}
}
.features ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.features li {
	position: relative;
	margin-bottom: .55rem;
	padding-left: 1.6rem;
}
.features li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--link);
	font-weight: 700;
}
.features strong {
	display: inline;
}
@media (min-width: 36rem) and (max-width: 64rem) {
	.features ul {
		columns: 2;
		column-gap: 2rem;
	}
	.features li {
		break-inside: avoid;
	}
}
.notes .rel {
	margin: 0 0 .6rem;
	font-weight: 600;
}
.notes .rel .ver {
	font-weight: 400;
}
.notes ul {
	margin: 0 0 1rem;
	padding-left: 1.2rem;
}
.notes li {
	margin-bottom: .3rem;
}
.steps ol {
	padding-left: 1.3rem;
	margin: 0 0 1rem;
}
.steps li {
	margin-bottom: .4rem;
}

/* the Files list, drawn as a folder tree */
.files {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.25rem 1.4rem;
}
.tree {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--mono-font);
	font-size: .9rem;
}
.tree li:not(.grp) {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .3rem 0 .3rem 1.4rem;
	position: relative;
}
.tree li:not(.grp)::before {
	content: "\251C\2500";
	position: absolute;
	left: 0;
	opacity: .45;
}
.tree li:not(.grp):has(+ .grp)::before, .tree li:not(.grp):last-child::before {
	content: "\2514\2500";
}
.tree .note {
	opacity: .65;
	white-space: nowrap;
	font-family: var(--body-font);
	font-size: .85rem;
}
.tree .grp {
	font-family: var(--body-font);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .7;
	margin-top: .9rem;
}
.tree .grp:first-child {
	margin-top: 0;
}
.tree a {
	text-decoration: none;
}
.tree a:hover {
	text-decoration: underline;
}
.dir {
	margin: 0 0 .5rem;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-weight: 600;
}

/* the demo gallery's colors, matched to the page's theme */
#tmtgContainer {
	--tmtg-background: #000;
	--tmtg-foreground: #fff;
	--tmtg-accent: #0b3d91;
	--tmtg-corner-radius: 16px;
}
[data-theme="light"] #tmtgContainer {
	--tmtg-background: #f5f5f7;
	--tmtg-foreground: #1d1d1f;
}

/* ---------------------------------------------------------------- documentation pages */
/* a narrower column than the demo: long lines of text are hard to follow back to the next line */
.doc .site-header, .doc main, .doc footer {
	max-width: 50rem;
	margin-inline: auto;
}

.doc-head {
	padding-block: 2.5rem 1.5rem;
}
.doc h1 {
	font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
}
.eyebrow {
	margin: 0 0 .5rem;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .04em;
}
.doc-head .subtitle {
	margin-top: .75rem;
}
.doc .lede {
	width: auto;
	font-size: 1.05rem;
}

/* headings land a little below the top of the window when reached by a link */
.doc [id] {
	scroll-margin-top: 1rem;
}
.doc section {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
}
.doc h2 {
	margin-bottom: 1rem;
	font-size: clamp(1.4rem, 1.25rem + .6vw, 1.75rem);
}
.doc h3 {
	margin: 2.25rem 0 .75rem;
	font-size: 1.2rem;
}
.doc h4 {
	margin: 1.75rem 0 .5rem;
	font-size: 1.05rem;
}
.doc p, .doc ul, .doc ol, .doc dl {
	margin: 0 0 1rem;
}
.doc ul, .doc ol {
	padding-left: 1.4rem;
}
.doc li {
	margin-bottom: .4rem;
}
.doc li > p:last-child {
	margin-bottom: 0;
}
/* the plain-text docs wrapped code by hand; here long lines wrap instead of making the box scroll sideways */
.doc pre {
	white-space: pre-wrap;
	overflow-wrap: break-word;
}
.doc :not(pre) > code {
	overflow-wrap: break-word;
}
kbd {
	padding: .05em .4em;
	font-family: var(--mono-font);
	font-size: .85em;
	background: var(--card);
	border: 1px solid var(--line);
	border-bottom-width: 2px;
	border-radius: 5px;
}

/* the home page's title and section headings; the font file holds only basic Latin plus the curly apostrophe and en and em dashes, so it's about 5 KB (SIL Open Font License, in pixelify-sans-OFL.txt) */
@font-face {
	font-family: "Pixelify Sans";
	src: url("pixelify-sans.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
.site-title {
	color: var(--muted);
}
.site-title span {
	color: var(--ink);
	font-family: "Pixelify Sans", var(--mono-font);
	font-size: 1.02em;
	font-weight: 400;
	letter-spacing: 0;
}
.site-home h2 {
	font-family: "Pixelify Sans", var(--mono-font);
	font-weight: 400;
	letter-spacing: 0;
}

/* the home page's project cards */
.project {
	padding: 1.25rem 1.4rem;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
}
.doc .project h3 {
	margin-top: 0;
}
/* a small picture of the project on the left; above the text on phones, where the columns would be too narrow */
.doc .project:has(.project-art-link) {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	gap: 1.4rem;
	align-items: center;
}
.project-art-link, .project-art {
	display: block;
}
.project-art {
	width: 100%;
	height: auto;
	/* the frame's stroke reaches the edge of the viewBox, and the height is a fraction of a pixel, so clipping can cut off the bottom line */
	overflow: visible;
}
@media (max-width: 36rem) {
	.doc .project:has(.project-art-link) {
		grid-template-columns: minmax(0, 1fr);
	}
	.project-art-link {
		justify-self: center;
		width: 100%;
		max-width: 16rem;
	}
}
/* the drawing's colors follow the theme */
.art-frame {
	fill: var(--bg);
	stroke: var(--line);
}
.project-art-link:hover .art-frame {
	stroke: var(--link);
}
.art-tile {
	fill: var(--line);
}
.art-shape {
	fill: var(--muted);
}
.art-outline {
	fill: none;
	stroke: var(--muted);
	stroke-width: 1.5;
}
.art-current {
	stroke: var(--link);
	stroke-width: 2;
}
.doc .project-links {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.doc .project-links li {
	margin: 0;
}

/* the table of contents */
.toc {
	padding: 1.25rem 1.4rem;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
}
.toc h2 {
	font-size: 1.15rem;
}
.doc .toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
.doc .toc li {
	margin-bottom: .45rem;
}
/* a section's topics flow along a line or two under it, rather than one per line */
.doc .toc ul {
	display: flex;
	flex-wrap: wrap;
	gap: .15rem 1rem;
	margin: .3rem 0 .6rem 1.4rem;
	padding: 0;
	list-style: none;
	font-size: .9rem;
}
.doc .toc ul li {
	margin: 0;
}
.back {
	margin-top: 1.5rem;
	font-size: .9rem;
}

/* term and description lists (attributes, functions, keys, languages) */
.defs {
	display: grid;
	grid-template-columns: fit-content(45%) minmax(0, 1fr);
	gap: .5rem 1.25rem;
}
.defs dt {
	font-weight: 600;
}
.defs dd {
	margin: 0;
}
@media (max-width: 36rem) {
	.defs {
		display: block;
	}
	.defs dd {
		margin: .15rem 0 .75rem 1rem;
	}
}

/* KYB: wide tables scroll sideways inside their box on small screens; tabindex lets keyboard users scroll them too */
.table-wrap {
	margin: 0 0 1.25rem;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: 12px;
}
.table-wrap:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 2px;
}
.doc table {
	width: 100%;
	min-width: 32rem;
	border-collapse: collapse;
	font-size: .95rem;
}
.doc table.options {
	min-width: 40rem;
}
.doc th, .doc td {
	padding: .6rem .8rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}
.doc tbody tr:last-child > * {
	border-bottom: 0;
}
.doc thead th {
	background: var(--card);
	font-size: .85rem;
}
.doc tbody th {
	font-weight: 400;
}
.doc td p, .doc td ul {
	margin-bottom: .5rem;
}
.doc td > :last-child {
	margin-bottom: 0;
}

.doc footer {
	margin-top: 3rem;
}

/* ---------------------------------------------------------------- printing */
/* black on white whatever the theme, without the controls that do nothing on paper */
@media print {
	:root, :root[data-theme="light"] {
		--bg: #fff;
		--ink: #000;
		--muted: #444;
		--card: #f3f3f3;
		--line: #ccc;
		--link: #000;
		color-scheme: light;
	}
	body {
		padding: 0;
		font-size: 11pt;
	}
	.skip, .theme-toggle, .site-nav, .back {
		display: none;
	}
	.site-header {
		border: 0;
		padding: 0;
	}
	.doc .site-header, .doc main, .doc footer {
		max-width: none;
	}
	.table-wrap {
		overflow: visible;
	}
	.doc table, .doc table.options {
		min-width: 0;
	}
	pre, .defs dt, .defs dd, li {
		break-inside: avoid;
	}
	h2, h3, h4, .defs dt {
		break-after: avoid;
	}
}