/* The only stylesheet on the site.
 *
 * Hand-written, no framework. The colours, type scale, radii and shadows come from
 * docs/visual_identity.md; the Bootstrap application that document describes is not used here,
 * because the website is plain HTML (AGENT_GUIDE section 6).
 *
 * Light mode only. There is no dark-mode toggle and no prefers-color-scheme block: the
 * founder asked for a light background, and BUILD_BRIEF section 8 rules out the toggle.
 *
 * Loaded by: every page under website/.
 */

/* ---------------------------------------------------------------------------
 * The typeface, served from our own origin.
 *
 * Both files are variable fonts covering the whole weight range, so there is one file per
 * character subset rather than one per weight, and font-weight below is a range.
 * website/fonts/README.md says where they came from and why they are not loaded from a CDN.
 * ------------------------------------------------------------------------ */

@font-face {
	font-family: "Hanken Grotesk";
	src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	/* Finnish lives entirely in this range, including ä, ö and å. */
	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: "Hanken Grotesk";
	src: url("/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	/* š, ž and the rest. The browser only fetches this file if the page uses one of them. */
	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;
}

/* ---------------------------------------------------------------------------
 * Tokens. Every colour and size on the site is named here and nowhere else, so the palette
 * can be checked against docs/visual_identity.md in one place.
 * ------------------------------------------------------------------------ */

:root {
	/* From the identity document. */
	--emerald: #284139;
	--khaki: #f8d794;
	--wasabi: #809076;
	--earth: #b86830;
	--noir: #111a19;

	/* Neutrals. */
	--porcelain: #f3f4f1;
	--moss: #c9d2c5;

	/* Semantic tokens, light mode. */
	--surface-page: var(--porcelain);
	--surface-panel: #e8eae6;
	--text-primary: var(--noir);
	--text-body: #2d3230;
	--text-muted: #5a6359;
	--border-default: var(--moss);

	/* Radii. */
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;

	/* Neumorphic elevation. Used sparingly: the identity document puts reading surfaces at
	 * E0 (flat), and a marketing page is a reading surface. Only the demo panel and the
	 * signup form are raised. */
	--shadow-e1: 6px 6px 12px rgba(180, 185, 175, 0.5), -6px -6px 12px rgba(255, 255, 255, 0.8);

	/* Layout. --measure is the reading width and --page the wider band the header, the footer
	 * and the demo use.
	 *
	 * 44rem rather than the 36rem a typographer would pick: this page sits next to a demo that
	 * uses the full width, and the narrower measure made the text look pinched beside it. */
	--measure: 44rem;
	--page: 58rem;
}

/* ---------------------------------------------------------------------------
 * Base.
 * ------------------------------------------------------------------------ */

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

html {
	/* Anchor links land below the sticky header rather than under it. */
	scroll-padding-top: 4rem;
}

body {
	margin: 0;
	background: var(--surface-page);
	color: var(--text-body);
	font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	/* Never let a long word or a wide element push the page sideways on a phone. */
	overflow-wrap: break-word;
}

h1,
h2,
h3 {
	color: var(--text-primary);
	font-weight: 600;
	line-height: 1.3;
	margin: 2.5rem 0 0.75rem;
}

h1 {
	font-size: 2rem;
	margin-top: 0;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.25rem;
}

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

a {
	color: var(--emerald);
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--noir);
}

/* One focus style for the whole site, using the identity document's Wasabi focus ring.
 * Keyboard users need to see where they are; mouse users do not get the ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--wasabi);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* The skip link is invisible until it is focused, which is the first thing a keyboard user
 * reaches on the page. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--emerald);
	color: var(--porcelain);
	padding: 0.5rem 1rem;
	z-index: 10;
}

.skip-link:focus {
	left: 0;
}

/* ---------------------------------------------------------------------------
 * The wordmark: MAiSK, with "Ai" reversed out on an Emerald chip.
 *
 * It sits on the light band rather than on an Emerald one, because a dark chip needs a light
 * background behind it to read as a chip at all.
 * ------------------------------------------------------------------------ */

.wordmark {
	display: inline-flex;
	align-items: baseline;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--text-primary);
	text-decoration: none;
}

.wordmark__ai {
	background: var(--emerald);
	color: var(--porcelain);
	border-radius: var(--radius-sm);
	padding: 0.05em 0.18em;
	margin: 0 0.03em;
}

