/* Tilauslomakkeen ulkoasu.
 *
 * Yksi sarake, iso tekstikoko, selkeät välit. Lomake täytetään usein
 * puhelimella ja kerran — se ei ole paikka, jossa kannattaa säästää
 * tilaa tai olla nokkela.
 *
 * Ei ulkoisia fontteja eikä skriptejä. Sama peruste kuin sivustoilla:
 * lomake kysyy henkilötietoja, eikä kolmannen osapuolen tarvitse tietää
 * kuka sitä täyttää.
 */

:root {
	--muste: #1c1a17;
	--haalea: #6b655d;
	--pohja: #faf8f4;
	--kortti: #ffffff;
	--viiva: #ddd7cc;
	--korosto: #2f5d50;
	--virhe: #8c2f22;
	--leveys: 40rem;
}

* { box-sizing: border-box; }

/* Piilotus voittaa aina.
 *
 * Selaimen oma [hidden] { display: none } on tyylitiedoston heikoin
 * saanto: mika tahansa luokkavalitsin, joka asettaa displayn, kumoaa
 * sen. Nain kavi nimenmuokkaukselle -- .nimenmuokkaus { display: flex }
 * piti kentat nakyvissa vaikka hidden oli paikallaan, ja kynapainike
 * nayti tekemattomalta. Tama rivi estaa saman uusiutumisen jokaisessa
 * ehdollisessa elementissa. */
[hidden] { display: none !important; }

body {
	margin: 0;
	padding: 2rem 1.25rem 6rem;
	background: var(--pohja);
	color: var(--muste);
	font: 400 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: var(--leveys); margin: 0 auto; }

h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 0.75rem; }

p { margin: 0 0 1rem; }
.iso { font-size: 1.15rem; }
/* Lomakkeen alun muistilista: mitä pitää olla käsillä ennen täyttämistä.
   Värillinen, jotta sen huomaa ennen kuin aloittaa; ei virheen punainen. */
.valmistaudu {
	background: #e4efe9;
	border: 1px solid #b7d1c4;
	border-radius: 10px;
	padding: 1.1rem 1.25rem 0.4rem;
	margin: 0 0 1.75rem;
}
.valmistaudu h2 {
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0 0 0.6rem;
	color: var(--korosto);
}
.valmistaudu ul { margin: 0 0 0.8rem; padding-left: 1.25rem; }
.valmistaudu li { margin: 0 0 0.45rem; }

.huomio {
	background: var(--kortti);
	border-left: 3px solid var(--korosto);
	padding: 0.9rem 1rem;
	color: var(--haalea);
}

fieldset {
	background: var(--kortti);
	border: 1px solid var(--viiva);
	border-radius: 10px;
	padding: 1.25rem 1.25rem 0.5rem;
	margin: 0 0 1.5rem;
}

legend {
	font-weight: 700;
	font-size: 1.15rem;
	padding: 0 0.5rem;
}

.kuvaus { color: var(--haalea); margin-top: 0; }

.kentta { margin: 0 0 1.4rem; }

label, .otsikko {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

label em { color: var(--virhe); font-style: normal; }

input[type=text], input[type=email], input[type=tel], input[type=number], input[type=url],
select, textarea {
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--viiva);
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font: inherit;
}

input[type=file] {
	width: 100%;
	padding: 0.6rem 0;
	font: inherit;
}

textarea { resize: vertical; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
	outline: 3px solid var(--korosto);
	outline-offset: 2px;
}

/* Rastit ovat rivejä, joissa koko teksti on klikattava. Puhelimella
   pelkkä ruutu on liian pieni osumapinta. */
.rasti {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
	margin-bottom: 0.4rem;
	cursor: pointer;
}
.rasti input { margin-top: 0.35rem; flex: none; width: 1.1rem; height: 1.1rem; }

.ohje {
	color: var(--haalea);
	font-size: 0.92rem;
	margin: 0.35rem 0 0;
}

.virheet {
	background: #fdf2f0;
	border: 1px solid var(--virhe);
	border-radius: 10px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}
