/* Tehtäväkortti: riippuva numerointi.
 *
 * mdBookin laatikon sijaan kevyempi ilme: tehtävänumero riippuu vasemmassa
 * marginaalissa ja tehtävät erottuvat toisistaan ohuella viivalla, koska
 * tehtäviä on sivulla monta peräkkäin ja tehtävänannon koodilohkot tarvitsevat
 * koko palstan. TIM-nappi jäi, jotta tehtävän ainoa toiminto erottuu
 * tehtävänannon omista linkeistä. Merkkauksen kirjoittaa convert.py:
 * convert_tasks. */

/* Bonusmerkin kulta. mdBookin #C29A5B ei riitä kontrastiksi valkoista
 * vasten; sama sävy tummennettuna vaaleaan ja vaalennettuna tummaan teemaan.
 * Teemalla ei ole omaa muuttujaa tälle, koska JYU-paletti on tekemättä. */
:root {
  --jyu-task-bonus: #9a7326;
}

[data-md-color-scheme="slate"] {
  --jyu-task-bonus: #d3ab6d;
}

/* TIM-napin sävyt. Täyttö on --md-typeset-a-color, sama linkkiväri kuin
 * numerossa ja pisteissä: se on ainoa teeman muuttuja, joka on luettava
 * molemmissa teemoissa (--md-primary-fg-color on tummassa sama tumma indigo).
 * Tekstin väri on tummassa teemassa lähes musta, koska valkoinen ei yllä
 * tumman teeman vaaleammalla sinisellä pienen tekstin kontrastiin. Hover
 * tummenee vaaleassa ja vaalenee tummassa, eli poispäin sivun taustasta.
 * Hehku on tummassa vahvempi, koska tumma tausta imee värin. */
:root {
  --jyu-task-btn-fg: #fff;
  --jyu-task-btn-bg-hover: color-mix(in srgb, var(--md-typeset-a-color) 80%, black);
  --jyu-task-btn-glow: color-mix(in srgb, var(--md-typeset-a-color) 40%, transparent);
  --jyu-task-btn-glow-far: color-mix(in srgb, var(--md-typeset-a-color) 22%, transparent);
}

[data-md-color-scheme="slate"] {
  --jyu-task-btn-fg: #10131a;
  --jyu-task-btn-bg-hover: color-mix(in srgb, var(--md-typeset-a-color) 80%, white);
  --jyu-task-btn-glow: color-mix(in srgb, var(--md-typeset-a-color) 45%, transparent);
  --jyu-task-btn-glow-far: color-mix(in srgb, var(--md-typeset-a-color) 28%, transparent);
}

/* ------------------------------------------------------------------ kaista */

/* Yksi tehtävä. container-type tekee kortista kyselysäiliön: leveän palstan
 * säännöt alempana katsovat kortin omaa leveyttä eivätkä ikkunan. */
.md-typeset .task {
  container-type: inline-size;
  margin: 1.6em 0;
  padding: 1.9rem 0;
  border-block: .05rem solid var(--jyu-rule);
}

/* Peräkkäiset tehtävät ovat yhtä kaistaa: negatiivinen ylämarginaali kumoaa
 * edellisen alamarginaalin, ja yläviiva jää pois, koska edellisen alaviiva
 * on jo siinä. */
.md-typeset .task + .task {
  margin-block-start: -1.6em;
  border-block-start: 0;
}

/* -------------------------------------------------------------- tunnusrivi */

.md-typeset .task-head {
  display: flex;
  align-items: baseline;
  --task-head-gap: .7rem;
  gap: var(--task-head-gap);
  margin-bottom: .8rem;
}

/* Tabulaariset numerot, jotta 2.9 ja 2.10 ovat saman levyisiä ja pinoutuvat
 * marginaalissa suoraan riviin. */
.md-typeset .task-num {
  flex: none;
  font-family: var(--md-code-font-family);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--md-typeset-a-color);
}

/* Nimi on otsikko, joten teeman otsikkokirjasinta; typography.css:n
 * otsikkolista ei tavoita tätä. flex: 0 1 auto: nimi ei kasva, jolloin
 * bonusliuska jää kiinni nimeen eikä valu pistemäärän viereen; min-width: 0
 * antaa sen silti rivittyä kapealla palstalla. */
.md-typeset .task-name {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--md-text-font-family);
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.3;
}

/* Pisteet seuraavat nimeä eivätkä pakene kortin oikeaan reunaan. Väli nimeen
 * on .8rem kummallakin leveydellä: tunnusrivin gap on numerosarakkeen mitta,
 * joten se kumotaan negatiivisella marginaalilla. */
.md-typeset .task-points {
  flex: none;
  margin-inline-start: calc(.8rem - var(--task-head-gap));
  font-family: var(--md-text-font-family);
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--md-typeset-a-color);
}

