/* salasanasi.fi — SPDX-License-Identifier: LGPL-3.0-or-later
 *
 * Visuaalinen ilme noudattaa Suomi.fi-palvelun tyyliä: Source Sans 3,
 * Suomi.fi-designjärjestelmän värit ja 2 pikselin kulmat. Kirjasin on
 * itse isännöity, jottei sivu lataa mitään ulkopuolelta.
 */

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
}

:root {
	/* Suomi.fi-designtokenit */
	--brand: #00357a;
	--brand-hover: #1a4987;
	--highlight: #2a6ebb;
	--highlight-dark: #235a9a;
	--accent: #e86717;
	--ink: #212121;
	--ink-soft: #5f686d;
	--line: #c8cdd0;
	--line-light: #ecedee;
	--pale: #eaf2fa;
	--pale-soft: #f7fafd;
	--grey-soft: #f7f7f8;
	--white: #ffffff;
	--alert: #be2626;
	--success: #12752b;

	--radius: 2px;
	--sans: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
	--mono: ui-monospace, 'SF Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
	--measure: 48rem;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font: 400 18px/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
}

a { color: var(--highlight); text-underline-offset: 2px; }
a:hover { color: var(--highlight-dark); }
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

.visually-hidden {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

/* ---- ylätunniste ---- */

.site-header {
	background: var(--white);
	border-bottom: 1px solid var(--line);
	padding-inline: 1.5rem;
}

.bar {
	max-width: var(--measure);
	margin-inline: auto;
	padding-block: 0.9rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
}

/* Päävalikko. Nykyinen sivu merkitään alleviivauksella samaan tapaan kuin
   generaattorin välilehdet, jotta sivuston kaksi työkalua näyttävät saman
   ilmeen osilta eivätkä kahdelta eri sivustolta. */
.site-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.4rem;
}

.site-nav a {
	font-size: 1rem;
	font-weight: 600;
	color: var(--highlight);
	text-decoration: none;
	padding: 0.2rem 0;
	border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: var(--highlight-dark); border-bottom-color: var(--line); }
.site-nav a.is-current { color: var(--ink); border-bottom-color: var(--highlight); }

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ink);
	text-decoration: none;
}
.wordmark .mark { display: block; flex: none; }
.wordmark .name { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.005em; }
.wordmark .tld { color: var(--ink-soft); font-weight: 400; }
.wordmark:hover .name { color: var(--brand); }

/* ---- sinipalkki ---- */

.hero {
	/* Sama liukuväri kuin jakokuvassa salasanasi.fi.jpg: tummasta brändisinisestä
	   vasemmalla vaaleampaan korostussiniseen oikealla. */
	background: var(--highlight);
	background: linear-gradient(to right, var(--brand) 0%, var(--highlight) 100%);
	color: var(--white);
	padding-inline: 1.5rem;
}

.hero-inner {
	max-width: var(--measure);
	margin-inline: auto;
	padding-block: 2.75rem 3rem;
}

.hero-title {
	font-size: 2.25rem;
	letter-spacing: -0.01em;
	margin: 0 0 0.6rem;
	max-width: 22ch;
}

.hero-lead {
	margin: 0;
	max-width: 46ch;
	font-size: 1.125rem;
	color: #e4eefa;
}

/* ---- päärunko ---- */

main {
	background: var(--pale-soft);
	border-bottom: 1px solid var(--line-light);
	padding-inline: 1.5rem;
	padding-block: 2.5rem 3.5rem;
}

main > * {
	max-width: var(--measure);
	margin-inline: auto;
}

/* ---- generaattori ---- */

.generator {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.75rem;
	margin-top: -4.5rem;
	box-shadow: 0 2px 6px rgb(0 53 122 / 0.08);
}

.modes {
	display: flex;
	border-bottom: 1px solid var(--line);
	margin: -0.35rem 0 1.5rem;
}

.mode {
	appearance: none;
	border: 0;
	border-bottom: 4px solid transparent;
	background: transparent;
	color: var(--highlight);
	font: 600 1.0625rem var(--sans);
	padding: 0.5rem 1.1rem 0.6rem;
	margin-bottom: -1px;
	cursor: pointer;
}
.mode:hover { color: var(--highlight-dark); background: var(--pale); }
.mode.is-active { color: var(--ink); border-bottom-color: var(--highlight); }

.controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.25rem 2rem;
	align-items: end;
}

.field { min-width: 0; }
.field[hidden] { display: none; }

.field label {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 0.35rem;
}

.field output {
	font-variant-numeric: tabular-nums;
	color: var(--highlight-dark);
}

.field select {
	width: 100%;
	font: 400 1rem var(--sans);
	color: var(--ink);
	padding: 0.5rem 0.65rem;
	background: var(--white);
	border: 1px solid var(--ink-soft);
	border-radius: var(--radius);
}