.virheet ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.virheet details { margin-top: 0.5rem; }
.virheet summary {
	display: inline-block;
	cursor: pointer;
	list-style: none;
	background: var(--virhe);
	color: #fff;
	border-radius: 6px;
	padding: 0.4rem 0.9rem;
	font-weight: 600;
}
.virheet summary::-webkit-details-marker { display: none; }
.virheet details[open] summary { margin-bottom: 0.5rem; }

/* Virheellinen kentta: punainen reunaviiva. Luokka tulee palvelimelta,
   joten merkinta nakyy ilman skriptiakin. */
.kentta.virhe {
	border-left: 3px solid var(--virhe);
	padding-left: 0.9rem;
	margin-left: -0.9rem;
}

button {
	background: var(--korosto);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.9rem 2rem;
	font: 600 1.05rem/1 inherit;
	cursor: pointer;
}
button:hover { opacity: 0.9; }

/* Hunajapurkki. Ei display:none — osa roboteista ohittaa piilotetut
   kentät. Tämä on ruudulla, mutta ihmisen ulottumattomissa. */
.hunaja {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 30rem) {
	body { padding: 1.25rem 1rem 5rem; }
	h1 { font-size: 1.6rem; }
	fieldset { padding: 1rem 1rem 0.25rem; }
}

/* ---- Linkit --------------------------------------------------------
 * Sinisiä ja alleviivattuja. Linkki, joka ei näytä linkiltä, jää
 * klikkaamatta — ja lomakkeessa linkit vievät tietosuojaselosteeseen ja
 * käyttöehtoihin, eli juuri sinne minne asiakkaan kuuluu päästä. */