/* ---------------------------------------------------------------------------
 * Header and navigation. A light band with the wordmark and the links, and a thin Moss rule
 * under it. On the front page an Emerald band follows, carrying one sentence.
 * ------------------------------------------------------------------------ */

.site-header {
	background: var(--surface-page);
	border-bottom: 1px solid var(--border-default);
}

.site-header__inner {
	max-width: var(--page);
	margin: 0 auto;
	padding: 0.75rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	/* Wraps to two lines on a narrow phone instead of overflowing. */
	flex-wrap: wrap;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	/* Pushes the navigation away from the wordmark and holds it to the right on wide screens. */
	margin-left: auto;
	font-size: 0.9375rem;
}

.site-nav a {
	color: var(--text-muted);
	text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
	color: var(--emerald);
	text-decoration: underline;
}

/* The Emerald band. Compact on purpose: this is not a full-viewport hero, which
 * BUILD_BRIEF section 8 rules out and which is the look we are avoiding. */
.band {
	background: var(--emerald);
	color: var(--porcelain);
}

.band__inner {
	max-width: var(--page);
	margin: 0 auto;
	padding: 2.5rem 1.25rem;
}

.band h1 {
	color: var(--porcelain);
	max-width: 20ch;
}

.band p {
	max-width: var(--measure);
	font-size: 1.125rem;
	margin-bottom: 0;
	/* Porcelain at full strength on Emerald is the identity document's only allowed pairing;
	 * this is the same colour held back slightly so the heading stays dominant. */
	color: #dfe3dd;
}

/* ---------------------------------------------------------------------------
 * Page body.
 * ------------------------------------------------------------------------ */

main {
	max-width: var(--page);
	margin: 0 auto;
	padding: 0 1.25rem 4rem;
}

/* Body text fills the content column. --measure is kept for captions, notes and the consent
 * line, where a short line is easier to read and the text is secondary anyway. */
main h3 {
	max-width: var(--page);
}

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

/* A thin rule between sections, so the page has structure without boxes everywhere. */
section + section {
	border-top: 1px solid var(--border-default);
	margin-top: 2rem;
}

.lead {
	font-size: 1.125rem;
	color: var(--text-body);
}

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

/* A raised panel, E1. Used for the demo and the signup form and nothing else. */
.panel {
	background: var(--surface-panel);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-e1);
	padding: 1.5rem;
	margin: 1.5rem 0;
}

/* ---------------------------------------------------------------------------
 * Footer.
 * ------------------------------------------------------------------------ */

.site-footer {
	border-top: 1px solid var(--border-default);
	background: var(--surface-page);
}

