/* css/tunnukset.css — kirjautuminen ja liittyminen.
   Sivu jolla on yksi tehtävä kerrallaan, joten lomake on keskellä eikä sivupalstassa.
   Pimeä kehys, paneeli sen päällä — sama kuin muualla. */

body.tunnussivu{display:flex;flex-direction:column;min-height:100vh;
  background:var(--kehys);background-attachment:fixed}

.tunnukset{flex:1;width:100%;max-width:860px;margin:0 auto;padding:32px 20px 40px}

/* Lomake on tällä sivulla se paneeli joka kelluu kehyksen päällä, eikä harmaa laatikko
   paneelin sisällä niin kuin työtilassa. */
/* Kirjautumislomake on yksipalstainen: sähköposti ja salasana eivät ole rinnakkaisia
   valintoja vaan peräkkäisiä vaiheita. */
.tunnukset .lomake{grid-template-columns:1fr;max-width:400px;margin:0 auto 16px;
  padding:28px 26px;gap:14px;position:relative;
  background:var(--surface);border-radius:var(--r3);box-shadow:var(--paneeli)}
.tunnukset h2{font-size:18px;font-weight:600;margin-bottom:2px}
.tunnukset .ohje{margin:0;color:var(--ink-3);font-size:13px;line-height:1.55}
.tunnukset .lomakkeen-napit{margin-top:6px;flex-direction:column}
.tunnukset .lomakkeen-napit .nappi{width:100%;min-height:40px}

/* Kaksi vaihtoehtoa rinnakkain: kutsukoodi ensin, koska myyjiä on monta ja liikkeitä yksi. */
.parivalinta{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.parivalinta .lomake{max-width:none;margin:0}

/* Kutsukoodi luetaan ääneen puhelimessa ja kirjoitetaan isoin kirjaimin. Väljä kirjainväli
   erottaa merkit toisistaan; kirjaimisto on jo valittu niin ettei sekaannuksia ole (ei 0/O
   eikä 1/I), mutta lukeminen on silti helpompaa väljänä. */
.koodikentta{font-family:var(--mono);font-size:21px;letter-spacing:.24em;
  text-transform:uppercase;text-align:center;min-height:50px}

.vahvistus{text-align:center}
.vahvistus .iso{margin:8px 0 0;font-size:19px;font-weight:600}
.vahvistus .ohje{margin-top:2px}

.alaosa{padding:8px 20px 28px;text-align:center;color:var(--frame-ink-2);font-size:12.5px}
.alaosa a{color:var(--frame-ink-2)}
.alaosa a:hover{color:var(--frame-ink)}

@media (max-width:720px){
  .parivalinta{grid-template-columns:1fr}
  .tunnukset{padding:20px 12px 32px}
  .tunnukset .lomake{padding:20px 18px}
}