a, a:visited {
	color: #1a4fd6;
	text-decoration: underline;
	text-underline-offset: 2px;
}
a:hover, a:focus-visible { color: #0f3298; }

/* ---- Toistuvat rivit ----------------------------------------------- */

.toistuva .rivit { display: grid; gap: 0.75rem; }

.rivi {
	position: relative;
	border: 1px solid var(--viiva);
	border-radius: 8px;
	padding: 0.9rem 1rem 0.2rem;
	background: var(--pohja);
}
.rivi .kentta { margin-bottom: 0.9rem; }

button.lisaa {
	margin-top: 0.75rem;
	background: none;
	color: var(--korosto);
	border: 1px dashed var(--korosto);
	border-radius: 8px;
	padding: 0.55rem 1.1rem;
	font: 600 0.95rem/1 inherit;
}
button.lisaa:hover { background: #eef3f1; opacity: 1; }

button.poista {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: none;
	color: var(--haalea);
	border: 0;
	border-radius: 6px;
	padding: 0.3rem 0.6rem;
	font: 400 0.85rem/1 inherit;
	text-decoration: underline;
}
button.poista:hover { color: var(--virhe); opacity: 1; }

/* ---- Hintayhteenveto ------------------------------------------------ */

table.hinta {
	width: 100%;
	border-collapse: collapse;
	margin: 0.5rem 0 1rem;
	font-size: 0.97rem;
}
table.hinta caption {
	text-align: left;
	font-weight: 700;
	padding-bottom: 0.5rem;
}
table.hinta th, table.hinta td {
	padding: 0.55rem 0.4rem;
	border-bottom: 1px solid var(--viiva);
	text-align: left;
	vertical-align: top;
}
table.hinta thead th { font-size: 0.85rem; color: var(--haalea); font-weight: 600; }
table.hinta .luku { text-align: right; white-space: nowrap; }
table.hinta .vahva { font-weight: 700; font-size: 1.1rem; }
table.hinta tfoot th, table.hinta tfoot td { border-bottom: 0; padding-top: 0.8rem; }
table.hinta .pikkurivi td { color: var(--haalea); font-size: 0.88rem; padding-top: 0.2rem; }
.pikku { display: block; color: var(--haalea); font-size: 0.85rem; }

.koodi-ok { color: var(--korosto); font-weight: 600; }
.koodi-ei { color: var(--virhe); font-weight: 600; }

/* ---- Lähetyspainike ------------------------------------------------- */

button.laheta { width: 100%; max-width: 22rem; }

@media (max-width: 30rem) {
	.rivi { padding: 0.8rem 0.8rem 0.2rem; }
	button.poista { position: static; display: block; margin: 0 0 0.6rem auto; }
	table.hinta { font-size: 0.9rem; }
}

/* ---- Väripaletti ---------------------------------------------------- */

.varirivi { display: flex; gap: 0.6rem; align-items: center; }
.varirivi .varisyote { flex: 1 1 auto; }

.varinayte {
	flex: none;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 8px;
	border: 1px solid var(--viiva);
	background: repeating-linear-gradient(45deg, #eee 0 6px, #f7f7f7 6px 12px);
}
.varinayte.kelpaa { border-color: var(--muste); }

/* ---- Väliotsikko ---------------------------------------------------- */

h3.valiotsikko {
	margin: 1.6rem 0 0.2rem;
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--haalea);
}

/* Monivalinnan vaihtoehtokohtainen selite kulkee rastin tekstin alla. */
.rasti .pikku { margin-top: 0.1rem; }

/* ---- Nimettävä vaihtoehto ------------------------------------------- */

/* Vaihtoehto on kaksi kerrosta: nimirivi ja sen alla selite.
 *
 * Selite oli aiemmin rastin tekstin sisalla, ja kaksiriviset selitteet
 * tyonsivat kynapainikkeen omalle rivilleen koko lohkon alle. Nyt
 * ensimmainen rivi on aina rasti, nimi ja kyna -- ja selite on sen alla
 * omana kappaleenaan, jolloin se ei voi vaikuttaa painikkeen paikkaan. */
.vaihtoehto { margin-bottom: 0.3rem; }

.vaihtoehto-rivi {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex-wrap: wrap;
}

/* flex: 0 1 auto, EI 1 1 auto. Kasvava label tyontaisi kynan rivin
   oikeaan reunaan -- ja muokkaustilassa jattaisi tyhjan aukon rastin ja
   tekstilaatikon valiin, koska kasvu jaa vaikka teksti on piilossa. */
.vaihtoehto-rivi .rasti { flex: 0 1 auto; margin-bottom: 0; }

.selite { margin: 0 0 0.45rem 1.75rem; }

button.kyna {
	flex: none;
	background: none;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--haalea);
	padding: 0.15rem 0.45rem;
	font: 400 1rem/1.3 inherit;
	cursor: pointer;
}
button.kyna:hover { color: var(--korosto); border-color: var(--viiva); opacity: 1; }

input.omanimi {
	flex: 1 1 100%;
	margin: 0.1rem 0 0.5rem 1.7rem;
	width: auto;
	max-width: 22rem;
	padding: 0.45rem 0.6rem;
	font-size: 0.95rem;
}

/* ---- Nimen muokkaus paikallaan -------------------------------------- */

button.kyna {
	flex: none;
	width: 1.9rem;
	height: 1.9rem;
	margin-top: 0.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--kortti);
	border: 1px solid var(--viiva);
	border-radius: 6px;
	color: var(--haalea);
	padding: 0;
	font: 400 0.95rem/1 inherit;
	cursor: pointer;
}
button.kyna:hover { color: var(--korosto); border-color: var(--korosto); opacity: 1; }

.nimenmuokkaus {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	flex: 1 1 14rem;
	max-width: 30rem;
}
.nimenmuokkaus input {
	flex: 1 1 auto;
	width: auto;
	padding: 0.45rem 0.6rem;
	font-size: 0.95rem;
}
button.vahvista {
	flex: none;
	background: var(--korosto);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 0.5rem 0.9rem;
	font: 600 0.9rem/1 inherit;
	cursor: pointer;
}

.muurivi { display: flex; align-items: center; gap: 0.4rem; }
.muurivi input { flex: 1 1 auto; width: auto; max-width: 22rem; }
button.poista-muu {
	flex: none;
	background: none;
	border: 0;
	color: var(--haalea);
	padding: 0.4rem 0.5rem;
	font: 400 0.85rem/1 inherit;
	text-decoration: underline;
	cursor: pointer;
}
button.poista-muu:hover { color: var(--virhe); opacity: 1; }