.field input[type="range"] {
	width: 100%;
	accent-color: var(--highlight);
	margin: 0.55rem 0 0;
}

.field-check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	align-self: center;
	padding-top: 1.4rem;
}
.field-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--highlight); margin: 0; flex: none; }
.field-check label { margin: 0; font-weight: 400; }
/* Kaksirivisessä valinnassa ruutu kohdistuu ensimmäiseen riviin, ei rivien väliin. */
.field-check:has(.hint) { align-items: flex-start; }
.field-check:has(.hint) input { margin-top: 0.25rem; }

.field-check .hint {
	display: block;
	font: 0.85rem/1.4 var(--mono);
	color: var(--ink-soft);
	word-break: break-all;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1.25rem;
	margin: 1.75rem 0 1.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-light);
}

.primary {
	appearance: none;
	background: var(--brand);
	border: 1px solid var(--brand);
	color: var(--white);
	font: 600 1.0625rem var(--sans);
	padding: 0.6rem 1.5rem;
	border-radius: var(--radius);
	cursor: pointer;
}
.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

.strength { margin: 0; font-size: 1rem; color: var(--ink-soft); }
.strength b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- tulokset ---- */

.passwords { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.passwords li {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	background: var(--pale-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.6rem 0.6rem 0.6rem 0.9rem;
}

.passwords .value {
	flex: 1;
	min-width: 0;
	font: 1rem/1.55 var(--mono);
	/* Katkaise mieluiten erottimen kohdalta, ei keskeltä sanaa. */
	overflow-wrap: anywhere;
	user-select: all;
}

.copy {
	flex: none;
	appearance: none;
	background: var(--white);
	border: 1px solid var(--highlight);
	color: var(--highlight);
	font: 600 0.9375rem var(--sans);
	padding: 0.35rem 0.9rem;
	border-radius: var(--radius);
	cursor: pointer;
}
.copy:hover { background: var(--pale); color: var(--highlight-dark); }
.copy.is-done { background: var(--highlight); border-color: var(--highlight); color: var(--white); }

.status { margin: 0.85rem 0 0; font-size: 1rem; color: var(--ink-soft); min-height: 1.5em; }
.status.is-error { color: var(--alert); font-weight: 600; }

/* ---- leipäteksti ---- */

.prose { margin-top: 3.5rem; }
/* Tietosuojasivulla leipäteksti on ainoa sisältö, eikä tarvitse generaattorin väliä. */
main > .prose:first-child { margin-top: 0; }
.prose h2 {
	font-size: 1.5rem;
	margin: 3rem 0 0.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p { margin: 0 0 1rem; max-width: 40rem; }
.prose .note { color: var(--ink-soft); font-size: 1rem; }

.links { list-style: none; margin: 0 0 1rem; padding: 0; }
.links li { margin-bottom: 0.35rem; }
.links a { font-weight: 600; }
.links a::before {
	content: "›";
	color: var(--accent);
	font-weight: 600;
	margin-right: 0.45rem;
}

code {
	font: 0.9em var(--mono);
	background: var(--grey-soft);
	border: 1px solid var(--line-light);
	padding: 0.08em 0.32em;
	border-radius: var(--radius);
}

pre {
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 4px solid var(--highlight);
	border-radius: var(--radius);
	padding: 1rem 1.2rem;
	overflow-x: auto;
	margin: 0 0 1rem;
}
pre code { background: none; border: 0; padding: 0; font-size: 0.9375rem; line-height: 1.75; }

.strength-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	margin: 0 0 1rem;
	background: var(--white);
	border: 1px solid var(--line);
}
.strength-table th,
.strength-table td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--line-light); }
.strength-table thead th { background: var(--pale); font-weight: 600; border-bottom: 1px solid var(--line); }
.strength-table tbody tr:last-child td { border-bottom: 0; }
.strength-table td:last-child,
.strength-table th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- alatunniste ---- */

.site-footer {
	background: var(--grey-soft);
	color: var(--ink-soft);
	font-size: 1rem;
}

.site-footer { padding-inline: 1.5rem; }

.footer-inner {
	max-width: var(--measure);
	margin-inline: auto;
	padding-block: 2rem 2.5rem;
}
.footer-inner p { margin: 0; }
.footer-inner .fine { margin-top: 0.4rem; font-size: 0.9375rem; }

/* ---- kapeat näytöt ---- */

@media (max-width: 40rem) {
	body { font-size: 17px; }
	.hero-title { font-size: 1.75rem; }
	.site-header, .hero, main, .site-footer { padding-inline: 1.25rem; }
	.hero-inner { padding-block: 2rem 2.5rem; }
	main { padding-block: 2rem 3rem; }
	.bar { padding-block: 0.8rem; gap: 0.35rem 1rem; }
	.site-nav { gap: 0 1.1rem; }
	.site-nav a { font-size: 0.9375rem; }
	.footer-inner { padding-block: 1.75rem 2rem; }
	.generator { padding: 1.25rem; margin-top: -3.75rem; }
	.modes { overflow-x: auto; }
	.passwords li { flex-wrap: wrap; }
}

