/* css/selite.css — puhekupla: lohkon otsikossa ja lomakkeen nimiössä.
   Pari tiedostolle `js/nakymat/selite.js`: se rakentaa kuplan, tämä kertoo miltä se näyttää.
   Kupla oli `kojelauta.css`:ssä kahdessa eri kohdassa — lohkon selite yhdessä ja nimiön
   vihjemerkki toisessa — ja niiden säännöt viittaavat samoihin luokkiin. Erillään ne
   ajautuisivat erilleen. */

/* ---------- selite ----------
   Puhekupla lohkon otsikon päällä. Pisteviiva otsikon alla on ainoa merkki siitä että selitys
   on olemassa — se on vähemmän kuin painike ja juuri sen verran kuin tarvitaan.

   Kupla kasvaa otsikosta oikealle (`left:0`), koska otsikko on aina lohkon vasemmassa
   laidassa. Kolmio on `::after`-neliö käännettynä 45 astetta: kupla ilman kärkeä on laatikko
   joka leijuu eikä osoita mihinkään. */
.selitteellinen{position:relative;cursor:help;
  border-bottom:1px dotted var(--ink-3);padding-bottom:1px}
.selitteellinen:hover,.selitteellinen:focus{outline:none;color:var(--ink)}

.selitekupla{position:absolute;top:calc(100% + 9px);left:-6px;z-index:30;width:270px;
  padding:11px 13px;background:var(--ink);color:var(--surface);font-family:var(--sans);
  font-size:12.5px;font-weight:400;line-height:1.55;letter-spacing:0;text-align:left;
  text-transform:none;box-shadow:0 10px 28px rgba(20,32,38,.30);
  opacity:0;visibility:hidden;transition:opacity .12s,visibility .12s;pointer-events:none}
.selitekupla::after{content:'';position:absolute;top:-4px;left:12px;width:9px;height:9px;
  background:var(--ink);transform:rotate(45deg)}
.selitteellinen:hover .selitekupla,.selitteellinen:focus .selitekupla,
.selitteellinen.nayta .selitekupla{opacity:1;visibility:visible}

/* ---------- painikkeen kupla ----------
   Sama kupla, eri suunta: painikkeet ovat ikkunan alalaidassa, joten kupla aukeaa ylös.
   Painike itse ei muutu — ei pisteviivaa, ei kysymysmerkkiä — koska se näyttää jo
   painikkeelta. Kapeampi kuin nimiön kupla, jotta alapalkin oikeanpuoleisten painikkeiden
   kupla mahtuu ikkunaan. */
.nappi .selitekupla.napissa{top:auto;bottom:calc(100% + 9px);left:-6px;width:auto;
  min-width:180px;max-width:240px;font-weight:400;text-transform:none;
  /* Viive on `:hover`-säännössä ja nolla tässä: kupla odottaa ennen kuin ilmestyy, mutta
     katoaa heti kun osoitin lähtee. Toisin päin kupla jäisi roikkumaan sen painikkeen
     päälle jota ollaan painamassa. */
  transition:opacity .12s 0s,visibility .12s 0s}
.nappi .selitekupla.napissa::after{top:auto;bottom:-4px}
/* Kupla ei aukea heti. Osoitin kulkee painikkeiden yli matkalla siihen jota painetaan, ja
   ilman viivettä alapalkki väläytti neljä kuplaa peräkkäin. Puoli sekuntia on pidempi kuin
   ohikulku ja lyhyempi kuin odottaminen. */
.nappi:hover .selitekupla.napissa,.nappi:focus-visible .selitekupla.napissa{
  opacity:1;visibility:visible;transition-delay:.55s}

/* Nimiön vihjemerkki. Kysymysmerkki ympyrässä on merkki eikä kuvake — sama sääntö kuin
   avausnuolella. Vaimea kunnes siihen osoittaa: se ei saa kilpailla huomiosta sen kentän
   kanssa jota se selittää. */
.vihje{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  margin-left:5px;vertical-align:-3px;border:0;border-radius:50%;background:var(--ink-3);
  color:var(--surface);font-family:var(--sans);font-size:10px;font-weight:700;line-height:1;
  text-transform:none;letter-spacing:0;user-select:none}
.vihje:hover,.vihje:focus{background:var(--ink);color:var(--surface)}

/* Nimiön kupla piilotetaan `display`illä eikä pelkällä näkyvyydellä: lomake vierii
   (`.popup-sisus`), ja piilossakin oleva kupla kasvattaisi vieritysaluetta — ikkunaan
   ilmestyisi vierityspalkki jonka aiheuttajaa ei näy missään. Lohkon otsikon kupla säilyy
   entisellään; siellä ei ole vieritystä eikä syytä menettää häivytystä. */
.vihje .selitekupla{display:none;opacity:1;visibility:visible;transition:none}
.vihje:hover .selitekupla,.vihje:focus .selitekupla,.vihje.nayta .selitekupla{display:block}
/* Vasemmalle aukeava kupla. Kärki seuraa mukana: kupla ilman kärkeä leijuu osoittamatta. */
.selitekupla.vasemmalle{left:auto;right:-6px}
.selitekupla.vasemmalle::after{left:auto;right:12px}
/* Ylös aukeava kupla: lomakkeen alin kenttä ei mahduta kuplaa alleen. */
.selitekupla.ylos{top:auto;bottom:calc(100% + 9px)}
.selitekupla.ylos::after{top:auto;bottom:-4px}