/* One stylesheet for every page on apps.marie.ee.

   Two parents. The brand is the Marie Rosin Health ecosystem app's: its MR
   mark, gold on the deep green of its start screen, with Cinzel for the name.
   Light mode keeps marie.ee's warm cream and cocoa ink, which gold sits on as
   naturally as it sits on green. Brass is ornament only on cream (2.4:1), so
   links and buttons there use a deeper gold that clears 4.5:1.

   Still no framework and no CDN: these pages are legal and store-required, they
   must render on anything, and a dependency here is a thing that can break a
   store submission on a day nobody is looking. The fonts are served from this
   server for the same reason, and because the CSP would refuse them from
   anywhere else. */

/* Lora and Inter, both SIL OFL (fonts/OFL-*.txt). Variable, so one file covers
   every weight. Split into latin and latin-ext because Estonian needs both: õ ä
   ö ü are in latin, š and ž are not. The unicode-range values are Google Fonts'
   own, so a page in English never downloads the latin-ext half. */
@font-face {
	font-family: Lora; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url(fonts/lora-latin-wght-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Lora; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url(fonts/lora-latin-ext-wght-normal.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: Lora; font-style: italic; font-weight: 400 700; font-display: swap;
	src: url(fonts/lora-latin-wght-italic.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Lora; font-style: italic; font-weight: 400 700; font-display: swap;
	src: url(fonts/lora-latin-ext-wght-italic.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cinzel, SIL OFL, for the brand name only: classical capitals, as in the
   ecosystem app. Latin only, since the name is ASCII capitals in every language. */
@font-face {
	font-family: Cinzel; font-style: normal; font-weight: 400 900; font-display: swap;
	src: url(fonts/cinzel-latin-wght-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url(fonts/inter-latin-wght-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	color-scheme: light dark;
	--ground: #f8f5ef;      /* marie.ee background */
	--glow: #fbf0da;        /* the golden-hour wash at the top of the page */
	--surface: #fffdf9;
	--ink: #2e2316;
	--heading: #5a4633;
	--ink-soft: #6e5c41;
	--line: #e8ddd1;
	--brass: #c89a3d;       /* ornament only: 2.4:1 on --ground */
	--brass-pale: #f2dbb4;
	--link: #855f14;        /* 5.3:1 */
	--button: #8f681b;      /* white on it is 5.0:1 */
	--button-hover: #7a5812;
	--button-ink: #fff;
	--danger: #a3321f;
	--ok: #3f7350;
	--shadow: 0 1px 2px rgba(90, 70, 51, .06), 0 10px 30px -14px rgba(90, 70, 51, .22);
	--serif: Lora, "Iowan Old Style", Georgia, "Times New Roman", serif;
	--display: Cinzel, "Trajan Pro", Georgia, serif;
	--brand-ink: #7a5812;
	--sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark mode is the ecosystem app's start screen: near-black green, gold. */
@media (prefers-color-scheme: dark) {
	:root {
		--ground: #0d1410;
		--glow: #16241b;
		--surface: #141e17;
		--ink: #ece5d2;
		--heading: #e6cd93;
		--ink-soft: #aea58e;
		--line: #243129;
		--brass: #c9a45c;
		--brass-pale: #3a3a24;
		--link: #e2c27f;
		--button: #d9b66e;
		--button-hover: #e8c880;
		--button-ink: #0d1410;
		--brand-ink: #e2c27f;
		--danger: #ee8a72;
		--ok: #86c49a;
		--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
	}
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	padding: 0 1rem;
	min-height: 100vh;
	background: radial-gradient(ellipse 90% 36rem at 50% -12rem, var(--glow), transparent 70%) no-repeat, var(--ground);
	color: var(--ink);
	font: 16px/1.65 var(--sans);
	text-rendering: optimizeLegibility;
}

main, .top, footer.site { max-width: 44rem; margin: 0 auto; }
main { padding: 1rem 0 2rem; }
.wide main, .wide .top, .wide footer.site { max-width: 60rem; }

h1, h2, h3 { font-family: var(--serif); color: var(--heading); font-weight: 500; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 2.75rem); line-height: 1.15; margin: 1.5rem 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 2.75rem 0 .6rem; }
h3 { font-size: 1.1rem; margin: 1.75rem 0 .35rem; font-weight: 600; }
p { margin: 0 0 1rem; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }

/* The gold sprig from marie.ee, under every page title. */
h1::after {
	content: "";
	display: block;
	width: 5.5rem;
	height: 2.3rem;
	margin-top: .6rem;
	background: url(img/leaf.svg) no-repeat left center / contain;
}

.lede { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: 1.2rem; line-height: 1.55; margin-bottom: 1.25rem; }
.muted { color: var(--ink-soft); font-size: .9rem; }

/* --- header ------------------------------------------------------------- */

.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0 .5rem; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.brand img { width: 40px; height: 40px; flex: none; }
.brand span { font-family: var(--display); font-weight: 500; font-size: .92rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-ink); line-height: 1.2; }

.langs { display: flex; gap: .15rem; padding: .2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .8rem; font-weight: 600; letter-spacing: .06em; }
.langs a { color: var(--ink-soft); text-decoration: none; padding: .2rem .65rem; border-radius: 999px; }
.langs a[aria-current=true] { background: var(--brass-pale); color: var(--heading); }

/* --- building blocks ---------------------------------------------------- */

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: var(--shadow);
	padding: 1.5rem 1.5rem .5rem;
	margin: 0 0 1.5rem;
}
.card h2 { margin-top: 0; }

/* A list of short statements, each with a bold head and a quieter line under
   it. Marked with a brass diamond rather than a bullet. */
.what { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.what li { position: relative; padding: .8rem 0 .8rem 1.6rem; border-top: 1px solid var(--line); }
.what li:first-child { border-top: 0; }
.what li::before { content: ""; position: absolute; left: .2rem; top: 1.35rem; width: .45rem; height: .45rem; background: var(--brass); transform: rotate(45deg); }
.what strong { display: block; color: var(--heading); }
.what span { color: var(--ink-soft); font-size: .93rem; }

.note { border-left: 3px solid var(--brass-pale); background: var(--surface); padding: .6rem .9rem; border-radius: 0 10px 10px 0; color: var(--ink-soft); margin: 0 0 1rem; }
.note strong { color: var(--ink); }

/* Contents of a long page, built by site.js from its own h2s. */
.toc { margin: 0 0 2rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.toc p { margin: 0 0 .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.toc ol { margin: 0; padding-left: 1.3rem; columns: 2 16rem; column-gap: 2rem; font-size: .93rem; }
.toc li { break-inside: avoid; padding: .1rem 0; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
h2[id] { scroll-margin-top: 1rem; }

/* The support page's shortcuts: the four things people come there to do. */
.tasks { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .6rem; }
.tasks a { display: flex; align-items: center; gap: .65rem; height: 100%; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--heading); font-weight: 600; font-size: .95rem; line-height: 1.3; transition: border-color .15s; }
.tasks a:hover { border-color: var(--brass); }
.tasks svg { width: 1.3rem; height: 1.3rem; color: var(--brass); flex: none; }

/* --- forms -------------------------------------------------------------- */

label { display: block; font-weight: 600; margin: 0 0 .35rem; font-size: .93rem; color: var(--heading); }

input[type=email], input[type=password], input[type=text] {
	width: 100%;
	padding: .75rem .9rem;
	font: inherit;
	color: var(--ink);
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: 12px;
	margin-bottom: 1rem;
}
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

button {
	font: inherit;
	font-weight: 600;
	padding: .75rem 1.4rem;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	background: var(--button);
	color: var(--button-ink);
	transition: background-color .15s;
}
button:hover { background: var(--button-hover); }
button.danger { background: var(--danger); color: #fff; }
button.quiet { background: transparent; color: var(--ink); border-color: var(--line); }
button.quiet:hover { background: var(--ground); }
button[disabled] { opacity: .5; cursor: not-allowed; }

@media (prefers-color-scheme: dark) {
	button.danger { color: #1c150d; }
}

.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; }
.error { color: var(--danger); font-weight: 600; }
.done { color: var(--ok); }

/* --- the front page ----------------------------------------------------- */

/* The app's start screen: its mark and name on the dark botanical ground,
   whichever mode the page is in, so the colours here are fixed. */
.hero {
	margin: .5rem 0 2.5rem; padding: clamp(2.5rem, 7vw, 4.5rem) 1.5rem;
	border-radius: 24px; box-shadow: var(--shadow); text-align: center;
	background: #0f1712 url(img/botanical.svg) center / cover no-repeat;
}
.hero .emblem { display: block; width: clamp(96px, 16vw, 144px); height: auto; margin: 0 auto 1rem; }
.hero .wordmark {
	font-family: var(--display); font-weight: 500; text-transform: uppercase;
	font-size: clamp(1.75rem, .9rem + 3.6vw, 3.1rem); letter-spacing: .12em; line-height: 1.15;
	margin: 0 0 1rem; color: #e2c27f;
	background: linear-gradient(180deg, #f2d895, #c99a45 65%, #a8792c);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero .wordmark::after { display: none; }
.hero .lede { color: #d9d0bb; max-width: 32rem; margin: 0 auto; }

/* The art is wide and its leaves are at the edges, so a phone showing the
   middle of it would show almost none. Lean it to the side with the most. */
@media (max-width: 40rem) {
	.hero { background-size: auto 100%; background-position: 88% center; }
	.brand span { font-size: .8rem; letter-spacing: .12em; }
}

.pages { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.pages a {
	display: flex; flex-direction: column; gap: .3rem; height: 100%;
	padding: 1.25rem 1.35rem 1.35rem; text-decoration: none; color: var(--ink);
	background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
	transition: transform .15s, border-color .15s;
}
.pages a:hover { transform: translateY(-2px); border-color: var(--brass); }
.pages svg { width: 1.75rem; height: 1.75rem; color: var(--brass); margin-bottom: .35rem; }
.pages strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--heading); }
.pages span { color: var(--ink-soft); font-size: .93rem; }

/* Group labels on the front page: a quiet caption, not another heading to read. */
h2.group { font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .75rem; }


/* --- the 404 ------------------------------------------------------------ */

.lost { text-align: center; padding: 3rem 0 1rem; }
.lost h1::after { margin-left: auto; margin-right: auto; background-position: center; }

/* --- footer ------------------------------------------------------------- */

footer.site { margin-top: 3.5rem; padding: 0 0 2.5rem; text-align: center; font-size: .88rem; color: var(--ink-soft); }
footer.site .divider { display: block; width: 161px; max-width: 60%; height: auto; margin: 0 auto 1.5rem; }
footer.site nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.4rem; margin-bottom: 1rem; font-size: .93rem; }
footer.site nav a[aria-current=page] { color: var(--ink); text-decoration: none; font-weight: 600; }
footer.site p { margin: 0 0 .3rem; }