/**
 * Ristikkomoduulin julkinen käyttöliittymä.
 *
 * Väripaletti on otettu suomalaisen ristikkolehden painojäljestä:
 * sanomalehtipaperi, painoväripunainen vihjesolu, keltainen vastaussarake,
 * musta ruudukkoviiva.
 *
 * Fontit tulevat järjestelmästä. Ulkoisia fonttipalveluita ei ladata,
 * koska EU:ssa se on tietosuojaongelma.
 */

.rst {
	--rst-paperi: #f7f6f1;
	--rst-muste: #14140f;
	--rst-viiva: #2a2a26;
	--rst-punainen: #b3251e;
	--rst-keltainen: #f2e4a0;
	--rst-haalea: #6e6b63;
	--rst-reuna: #d8d5cb;

	--rst-ruutu: 2.75rem;

	color: var(--rst-muste);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.45;
	max-width: 40rem;
	margin: 0 auto;
}

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

/* --- Kentät ------------------------------------------------------------- */

.rst__kentat {
	background: var(--rst-paperi);
	border: 2px solid var(--rst-viiva);
	padding: 1rem;
}

.rst__kentta + .rst__kentta,
.rst__napit + .rst__kentta {
	margin-top: 1rem;
}

.rst__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rst-haalea);
	margin-bottom: 0.35rem;
}

.rst__kuvio,
.rst__vihje,
.rst__ei,
.rst__sisaltaa,
.rst__kieli {
	width: 100%;
	border: 2px solid var(--rst-viiva);
	background: #fff;
	color: var(--rst-muste);
	padding: 0.6rem 0.7rem;
	font-size: 1.05rem;
	font-family: inherit;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* Kuviokenttä muistuttaa ruudukkoa: tasavälinen, harva, versaali. */
.rst__kuvio {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	padding-right: 0.35rem;
}

.rst__kuvio:focus,
.rst__vihje:focus,
.rst__ei:focus,
.rst__sisaltaa:focus,
.rst__kieli:focus {
	outline: 3px solid var(--rst-punainen);
	outline-offset: 1px;
}

.rst__ohje {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	color: var(--rst-haalea);
}

/* --- Pikamerkkirivi ------------------------------------------------------ */

.rst__napit {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.6rem;
}

.rst__nappi {
	flex: 1 1 auto;
	min-width: 2.75rem;
	min-height: 2.75rem;
	border: 2px solid var(--rst-viiva);
	background: #fff;
	color: var(--rst-muste);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.15rem;
	font-weight: 700;
	cursor: pointer;
	border-radius: 0;
}

.rst__nappi:active {
	background: var(--rst-keltainen);
}

.rst__nappi--tyhjenna {
	font-family: inherit;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	flex: 2 1 auto;
}

/* --- Pituusvalitsin ------------------------------------------------------ */

.rst__pituudet {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.rst__pituus {
	min-width: 2.5rem;
	min-height: 2.5rem;
	border: 2px solid var(--rst-reuna);
	background: #fff;
	color: var(--rst-muste);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	border-radius: 0;
}

.rst__pituus.is-valittu {
	background: var(--rst-viiva);
	border-color: var(--rst-viiva);
	color: var(--rst-paperi);
}

/* --- Lisärajaukset ------------------------------------------------------- */

.rst__lisa {
	margin-top: 1rem;
	border-top: 1px solid var(--rst-reuna);
	padding-top: 0.75rem;
}

.rst__lisa summary {
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rst-punainen);
}

.rst__lisasisalto {
	margin-top: 0.75rem;
}

/* --- Tilarivi ------------------------------------------------------------ */

.rst__tila {
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	font-weight: 700;
	min-height: 1.4em;
}

.rst__tila--tyhja {
	color: var(--rst-punainen);
	font-weight: 400;
}

/* --- Kirjainehdotukset: tämän käyttöliittymän ydin ----------------------- */

.rst__ehdotukset {
	margin-top: 0.9rem;
}

.rst__ehdotukset-otsikko {
	margin: 0 0 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rst-haalea);
}

.rst__ruudut {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.rst__ruutu {
	border: 2px solid var(--rst-viiva);
	background: var(--rst-keltainen);
	min-width: var(--rst-ruutu);
	padding: 0.3rem 0.25rem;
	text-align: center;
}

.rst__ruutu--tiedossa {
	background: #fff;
}

.rst__ruutu-numero {
	display: block;
	font-size: 0.6rem;
	color: var(--rst-haalea);
	line-height: 1;
	margin-bottom: 0.15rem;
}

.rst__ruutu-kirjaimet {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	word-break: break-all;
}

/* --- Tulokset ------------------------------------------------------------ */

.rst__tulokset {
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
}

.rst__osuma {
	border-bottom: 1px solid var(--rst-reuna);
	padding: 0.7rem 0;
}

.rst__osuma:first-child {
	border-top: 2px solid var(--rst-viiva);
}

.rst__sana {
	display: block;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	cursor: pointer;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rst-muste);
}

.rst__sana:focus-visible {
	outline: 3px solid var(--rst-punainen);
	outline-offset: 2px;
}

.rst__meta {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8rem;
	color: var(--rst-haalea);
}

.rst__vihjeet {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0 0 0 0.75rem;
	border-left: 3px solid var(--rst-punainen);
}

.rst__vihjeet li {
	font-size: 0.9rem;
	padding: 0.15rem 0;
}

.rst__lisaa {
	display: block;
	width: 100%;
	margin-top: 1rem;
	padding: 0.8rem;
	border: 2px solid var(--rst-viiva);
	background: var(--rst-paperi);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0;
}

/* --- Työpöytä ------------------------------------------------------------ */

@media (min-width: 40rem) {
	.rst {
		--rst-ruutu: 3rem;
	}

	.rst__napit {
		max-width: 24rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rst * {
		transition: none !important;
		animation: none !important;
	}
}