button.lisaa-muu {
	margin-top: 0.4rem;
	background: none;
	color: var(--korosto);
	border: 1px dashed var(--korosto);
	border-radius: 8px;
	padding: 0.45rem 1rem;
	font: 600 0.92rem/1 inherit;
	cursor: pointer;
}
button.lisaa-muu:hover { background: #eef3f1; opacity: 1; }

/* ---- Sivupuu --------------------------------------------------------
 *
 * Navigaatiovalikko on järjestetty puu, ja rivien järjestys ruudulla on
 * valikon järjestys. Siksi rivit ovat korttimaisia ja tarttumakahva on
 * ensimmäisenä: se kertoo ilman ohjetta, että riviä voi siirtää.
 */

.sivurivit { display: grid; gap: 0.3rem; margin: 0.5rem 0 0.8rem; }

.sivurivi {
	border: 1px solid var(--viiva);
	border-radius: 8px;
	background: var(--kortti);
	padding: 0.5rem 0.6rem;
}
.sivurivi[data-taso="1"] { margin-left: 2rem; border-left: 3px solid var(--korosto); }
.sivurivi.lukittu { background: var(--pohja); }
.sivurivi.raahataan { opacity: 0.6; border-color: var(--korosto); }

.sivurivi-paa { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.sivurivi-paa .rasti { flex: 0 1 auto; margin-bottom: 0; }
.sivurivi .selite { margin: 0.15rem 0 0 3.6rem; }

button.kahva, .kahva--lukittu {
	flex: none;
	width: 1.7rem;
	height: 1.9rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--haalea);
	font-size: 1.05rem;
	line-height: 1;
	padding: 0;
	cursor: grab;
	touch-action: none;
}
button.kahva:active { cursor: grabbing; }
.kahva--lukittu { opacity: 0.35; cursor: default; }

/* Toiminnot työntyvät oikeaan reunaan, nimi jää vasemmalle. */
.sivutoiminnot { flex: 1 1 auto; display: flex; justify-content: flex-end; gap: 0.25rem; }

/* Painikkeen on näytettävä painikkeelta. Pelkkä emoji ilman kehystä on
   koriste, ja koristetta ei klikata — laatikko kertoo ilman ohjetta,
   että merkkiä voi painaa. Sama muoto kuin otsikon selityslistassa,
   jotta selityksen ja painikkeen tunnistaa samaksi asiaksi. */
.sivutoiminnot button {
	width: 1.9rem;
	height: 1.9rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--kortti);
	border: 1px solid var(--viiva);
	border-radius: 6px;
	color: var(--muste);
	padding: 0;
	font: 400 0.95rem/1 inherit;
	cursor: pointer;
}
.sivutoiminnot button:hover:not(:disabled) {
	color: var(--korosto);
	border-color: var(--korosto);
	opacity: 1;
}
.sivutoiminnot button:disabled { opacity: 0.3; cursor: default; }
.sivutoiminnot .roskis:hover { color: var(--virhe); border-color: var(--virhe); }

.sivurivi .nimenmuokkaus { flex: 1 1 12rem; }