/* ---- tietosuojasivun luettelo ---- */

.facts { list-style: none; margin: 0 0 1.25rem; padding: 0; max-width: 40rem; }
.facts li {
	position: relative;
	padding: 0 0 0 1.5rem;
	margin-bottom: 0.75rem;
}
.facts li::before {
	content: "›";
	position: absolute;
	left: 0.15rem;
	color: var(--accent);
	font-weight: 600;
}

/* ---- vuototarkistus (/vuodot) ---- */

.prose h3 {
	font-size: 1.1875rem;
	margin: 1.75rem 0 0.6rem;
}

.check-lead { margin: 0 0 1.25rem; max-width: 44rem; color: var(--ink-soft); }

.check-form label {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.check-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: stretch;
}

.check-row input {
	flex: 1 1 18rem;
	min-width: 0;
	font: 400 1.0625rem var(--sans);
	color: var(--ink);
	padding: 0.6rem 0.7rem;
	background: var(--white);
	border: 1px solid var(--ink-soft);
	border-radius: var(--radius);
}
.check-row input[type="password"] { font-family: var(--mono); letter-spacing: 0.04em; }
.check-row input:disabled { background: var(--grey-soft); color: var(--ink-soft); }
.check-row .primary { flex: none; }
.check-row .primary:disabled { background: var(--ink-soft); border-color: var(--ink-soft); cursor: default; }
.check-row .copy { flex: none; }

/* Selostus siitä, mitä lähtee ja minne. Kuuluu lomakkeen viereen eikä alaviitteeseen:
   se on ainoa kohta koko sivustolla, jossa jotain lähtee ulos selaimesta. */
.notice {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1.1rem;
	background: var(--pale);
	border-left: 4px solid var(--highlight);
	border-radius: var(--radius);
	font-size: 1rem;
	line-height: 1.55;
	max-width: 44rem;
}
.notice code { background: var(--white); }

/* ---- tulos ---- */

.result {
	margin-top: 1.5rem;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--line);
	border-top: 4px solid var(--line);
	border-radius: var(--radius);
	background: var(--pale-soft);
}
.result.is-clean { border-top-color: var(--success); }
.result.is-hit { border-top-color: var(--alert); }

.result h2 { font-size: 1.375rem; margin: 0 0 0.65rem; }
.result.is-clean h2 { color: var(--success); }
.result.is-hit h2 { color: var(--alert); }

.result p { margin: 0 0 0.75rem; max-width: 44rem; }
.result p:last-child { margin-bottom: 0; }
.result-advice { font-weight: 600; }
.result-source { font-size: 0.9375rem; color: var(--ink-soft); }

/* ---- vuotoluettelo ---- */

.breaches {
	list-style: none;
	margin: 1.25rem 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.breaches li {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.9rem 1.1rem;
}

.breach-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}
.breach-head h3 { font-size: 1.125rem; margin: 0; }
.breach-year {
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
	flex: none;
}

.breaches p { margin: 0.35rem 0 0; font-size: 1rem; line-height: 1.55; max-width: 44rem; }
.breach-meta { color: var(--ink-soft); font-size: 0.9375rem !important; }
.breach-data strong { font-weight: 600; }
.breach-risk { color: var(--ink-soft); }
.breach-risk.is-bad { color: var(--alert); font-weight: 600; }
.breach-ref a { font-size: 0.9375rem; }

@media (max-width: 40rem) {
	.check-row .primary,
	.check-row .copy { flex: 1 1 auto; }
	.result { padding: 1rem 1.1rem; }
	.notice { padding: 0.8rem 0.9rem; }
}

/* ---- vuotoluettelo (/tietovuodot) ---- */

.panel[hidden] { display: none; }

/* Nostot luettelon kärjessä: neljä lukua, jotka kertovat mittakaavan ennen kuin
   kukaan selaa yhtään riviä. */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 1.5rem;
}

.stat {
	background: var(--white);
	padding: 0.85rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.stat-label { font-size: 0.875rem; color: var(--ink-soft); }
.stat-value { font-size: 1.25rem; line-height: 1.3; overflow-wrap: anywhere; }
.stat-value.is-name { font-size: 1.0625rem; }
.stat-note { font-size: 0.875rem; color: var(--ink-soft); }

.search-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
}
.search-field { flex: 1 1 18rem; min-width: 0; }
.search-field.is-narrow { flex: 0 1 14rem; }

