/* =============================================================================
   Font generator - the rows and the input live in tools/styles.css; this file
   adds the greyed sample, the folded extra styles and a tighter phone row.
   ============================================================================= */
.gen__item{grid-template-columns:190px 1fr auto}

/* Nothing typed yet: every style shows "Twój tekst", dimmed like a placeholder. */
.gen__list.is-sample .gen__output{color:var(--bone-3)}
@media (hover:hover) and (pointer:fine){
  .gen__list.is-sample .gen__item:hover .gen__output{color:rgba(10,10,10,.6)}
}

/* The list's last hairline already closes it; the fold hangs right under. */
.gen__more{border-top:0;margin-top:-12px}
.gen__more > summary{padding:16px 0}
.gen__more .more__body,.gen__more > .gen__list{padding:0}

/* Phones: name and "kopiuj" share the first line, the styled text gets the
   full width under them. Three stacked lines per style made the list endless. */
@media (max-width:760px){
  .gen__item{
    grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;
    grid-template-areas:"name copy" "out out";
  }
  .gen__name{grid-area:name}
  .gen__copy{grid-area:copy;justify-self:end;padding:6px 11px}
  .gen__output{grid-area:out}
}