.site-footer__inner {
	max-width: var(--page);
	margin: 0 auto;
	padding: 1.5rem 1.25rem 2.5rem;
	color: var(--text-muted);
	font-size: 0.875rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.site-footer a {
	color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
 * Content the founder has not written yet.
 *
 * Deliberately loud. A placeholder that looks like text is a placeholder that ships, and
 * step 1.6 fails the build while any of these remain.
 * ------------------------------------------------------------------------ */

.puuttuu {
	display: block;
	background: repeating-linear-gradient(
		45deg,
		rgba(184, 104, 48, 0.08),
		rgba(184, 104, 48, 0.08) 10px,
		transparent 10px,
		transparent 20px
	);
	border: 1px dashed var(--earth);
	border-radius: var(--radius-md);
	color: var(--earth);
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	max-width: var(--measure);
}

/* ---------------------------------------------------------------------------
 * The waitlist form.
 * ------------------------------------------------------------------------ */

.lomake__rivi {
	margin: 0 0 1rem;
}

.lomake label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.lomake input[type="email"],
.lomake input[type="text"] {
	display: block;
	width: 100%;
	max-width: 22rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-page);
	font: inherit;
	color: var(--text-body);
}

.lomake input:focus {
	border-color: var(--wasabi);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(128, 144, 118, 0.4);
}

/* The consent line is a sentence with a box in it, not a label above a field, so it reads as
 * something you agree to rather than as another thing to fill in. */
.lomake__suostumus label {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: 0.9375rem;
	max-width: var(--measure);
}

.lomake__suostumus input {
	margin-top: 0.25rem;
	flex-shrink: 0;
}

.lomake__vastaus {
	margin: 0.75rem 0 0;
	min-height: 1.5em;
	font-size: 0.9375rem;
}

.lomake__vastaus--virhe {
	color: var(--earth);
}

/* ---------------------------------------------------------------------------
 * The waitlist admin view at /waitlist/admin.
 *
 * Rendered by backend/waitlist/routes.py, which links this same stylesheet so the page looks
 * like the rest of the site without a second stylesheet to keep in step.
 * ------------------------------------------------------------------------ */

.admin main {
	max-width: var(--page);
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

.admin__count {
	font-weight: 600;
}

.admin__note {
	color: var(--text-muted);
	font-size: 0.875rem;
	max-width: var(--measure);
}

.admin__empty {
	color: var(--text-muted);
}

.admin__table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1.5rem;
	font-size: 0.9375rem;
}

.admin__table th,
.admin__table td {
	text-align: left;
	padding: 0.5rem 0.75rem 0.5rem 0;
	border-bottom: 1px solid var(--border-default);
	vertical-align: top;
}

.admin__table th {
	font-size: 0.8125rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Every row says this until there is an email provider to confirm with. It is meant to be
 * noticeable: the gap should be visible every time the list is opened. */
.admin__pending {
	color: var(--earth);
}

/* ---------------------------------------------------------------------------
 * The how-it-works demo: the five steps and a mock chat window, together.
 *
 * Built by website/demo.js from website/esimerkki.json. The window is shaped like a modern
 * chat composer - a rounded box with a round send button in the corner - because that is what
 * all of them look like. It carries no provider's logo, wordmark or colours.
 * ------------------------------------------------------------------------ */

.demo {
	padding: 1.25rem;
}

/* The five steps. The one the demo is showing is marked; the ones behind it are dimmed, so
 * the list doubles as a position indicator instead of repeating what the demo says. */
.vaiheet {
	list-style: none;
	counter-reset: vaihe;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

.vaiheet li {
	counter-increment: vaihe;
	position: relative;
	padding-left: 2.25rem;
	color: var(--text-muted);
	font-size: 0.9375rem;
	transition: color 0.15s ease;
}

.vaiheet li::before {
	content: counter(vaihe);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	border: 1px solid var(--border-default);
	display: grid;
	place-items: center;
	font-size: 0.8125rem;
	font-weight: 600;
	background: var(--surface-page);
}

.vaiheet li.vaihe--tehty::before {
	background: var(--moss);
	border-color: var(--moss);
	color: var(--text-primary);
}

.vaiheet li.vaihe--nyt {
	color: var(--text-primary);
	font-weight: 600;
}

.vaiheet li.vaihe--nyt::before {
	background: var(--emerald);
	border-color: var(--emerald);
	color: var(--porcelain);
	/* A Khaki ring, the identity document's highlight colour, so the step you are on is
	 * visible at a glance rather than only a shade different from the rest. */
	box-shadow: 0 0 0 3px var(--khaki);
}

/* The window. */
.chat {
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	background: var(--surface-page);
	overflow: hidden;
}

.chat__chrome {
	margin: 0;
	padding: 0.5rem 1rem;
	background: var(--surface-panel);
	border-bottom: 1px solid var(--border-default);
	color: var(--text-muted);
	font-size: 0.8125rem;
}

.chat__body {
	padding: 1rem;
}

/* The composer: a rounded box with the send button in its bottom corner. */
.chat__composer {
	border: 1px solid var(--border-default);
	border-radius: 1.25rem;
	background: var(--surface-page);
	padding: 0.875rem 1rem 0.5rem;
	box-shadow: 0 1px 2px rgba(17, 26, 25, 0.04);
}

.chat__text {
	margin: 0;
	white-space: pre-wrap;
	line-height: 1.65;
}

/* What the AI service receives. Monospaced so the placeholders read as tokens rather than as
 * words, which is the point this state makes. */
.chat__text--protected {
	font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
	font-size: 0.9375rem;
}

.chat__bar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 0.5rem;
}

/* The provider's own send button, not ours. It works whether or not anything has been
 * protected, because we never block (rule R3). */
.chat__send {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 0;
	background: var(--emerald);
	color: var(--porcelain);
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
}

.chat__send:hover {
	background: #1e332c;
}

.chat__message {
	margin-bottom: 0.75rem;
	padding: 0.875rem 1rem;
	border-radius: var(--radius-lg);
}

.chat__message--you {
	background: rgba(40, 65, 57, 0.07);
	border: 1px solid rgba(40, 65, 57, 0.15);
}

.chat__message--ai {
	background: var(--surface-page);
	border: 1px solid var(--border-default);
}

.chat__who {
	margin: 0 0 0.35rem;
	color: var(--text-muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Found values, and what happens to them.
 * ------------------------------------------------------------------------ */

/* The two styles have to be tellable apart at a glance, because the uncertain ones are where
 * the user's attention is worth spending (BUILD_BRIEF section 4.2). Certain is a solid tint;
 * uncertain is paler with a dashed underline, so the difference survives being printed,
 * photographed in a meeting, or seen by someone who does not separate the two colours. */
.demo__span {
	border-radius: var(--radius-sm);
	padding: 0.05em 0.15em;
	cursor: pointer;
	color: var(--text-primary);
}

.demo__span--certain {
	background: rgba(40, 65, 57, 0.16);
}

.demo__span--uncertain {
	background: rgba(40, 65, 57, 0.05);
	border-bottom: 2px dashed var(--earth);
	border-radius: 0;
}

/* Two spellings understood as one person. The dotted top edge ties them together on the page
 * the way the strip ties them together in words. */
.demo__span--linked {
	border-top: 2px dotted var(--wasabi);
}

.demo__span--off {
	background: none;
	color: var(--text-muted);
	text-decoration: line-through;
	text-decoration-color: var(--text-muted);
	border: 0;
}

.demo__placeholder {
	background: rgba(40, 65, 57, 0.1);
	border-radius: var(--radius-sm);
	padding: 0.05em 0.2em;
}

/* A value put back into the answer, marked so the reader can see which words came out of
 * their own browser rather than out of the model. */
.demo__restored {
	background: rgba(40, 65, 57, 0.14);
	border-radius: var(--radius-sm);
	padding: 0.05em 0.15em;
}

/* A value the service saw because nothing was protected. */
.demo__leaked {
	background: rgba(184, 104, 48, 0.16);
	border-radius: var(--radius-sm);
	padding: 0.05em 0.15em;
}

/* A placeholder with nothing behind it. Never guessed, always marked. */
.demo__unresolved {
	border-bottom: 1px dotted var(--earth);
	color: var(--earth);
	cursor: help;
}

/* ---------------------------------------------------------------------------
 * Our strip, under the composer. The only part of the window that is ours.
 * ------------------------------------------------------------------------ */

.demo__strip {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin-top: 0.75rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-panel);
	font-size: 0.875rem;
}

.demo__count {
	font-weight: 600;
}

.demo__hint {
	color: var(--text-muted);
}

/* "Matti Virtanen ja Virtaselle: sama henkilö" - the sentence an English-first tool cannot
 * write, so it is given a colour of its own rather than being left as another grey hint. */
.demo__linked-note {
	color: var(--emerald);
	border-left: 2px solid var(--wasabi);
	padding-left: 0.5rem;
}

.demo__button {
	background: var(--emerald);
	color: var(--porcelain);
	border: 0;
	border-radius: var(--radius-md);
	padding: 0.45rem 0.9rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	margin-left: auto;
}

.demo__button:hover {
	background: #1e332c;
}

.demo__button--quiet {
	background: none;
	color: var(--emerald);
	border: 1px solid var(--emerald);
	margin-left: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.demo__button--quiet:hover {
	background: rgba(40, 65, 57, 0.08);
	color: var(--emerald);
}

.demo__link-button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--emerald);
	text-decoration: underline;
	cursor: pointer;
	margin-left: auto;
}

.demo__note {
	margin: 0.25rem 0 1rem;
	color: var(--text-muted);
	font-size: 0.875rem;
	max-width: var(--measure);
}

.demo__note--varoitus {
	color: var(--earth);
}

.demo__disclaimer {
	margin: 1.25rem 0 0;
	color: var(--text-muted);
	font-size: 0.875rem;
}

.demo__error {
	color: var(--earth);
}

/* ---------------------------------------------------------------------------
 * "This is what you press next."
 *
 * The demo has three moments and a different control matters at each. Marking one of them
 * rather than letting them all look alike is the difference between a visitor following the
 * five steps and a visitor hunting for the button.
 * ------------------------------------------------------------------------ */

.demo__next {
	box-shadow: 0 0 0 3px var(--khaki);
}

/* The sentence handing the visitor back to the provider's own send button. */
.demo__seuraava {
	margin-left: auto;
	color: var(--emerald);
	font-weight: 600;
}

/* "Peru suojaus" sits next to the count rather than being pushed to the right, because the
 * right-hand end now belongs to the sentence above. */
.demo__link-button--left {
	margin-left: 0;
}