/* Insinööritoimisto Flygaren graafinen ohjeisto 11/2025:
   munakoiso #403640, chartreuse #a9af00, luu #FFFCE8 sekä 9 värin paletin lisäsävyt.
   Chartreuse on koriste- ja korostusväri (ei tekstiväri vaalealla pohjalla: kontrasti ei riitä);
   linkeissä käytetään paletin tummaa vihreää #676F13. */
:root {
  --tausta: #FFFCE8; --pinta: #ffffff; --teksti: #403640; --heikko: #675971; --raja: #e6e1cc;
  --korostus: #403640; --korostus-tumma: #2b242b; --linkki: #676F13; --vihrea: #a9af00; --vihrea-vaalea: #E5E798;
  --ok: #4f5a0e; --ok-tausta: #f1f3cf; --virhe: #9b2f2a; --virhe-tausta: #f8e7e3;
  --huom: #7a6400; --huom-tausta: #f6eec8;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.55 "Blinker", system-ui, -apple-system, "Segoe UI", sans-serif;
       color: var(--teksti); background: var(--tausta); }
a { color: var(--linkki); text-underline-offset: 2px; }
a:hover { color: var(--teksti); }
header.yla { background: var(--pinta); border-bottom: 4px solid var(--vihrea); }
header.yla .sisalto { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-block: .7rem; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--heikko); font-size: .9rem; }
.logo img { height: 46px; width: auto; display: block; }
@media (max-width: 480px) { .logo img { height: 38px; } }
.logo .rooli { border-left: 1px solid var(--raja); padding-left: .6rem; }
nav.valikko { display: flex; gap: 1.2rem; flex-wrap: wrap; flex: 1; }
nav.valikko a { text-decoration: none; color: var(--teksti); font-weight: 600; font-size: .98rem; }
nav.valikko a:hover { color: var(--linkki); }
.sisalto { max-width: 1080px; margin: 0 auto; padding-inline: 16px; }
main.sisalto { padding-block: 1.5rem 3rem; }
.kapea { max-width: 680px; }
h1, h2, h3 { font-family: "Blinker", system-ui, sans-serif; font-weight: 600; line-height: 1.2; }
h1 { font-size: 2rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 .7rem; }
.korostus-teksti { font-family: "Lisu Bosa", Georgia, serif; font-weight: 300; }
.kortti { background: var(--pinta); border: 1px solid var(--raja); border-radius: 8px; padding: 1.2rem; margin-bottom: 1rem; }
.ruudukko { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
label { display: block; font-weight: 600; font-size: .92rem; margin: .9rem 0 .3rem; }
label.valinta { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }
.ohje { color: var(--heikko); font-size: .85rem; font-weight: 400; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date],
input[type=number], input[type=month], select, textarea {
  width: 100%; padding: .55rem .65rem; font: inherit; border: 1px solid #b9b7b0; border-radius: 6px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--vihrea); outline-offset: 1px; }
textarea { min-height: 4.5rem; }
.rivi { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
.rivi3 { display: grid; gap: .8rem; grid-template-columns: 2fr 1fr 1.4fr; }
@media (max-width: 560px) { .rivi, .rivi3 { grid-template-columns: 1fr; } }
button, .nappi { display: inline-block; font: inherit; font-weight: 600; padding: .55rem 1.2rem; border-radius: 6px;
  border: 1px solid var(--korostus); background: var(--korostus); color: var(--tausta); cursor: pointer; text-decoration: none; }
button:hover, .nappi:hover { background: var(--korostus-tumma); color: var(--tausta); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.toissijainen, .nappi.toissijainen { background: transparent; color: var(--korostus); }
.nappi.toissijainen:hover, button.toissijainen:hover { background: var(--vihrea-vaalea); color: var(--korostus); }
button.vaara { background: #fff; color: var(--virhe); border-color: var(--virhe); }
button.linkki { background: none; border: 0; color: var(--heikko); padding: 0; font-weight: 400; }
.napit { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.valinnat { display: flex; gap: .6rem; flex-wrap: wrap; }
.valinnat label { margin: 0; font-weight: 400; border: 1px solid #b9b7b0; border-radius: 6px; padding: .5rem .9rem;
  background: #fff; cursor: pointer; display: flex; gap: .45rem; align-items: center; }
.valinnat label:has(input:checked) { border-color: var(--vihrea); background: #f7f8dc; box-shadow: inset 0 0 0 1px var(--vihrea); }
.viesti { padding: .7rem 1rem; border-radius: 6px; margin-bottom: 1rem; border: 1px solid; }
.viesti.ok { background: var(--ok-tausta); color: var(--ok); border-color: #bcdcc7; }
.viesti.virhe { background: var(--virhe-tausta); color: var(--virhe); border-color: #e9c0b9; }
.viesti.huom { background: var(--huom-tausta); color: var(--huom); border-color: #ecd9a3; }
.viesti ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.taulu { overflow-x: auto; background: var(--pinta); border: 1px solid var(--raja); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid #ebe9e4; vertical-align: top; }
th { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--heikko); font-weight: 600; background: #fdfbef; }
tr:last-child td { border-bottom: 0; }
td.luku, th.luku { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.merkki { display: inline-block; font-size: .78rem; padding: .1rem .5rem; border-radius: 999px; background: #eceae5; color: var(--heikko); white-space: nowrap; }
.merkki.vuokrattu, .merkki.hyvaksytty, .merkki.lahetetty, .merkki.maksettu { background: var(--ok-tausta); color: var(--ok); }
.merkki.luonnos, .merkki.odottaa { background: var(--huom-tausta); color: var(--huom); }
.merkki.mitatoity, .merkki.hylatty { background: var(--virhe-tausta); color: var(--virhe); }
.tunnusluku { font-size: 1.7rem; font-weight: 700; }
.heikko { color: var(--heikko); }
.ansa { position: absolute; left: -9999px; }
dl.tiedot { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
dl.tiedot dt { color: var(--heikko); }
dl.tiedot dd { margin: 0; }

form.rivissa { display: inline; }
.valilehdet { display: flex; gap: .3rem; border-bottom: 1px solid var(--raja); margin-bottom: 1rem; flex-wrap: wrap; }
.valilehdet a { padding: .5rem .9rem; text-decoration: none; color: var(--heikko); border-bottom: 2px solid transparent; }
.valilehdet a.valittu { color: var(--teksti); border-bottom-color: var(--vihrea); font-weight: 600; }

/* Alalaita: talolasku.com on Insinööritoimisto Flygaren palvelu */
footer.alalaita { background: var(--korostus); color: var(--tausta); margin-top: 3rem; }
footer.alalaita .sisalto { display: flex; gap: 1rem 2rem; align-items: center; flex-wrap: wrap; padding-block: 1.6rem; font-size: .92rem; }
footer.alalaita img { height: 34px; width: auto; }
footer.alalaita a { color: var(--tausta); }
footer.alalaita .tausta-teksti { opacity: .8; }

/* Etusivun nosto brändikuvituksella */
.nosto { position: relative; overflow: hidden; background: var(--pinta); border: 1px solid var(--raja); border-radius: 10px;
         padding: 2.2rem 1.6rem 2rem; margin-bottom: 1.5rem; }
.nosto::after { content: ""; position: absolute; right: -6%; bottom: -28%; width: 72%; height: 80%;
                background: url("/static/brandi/kuvitus.png") no-repeat right bottom / contain; opacity: .22; pointer-events: none; }
.nosto > * { position: relative; z-index: 1; }
.nosto h1 { font-size: 2.3rem; margin-top: 0; }
.nosto p { max-width: 34rem; font-size: 1.08rem; }
.iskulause { font-family: "Lisu Bosa", Georgia, serif; font-weight: 300; font-style: normal; color: var(--heikko); font-size: 1.05rem; }