main.kortti select {
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat; padding-right: 28px;
}

#nimitulos[hidden], #nimirivi[hidden] { display: none; }
p.kentannimi {
  margin: 0 0 5px;
  font-size: 11px; font-weight: 500; color: var(--ink-2);
}
p.nimiarvo {
  margin: 0 0 3px; font-size: 14px; font-weight: 500;
  color: var(--ink); line-height: 1.3;
}
p.nimilahde { margin: 0 0 14px; font-size: var(--teksti-pieni);
              color: var(--ink-3); }

p.tila.odottaa { color: var(--ink-3); }
p.tila.pieleen { color: var(--alert); }

main.kortti .ehdot {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 4px 0 16px; font-size: var(--teksti-pieni); font-weight: 400;
  color: var(--ink-2); line-height: 1.5;
}
main.kortti .ehdot[hidden] { display: none; }
main.kortti .ehdot input { margin: 1px 0 0; flex: none;
                           width: 15px; height: 15px; }
main.kortti .ehdot a { color: var(--data); }

#koodilohko[hidden], #nappiohje[hidden], #koodinappi[hidden] {
  display: none;
}
#koodi { font-family: var(--mono); letter-spacing: 0.14em; }

p.varmennettu {
  margin: 0 0 14px; padding: 6px 9px;
  background: var(--ok-soft); color: var(--ok);
  border-radius: 5px; font-size: var(--teksti-pieni);
}
p.varmennettu[hidden] { display: none; }

.yhteydenotto { margin: 18px auto 0; max-width: 420px; text-align: center; }
.yhteydenotto > button {
  background: none; border: 0; padding: 4px 6px;
  color: var(--data); font-size: var(--teksti-pieni);
  text-decoration: underline; cursor: pointer;
}
.yhteydenotto form { margin-top: 10px; text-align: left; }
.yhteydenotto form[hidden] { display: none; }
.yhteydenotto label {
  display: block; margin: 8px 0 3px;
  font-size: var(--teksti-pieni); color: var(--ink-2);
}
.yhteydenotto textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 7px 9px; font: inherit; font-size: var(--teksti-pieni);
}
.yhteydenotto #ytNappi { margin-top: 10px; width: 100%; }
.yhteydenotto .tila { margin: 8px 0 0; font-size: var(--teksti-pieni); }
.yhteydenotto .tila.ok { color: var(--ok); }
.yhteydenotto .tila.pieleen { color: var(--alert); }

.yhteydenotto .ansa {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.yhteydenotto fieldset {
  border: 1px solid var(--line); border-radius: 6px;
  margin: 10px 0 0; padding: 8px 10px 10px;
}
.yhteydenotto legend {
  font-size: var(--teksti-pieni); color: var(--ink-2); padding: 0 4px;
}
.yhteydenotto fieldset label {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 5px 0 0; color: var(--ink); cursor: pointer;
}
.yhteydenotto fieldset input { margin: 2px 0 0; flex: none; }
.yhteydenotto fieldset[hidden] { display: none; }