/* Bonusliuska on nimen sisällä kuten lähdemerkkauksessa, joten se seuraa
 * nimen viimeistä sanaa myös rivittyessä. vertical-align on välttämätön:
 * inline-flex-laatikolla ei ole tekstin peruslinjaa, joten tunnusrivin
 * align-items: baseline kohdistaisi liuskan alareunan otsikon peruslinjaan. */
.md-typeset .task-bonus {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  position: relative;
  top: -.06em;
  gap: .35em;
  margin-inline-start: .1em;
  padding: .1em .6em .15em;
  border: 1px solid currentcolor;
  border-radius: 2em;
  color: var(--jyu-task-bonus);
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Bonusmerkki on inline-SVG teeman .twemoji-kääreessä (convert.py:
 * bonus_mark), joten koon ja kohdistuksen hoitaa teema; tänne jää väri.
 * Sääntö on yhteinen liuskan ja leipätekstin kanssa, koska sama merkki on
 * myös <summary>-riveillä ja vaatimuslistoissa ilman liuskaa. */
.md-typeset .jyu-bonus {
  color: var(--jyu-task-bonus);
}

/* ------------------------------------------------------------ tehtävänanto */

/* Tehtävänanto on tavallista leipätekstiä teeman marginaaleilla; vain
 * reunimmaiset siivotaan, jotta kaistan väljyys tulee kortin paddingista
 * eikä kahdesta lähteestä. */
.md-typeset .task-handout > :first-child {
  margin-top: 0;
}

.md-typeset .task-handout > :last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------- TIM-nappi */

.md-typeset .task-link {
  margin-top: 1.2rem;
}

/* Täytetty nappi eikä tekstilinkki: teema alleviivaa jokaisen leipätekstin
 * linkin, joten hover-alaviiva piirtyisi kahtena viivana, ja nappina
 * tehtävän ainoa toiminto erottuu tehtävänannon linkeistä. Kahden luokan
 * sääntö on tarkempi kuin teeman .md-typeset a, joten !importantia ei
 * tarvita. */
.md-typeset .task-link > a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  width: fit-content;
  padding: .7em 1.2em;
  border-radius: .2rem;
  background-color: var(--md-typeset-a-color);
  color: var(--jyu-task-btn-fg);
  font-family: var(--md-text-font-family);
  font-size: .9em;
  font-weight: 600;
  text-decoration: none;
  user-select: none;
  transition: background-color .15s, box-shadow .2s;
}

.md-typeset .task-link > a::after {
  content: "\2192";
  transition: transform .15s;
}

/* :focus mukana, koska teema värjää linkin myös kohdistettaessa; ilman tätä
 * napin teksti vaihtaisi väriä sarkaimella. Hehku on kaksi siirtämätöntä
 * varjoa eli napin muotoinen halo, ei pudotusvarjo; sama hehku
 * :focus-visiblessä selaimen oman kohdistusrenkaan rinnalle. */
.md-typeset .task-link > a:hover,
.md-typeset .task-link > a:focus {
  background-color: var(--jyu-task-btn-bg-hover);
  color: var(--jyu-task-btn-fg);
}

.md-typeset .task-link > a:hover,
.md-typeset .task-link > a:focus-visible {
  box-shadow:
    0 0 .5rem .05rem var(--jyu-task-btn-glow),
    0 0 1.5rem .2rem var(--jyu-task-btn-glow-far);
}

.md-typeset .task-link > a:hover::after {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .task-link > a::after {
    transition: none;
  }
}

/* Paperille tekstilinkkinä: selain ei tulosta taustavärejä oletuksena, ja
 * valkoinen napinteksti katoaisi valkoiselle paperille. */
@media print {
  .md-typeset .task-link > a {
    padding: 0;
    background: none;
    color: var(--md-typeset-a-color);
  }
}

/* ------------------------------------------------------------ leveä palsta */

/* Kapea on perustila ja leveä lisäys: ilman @container-tukea kortti piirtyy
 * kapeana mutta ehjänä. Mitta on kortin oma leveys, koska palsta on kapea
 * myös jaetussa ikkunassa ja tulostuksessa. Säiliö on kortti eikä
 * artikkeli, koska container-type tekee elementistä sijoituksen sisältävän
 * lohkon, mikä .md-content__innerissä rikkoisi teeman ponnahdukset. 34rem:n
 * alapuolella 5.6rem:n sisennys syö koodilohkoista liikaa. */
@container (min-width: 34rem) {
  /* Numero omaan sarakkeeseensa: 4.2rem + tunnusrivin väli 1.4rem =
   * sisällön sisennys 5.6rem. */
  .md-typeset .task-num {
    width: 4.2rem;
    text-align: right;
  }

  .md-typeset .task-head {
    --task-head-gap: 1.4rem;
  }

  .md-typeset .task-handout,
  .md-typeset .task-link {
    padding-inline-start: 5.6rem;
  }
}