button.lisaa-sivu {
	background: none;
	color: var(--korosto);
	border: 1px dashed var(--korosto);
	border-radius: 8px;
	padding: 0.5rem 1.1rem;
	font: 600 0.95rem/1 inherit;
	cursor: pointer;
}
button.lisaa-sivu:hover { background: #eef3f1; opacity: 1; }

@media (max-width: 30rem) {
	.sivurivi[data-taso="1"] { margin-left: 1rem; }
	.sivurivi .selite { margin-left: 2.6rem; }
}


/* ---- Sivupuun selityslista ja varasto -------------------------------- */

ul.selitys {
	list-style: none;
	margin: 0.4rem 0 0.8rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.4rem;
	color: var(--haalea);
	font-size: 0.9rem;
}
ul.selitys li { display: flex; align-items: center; gap: 0.45rem; }
ul.selitys .merkki {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8rem;
	height: 1.8rem;
	border: 1px solid var(--viiva);
	border-radius: 6px;
	background: var(--kortti);
	color: var(--muste);
	font-size: 0.9rem;
	line-height: 1;
}

/* Valitsematta jääneet odottavat omassa laatikossaan. Ne eivät ole osa
   valikkoa, joten niillä ei ole kahvaa eikä sisennystä. */
.sivuvarasto {
	margin-top: 1.2rem;
	padding-top: 0.9rem;
	border-top: 1px dashed var(--viiva);
}
.varasto-otsikko {
	display: block;
	font-weight: 600;
	color: var(--haalea);
	margin-bottom: 0.45rem;
}
.sivurivit-varasto { display: grid; gap: 0.3rem; }
.sivurivit-varasto .sivurivi { background: var(--pohja); }
.sivurivit-varasto .kahva,
.sivurivit-varasto .sisenna { display: none; }
.sivurivit-varasto .sivurivi[data-taso="1"] { margin-left: 0; border-left: 1px solid var(--viiva); }

/* ---- Tiedostolistat --------------------------------------------------
 *
 * Valitut tiedostot luetellaan (lomake.js), ja edellisen yrityksen
 * tiedostot näkyvät "tallessa"-listana virhesivulla. Ilman listaa asiakas
 * ei tiedä, mitä on valittu — Ninni luuli saaneensa yhden kuvan. */

.tiedostolista { list-style: none; margin: 0.3rem 0 0.4rem; padding: 0; display: grid; gap: 0.3rem; }
.tiedostolista li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.7rem;
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--viiva);
	border-radius: 8px;
	background: var(--pohja);
	font-size: 0.95rem;
}
.tiedostolista.tallessa li { border-color: var(--korosto); background: #eef3f1; }
.tiedostolista .tiedostonimi { font-weight: 600; word-break: break-all; }
.tiedostolista .pikku { display: inline; }
.tiedostolista button.poista-tiedosto,
.poista-tallessa {
	margin-left: auto;
	background: none;
	border: 0;
	color: var(--haalea);
	padding: 0.2rem 0.4rem;
	font: 400 0.88rem/1.2 inherit;
	text-decoration: underline;
	cursor: pointer;
}
.poista-tallessa { display: inline-flex; align-items: center; gap: 0.3rem; margin-bottom: 0; text-decoration: none; }
.poista-tallessa input { width: 1rem; height: 1rem; margin: 0; }
.tiedostolista button.poista-tiedosto:hover, .poista-tallessa:hover { color: var(--virhe); opacity: 1; }
.tallessa-huomio { color: var(--korosto); font-weight: 600; margin: 0.6rem 0 0; }

/* Selaimen esitarkistuksen merkintä: sama ulkoasu kuin palvelimen. */
.kentta.virhe-selain {
	border-left: 3px solid var(--virhe);
	padding-left: 0.9rem;
	margin-left: -0.9rem;
}

/* ---- Kontrasti värirooleista ---------------------------------------- */

.kontrasti { margin: 0.6rem 0 0.2rem; }
.kontrasti p { margin: 0 0 0.25rem; font-size: 0.92rem; }
.kontrasti-ok { color: var(--korosto); }
.kontrasti-heikko { color: var(--virhe); font-weight: 600; }

/* ---- Alennettu hinta ------------------------------------------------
 *
 * Listahinta jää näkyviin yliviivattuna alennetun oikealle puolelle, jotta
 * asiakas näkee paljonko alennus on eikä vain lopputulosta. Harmaa ja
 * kevyempi: se ei ole se luku, joka laskutetaan. */

s.vanha {
	color: var(--haalea);
	font-weight: 400;
	font-size: 0.9em;
	margin-left: 0.45rem;
	white-space: nowrap;
}

/* Ruudunlukijalle "ilman alennusta 135,00 €" — yliviivaus yksin ei kerro
   sitä ääneen luettaessa. */
.piilotettu {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}