.search-field label {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.search-field input,
.search-field select {
	width: 100%;
	font: 400 1.0625rem var(--sans);
	color: var(--ink);
	padding: 0.6rem 0.7rem;
	background: var(--white);
	border: 1px solid var(--ink-soft);
	border-radius: var(--radius);
}
.search-field input:disabled,
.search-field select:disabled { background: var(--grey-soft); color: var(--ink-soft); }

.list-summary { margin: 0.5rem 0 0; font-size: 1rem; color: var(--ink-soft); }

.more-row { margin: 1rem 0 0; }
.more-row[hidden] { display: none; }

/* Vuodon liput: lyhyt varoitus siitä, mitä aineistosta pitää tietää ennen kuin
   sen lukee — vahvistamaton, arkaluonteinen, roskapostilista. */
.breach-flags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem !important; }

.flag {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink-soft);
	background: var(--grey-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.1rem 0.45rem;
}
.flag.is-bad { color: var(--alert); border-color: var(--alert); background: var(--white); }

.breach-data.is-bad strong { color: var(--alert); }

.breach-story { margin-top: 0.6rem; font-size: 0.9375rem; }
.breach-story summary {
	cursor: pointer;
	color: var(--highlight);
	font-weight: 600;
	font-size: 0.9375rem;
}
.breach-story summary:hover { color: var(--highlight-dark); }
.breach-story p { color: var(--ink-soft); }

/* ---- lukupalkit ---- */

.numbers-block { margin-bottom: 2rem; }
.numbers-block h3 { font-size: 1.125rem; margin: 0 0 0.35rem; }
.numbers-lead { margin: 0 0 0.9rem; font-size: 1rem; color: var(--ink-soft); max-width: 44rem; }
.numbers-source { font-size: 0.9375rem; color: var(--ink-soft); max-width: 44rem; }

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }

.bars li {
	display: grid;
	grid-template-columns: minmax(6rem, 12rem) 1fr auto;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.9375rem;
}

.bar-label { color: var(--ink); overflow-wrap: anywhere; }
.bar-track { background: var(--line-light); border-radius: var(--radius); height: 0.9rem; }
.bar-fill { display: block; height: 100%; background: var(--highlight); border-radius: var(--radius); }
.bar-value { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 40rem) {
	.bars li { grid-template-columns: 1fr auto; }
	.bar-track { grid-column: 1 / -1; }
}

/* ---- vahvuustesti (/vahvuus) ---- */

/* Esimerkkinapit: tarkoitus on, ettei kukaan naputtele omaa salasanaansa
   pelkästä uteliaisuudesta. */
.samples { margin: 1.25rem 0 0; font-size: 1rem; color: var(--ink-soft); }

.chip {
	appearance: none;
	font: 400 0.9375rem var(--mono);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--highlight);
	padding: 0.15rem 0.55rem;
	margin: 0.2rem 0.15rem 0;
	cursor: pointer;
}
.chip:hover { background: var(--pale); border-color: var(--highlight); }

.verdict h2 { color: var(--ink); }
.verdict.is-0 { border-top-color: var(--alert); }
.verdict.is-1 { border-top-color: var(--alert); }
.verdict.is-2 { border-top-color: var(--accent); }
.verdict.is-3 { border-top-color: var(--highlight); }
.verdict.is-4 { border-top-color: var(--success); }
.verdict.is-0 h2, .verdict.is-1 h2 { color: var(--alert); }
.verdict.is-4 h2 { color: var(--success); }

.meter { margin: 0 0 1rem; }
.meter-track {
	display: block;
	height: 0.75rem;
	background: var(--line-light);
	border-radius: var(--radius);
	overflow: hidden;
}
.meter-fill { display: block; height: 100%; background: var(--ink-soft); }
.meter-fill.is-0, .meter-fill.is-1 { background: var(--alert); }
.meter-fill.is-2 { background: var(--accent); }
.meter-fill.is-3 { background: var(--highlight); }
.meter-fill.is-4 { background: var(--success); }

.matches-title { font-size: 1.0625rem; margin: 1.25rem 0 0.35rem; }

/* Salasanan palaset siinä järjestyksessä kuin arviointi ne tunnisti. */
.matches { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; }

.matches li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.75rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.4rem 0.7rem;
}
.match-token { font: 0.9375rem var(--mono); overflow-wrap: anywhere; }
.match-kind { font-size: 0.9375rem; color: var(--ink-soft); }

/* ---- uutiset (/uutiset) ---- */

.news { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.news li {
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 4px solid var(--highlight);
	border-radius: var(--radius);
	padding: 0.9rem 1.1rem;
}
.news h3 { font-size: 1.125rem; margin: 0.15rem 0 0.35rem; }
.news h3 a { text-decoration: none; }
.news h3 a:hover { text-decoration: underline; }
.news-date { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.news-summary { margin: 0; font-size: 1rem; line-height: 1.55; max-width: 44rem; }