/* Perus */
* { box-sizing: border-box; }
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #f8fafc;          /* vaalea tausta */
  color: #0f172a;               /* tumma teksti */
  margin: 24px;
}
h2 { margin-bottom: 12px; }

/* Lomake vasemmalle ja kapeammaksi */
.lomake {
  max-width: 520px;             /* rajaa lomakkeen leveyttä */
  width: 100%;
}

/* Taulukko */
#taulukko {
  border-collapse: collapse;
  width: 100%;                  /* täyttää lomakkeen leveydeltä (ei koko selainta) */
  background: white;
  border: 1px solid #e2e8f0;    /* reunaviiva kortille */
  border-radius: 8px;           /* pehmeät kulmat */
  overflow: hidden;             /* kulmat pätevät myös thead/tbody:lle */
}

/* Solut */
#taulukko td, #taulukko th {
  border-bottom: 1px solid #e2e8f0;
  padding: 10px 12px;
  vertical-align: middle;
}

/* Otsikkorivi */
#taulukko th {
  text-align: left;
  background-color: #1e40af;    /* sininen otsikko */
  color: #fff;
  font-weight: 600;
}

/* Vuorovärit riveille (poislukien header) */
#taulukko tr:nth-child(even) td {
  background-color: #f8fafc;
}

/* Hover-efekti riveille */
#taulukko tr:hover td {
  background-color: #eef2ff;    /* vaalea sinertävä */
}

/* Tekstikentät */
#taulukko input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  outline: none;
}
#taulukko input[type="text"]:focus {
  border-color: #1e40af;
  box-shadow: 0 0 0 3px rgba(30,64,175,0.15);
}

/* Radio/checkbox -ryhmä */
.choices {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.choices label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

/* Lähetä-nappi */
#taulukko input[type="submit"] {
  background-color: #1e40af;
  color: #fff;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
#taulukko input[type="submit"]:hover {
  background-color: #1b3a9b;
}
#taulukko input[type="submit"]:active {
  transform: translateY(1px);
}