/*
** moncycle.app -- terms of service: the style shared by term_of_service_fr.html and term_of_service_en.html
**
** One column. Light or dark, from the browser's own setting. The green of the app is for the titles only.
** The HTML stays plain (h1-h3, p, ul, table, b, i, mark): the few rules by id or class are noted below.
** Print: white page, black text, no navigation, external links spelled out.
*/

:root {
	color-scheme: light dark;
	--bg: #ffffff;
	--text: #1d2421;
	--muted: #5a6560;
	--line: #d8dedb;
	--soft: #f3f6f4;
	--title: #1e824c;
	--mark-bg: #ffe58a;
	--mark-text: #1d2421;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #131715;
		--text: #e3e8e5;
		--muted: #9aa5a0;
		--line: #2e3733;
		--soft: #1b211e;
		--mark-bg: #6b5a12;
		--mark-text: #ffffff;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	max-width: 44rem;
	margin: 0 auto;
	padding: 1.5rem 1.25rem 4rem;
	background: var(--bg);
	color: var(--text);
	font: 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	overflow-wrap: break-word;
}

/* Titles: the only place the green is used */

h1, h2, h3 {
	line-height: 1.25;
}

h1 {
	margin: 1rem 0 .5rem;
	color: var(--title);
	font-size: 1.9rem;
}

h2 {
	margin: 2.75rem 0 1rem;
	padding-bottom: .3rem;
	border-bottom: 1px solid var(--line);
	color: var(--title);
	font-size: 1.5rem;
}

h3 {
	margin: 1.75rem 0 .5rem;
	font-size: 1.1rem;
}

section {
	scroll-margin-top: 1rem;
}

h2[id], h3[id] {
	scroll-margin-top: 1rem;
}

/* Text */

p, ul, ol, table {
	margin: 0 0 1rem;
}

ul, ol {
	padding-left: 1.5rem;
}

li {
	margin-bottom: .35rem;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

a:hover {
	text-decoration-thickness: 2px;
}

a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

code {
	padding: .05em .3em;
	border-radius: .25em;
	background: var(--soft);
	font-size: .9em;
}

/* Something still to be filled in before publication */

mark {
	padding: .05em .3em;
	border-radius: .25em;
	background: var(--mark-bg);
	color: var(--mark-text);
}

header p, footer p {
	color: var(--muted);
	font-size: .95rem;
}

footer {
	margin-top: 3rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

/* Navigation: the language link and the table of contents (both left out of print) */

nav {
	margin: 0 0 1.25rem;
	font-size: .95rem;
}

nav ol {
	margin: .5rem 0 0;
	columns: 2 15rem;
	column-gap: 2rem;
}

nav li {
	break-inside: avoid;
}

/* The summary at the top (<section id="summary">) */

#summary {
	margin: 1.5rem 0;
	padding: .25rem 1.25rem .75rem;
	border: 1px solid var(--line);
	border-radius: .6rem;
	background: var(--soft);
}

#summary h2 {
	margin-top: 1rem;
	border-bottom: 0;
}

/* Tables */

table {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
	line-height: 1.5;
}

th, td {
	padding: .55rem .6rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

th {
	border-bottom-width: 2px;
}

@media (max-width: 36rem) {
	table {
		font-size: .88rem;
	}

	th, td {
		padding: .5rem .35rem;
	}
}

/* Print */

@media print {
	:root {
		--bg: #ffffff;
		--text: #000000;
		--muted: #444444;
		--line: #bbbbbb;
		--soft: #ffffff;
	}

	@page {
		size: A4;
		margin: 18mm 16mm;
	}

	html {
		font-size: 10.5pt;
	}

	body {
		max-width: none;
		padding: 0;
		line-height: 1.45;
	}

	nav {
		display: none;
	}

	h1 {
		margin-top: 0;
	}

	h2 {
		margin-top: 1.5rem;
		break-after: avoid;
	}

	h3 {
		break-after: avoid;
	}

	p, li {
		orphans: 3;
		widows: 3;
	}

	table, tr, li {
		break-inside: avoid;
	}

	thead {
		display: table-header-group;
	}

	a {
		text-decoration: none;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: .85em;
		overflow-wrap: anywhere;
	}

	mark {
		border: 1px solid #000000;
		background: none;
		color: #000000;
	}
}