:root {
	--bg: #f6f5f1;
	--surface: #ffffff;
	--text: #1d1c1a;
	--muted: #6b6862;
	--line: #e4e1da;
	--accent: #2f6b4f;
	--accent-text: #ffffff;
	--accent-soft: #e3efe8;
	--done: #2f8f5b;
	--shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.04);
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #141413;
		--surface: #1e1d1b;
		--text: #ecebe7;
		--muted: #9d9a93;
		--line: #2f2e2b;
		--accent: #6fbf95;
		--accent-text: #0f1f17;
		--accent-soft: #1f3329;
		--done: #2f8f5b;
		--shadow: none;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--bg);
	color: var(--text);
	font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

.wrap {
	max-width: 760px;
	margin: 0 auto;
	padding-left: max(16px, env(safe-area-inset-left));
	padding-right: max(16px, env(safe-area-inset-right));
}

.muted { color: var(--muted); }
.small-text { font-size: 0.85rem; }

.masthead {
	padding-top: max(32px, env(safe-area-inset-top));
	padding-bottom: 24px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 1.35rem;
	font-weight: 650;
	letter-spacing: -0.01em;
}

.tagline {
	margin: 6px 0 0;
	color: var(--muted);
}

.status { color: var(--muted); }
.status:empty { display: none; }

.card {
	padding: 18px 16px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.tools {
	display: grid;
	gap: 12px;
}

.tool-card {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 16px;
}
.tool-card > div {
	flex: 1 1 240px;
	min-width: 0;
}
.tool-name {
	margin: 0;
	font-size: 1.1rem;
	letter-spacing: -0.01em;
}
.tool-desc {
	margin: 2px 0 0;
	color: var(--muted);
}

.section-heading {
	margin: 24px 0 12px;
	font-size: 1.05rem;
}

.area-note { margin: 12px 0 0; }

.tool-card > .tool-download {
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}
.download-details {
	flex: 1 1 100%;
	min-width: 0;
}
.download-details summary { cursor: pointer; }
.download-details p {
	margin: 8px 0 0;
	overflow-wrap: anywhere;
}
.download-details p:empty { display: none; }
.download-details code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.download-link {
	display: inline-block;
	margin-top: 8px;
	font-weight: 600;
}

.button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 0;
	border-radius: 9px;
	background: var(--accent);
	color: var(--accent-text);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s;
}
.button:hover { filter: brightness(1.08); }
.button:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.button:disabled { opacity: 0.5; cursor: default; filter: none; }
.button.secondary {
	background: var(--accent-soft);
	color: var(--accent);
}
.button.small {
	padding: 6px 12px;
	font-size: 0.9rem;
}

/* 16px text keeps iPhone Safari from zooming the page in when a box is tapped. */
.text-input {
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--bg);
	color: var(--text);
	font: inherit;
	font-size: 16px;
}
.text-input:focus {
	outline: 3px solid var(--accent-soft);
	border-color: var(--accent);
}

.field-label {
	display: block;
	margin-bottom: 6px;
	color: var(--muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.install-hint {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
	padding: 12px 16px;
	border-radius: 14px;
	background: var(--accent-soft);
}
.install-hint[hidden] { display: none; }
.install-hint p { margin: 0; }

.linkish {
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.tool-head {
	padding-top: max(16px, env(safe-area-inset-top));
	padding-bottom: 16px;
}
.tool-head h1 {
	margin: 8px 0 0;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
}
.back {
	font-weight: 600;
	text-decoration: none;
}
.back::before { content: "‹ "; }

.footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	padding-top: 32px;
	padding-bottom: 32px;
	color: var(--muted);
	font-size: 0.85rem;
}
.footer a,
.footer .linkish {
	color: var(--muted);
	font-weight: 400;
	text-decoration: underline;
}
.footer [hidden] { display: none; }
.footer form { margin: 0; }
.footer-links {
	display: flex;
	gap: 16px;
}

/* The sign-in page, served by the login gate (SoftwareSite\auth\auth.py). */

a.brand {
	color: var(--text);
	text-decoration: none;
}

.auth {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px 16px;
}

.auth-card {
	width: 100%;
	max-width: 380px;
	padding: 28px 24px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.auth-card h1 {
	margin: 24px 0 4px;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
}

.auth-card .muted { margin: 0 0 16px; }

.auth-form {
	display: grid;
	gap: 12px;
}
.auth-form .button { justify-content: center; }

.code-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--bg);
	color: var(--text);
	font: 600 1.5rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
	letter-spacing: 0.25em;
	text-align: center;
}
.code-input:focus {
	outline: 3px solid var(--accent-soft);
	border-color: var(--accent);
}

.auth-form .text-input { width: 100%; }
.auth-form .field-label { margin-bottom: -6px; }

.auth-error {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 9px;
	background: color-mix(in srgb, #c0392b 12%, transparent);
}

.auth-note {
	margin: 0 0 14px;
	color: var(--muted);
}

.auth-back { margin: 18px 0 0; }

.link-device {
	display: grid;
	gap: 2px;
	margin: 0 0 14px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 9px;
	overflow-wrap: anywhere;
}
.link-device form { margin: 4px 0 0; }