/* Ayuda y glosario. La ayuda se pide donde aparece la duda, no en un menú
   aparte: el signo va pegado al control que confunde. */

.help-mark {
  width: 20px;
  height: 20px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-40);
  border-radius: 50%;
  background: transparent;
  font-family: var(--mono);
  font-size: var(--mono-kicker);
  line-height: 1;
  color: var(--ink-60);
}

.help-mark:hover,
.help-mark:active {
  border-color: var(--green);
  color: var(--green);
}

.help-mark--inline {
  width: 15px;
  height: 15px;
  margin-left: var(--sp-6);
  vertical-align: middle;
}

/* El signo de la fila de alimento: discreto, pero ahí donde se lee el grupo */
.food__help {
  width: 18px;
  height: 18px;
  flex: none;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-25);
  border-radius: 50%;
  background: transparent;
  font-family: var(--mono);
  font-size: 8.5px;
  line-height: 1;
  color: var(--ink-50);
}

.food__help:hover,
.food__help:active {
  border-color: var(--green);
  color: var(--green);
}

.food-form__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  margin-top: var(--sp-22);
}

.food-form__heading .food-form__label { margin-top: 0; }

/* La explicación del grupo elegido, debajo de las fichas */
.group-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  width: 100%;
  margin-top: var(--sp-10);
  border: 0;
  border-left: 2px solid var(--green);
  background: transparent;
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-10);
  text-align: left;
}

.group-hint__text {
  font-family: var(--serif);
  font-size: 15.5px;
  color: var(--ink-75);
}

.group-hint__more {
  font-family: var(--mono);
  font-size: var(--mono-kicker);
  letter-spacing: var(--track-nav);
  color: var(--green);
  flex: none;
}

/* El "MANTIENE 1 proteína" de la hoja de sustitutos también pide ayuda */
.sheet__detail--help {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  display: inline-flex;
  align-items: center;
}

/* Glosario ------------------------------------------------------------------ */

.glossary__label { margin-top: var(--sp-22); }

.glossary { display: flex; flex-direction: column; }

.glossary__item { border-bottom: 1px dotted var(--rule-25); }

.glossary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-10);
  width: 100%;
  padding: var(--sp-12) 2px;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--serif);
}

.glossary__term {
  display: block;
  font-size: var(--size-food);
}

.glossary__short {
  display: block;
  font-family: var(--mono);
  font-size: var(--mono-detail);
  color: var(--ink-55);
  margin-top: 2px;
}

.glossary__mark {
  font-family: var(--mono);
  font-size: var(--mono-lg);
  color: var(--ink-50);
  flex: none;
}

.glossary__item.is-open .glossary__mark { color: var(--green); }
.glossary__item.is-open .glossary__mark::before { content: "−"; }
.glossary__item.is-open .glossary__mark { font-size: 0; }
.glossary__item.is-open .glossary__mark::before { font-size: var(--mono-lg); }

.glossary__body { display: none; padding: 0 2px var(--sp-14); }
.glossary__item.is-open .glossary__body { display: block; }

.glossary__text {
  margin: 0;
  font-size: var(--size-body);
  line-height: 1.45;
  color: var(--ink-78);
}

.glossary__detail {
  margin: var(--sp-9) 0 0;
  font-size: var(--size-body);
  line-height: 1.45;
  color: var(--ink-65);
}

.glossary__examples {
  margin: var(--sp-10) 0 0;
  font-family: var(--mono);
  font-size: var(--mono-detail);
  line-height: 1.6;
  color: var(--ink-55);
}

.sheet__body .glossary + .label { margin-top: var(--sp-22); }