/* ==========================================================================
   text.css — ce are pagina de scriere in plus fata de o pagina de unitati.

   Cartonasul si panoul vin din unit.css. Aici stau doar cele doua casete de
   text si tabelul celor sapte scrieri.

   Casetele nu sunt doua cifre mari, ca la unitati: textul poate avea un rand
   sau zece, asa ca se asaza una sub alta si pot fi trase mai jos de cititor.
   ========================================================================== */

.text-tool__pair {
  display: grid;
  gap: .9rem;
}

.text-tool__side { display: flex; flex-direction: column; gap: .4rem; }

.text-tool__label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cocoa-soft);
}

.text-tool__area {
  inline-size: 100%;
  min-block-size: 6.5rem;
  resize: vertical;
  padding: .85rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--cream-lift);
  color: var(--cocoa);
  font-family: var(--body-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* Textul scris aici e adesea cod -- un slug, un nume de variabila -- si
     atunci ghilimelele si liniutele desteptate de tastatura ar fi stricat
     tocmai ce vrea omul sa copieze. */
  -webkit-text-size-adjust: 100%;
}
.text-tool__area:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 2px; }

/* Rezultatul: aceeasi caseta, dar se vede ca nu se scrie in ea. */
.text-tool__area--out {
  background: var(--sand-deep);
  border-style: dashed;
  /* Cuvintele lipite ale unui camelCase lung n-au unde sa se rupa; fara asta
     ar fi iesit din caseta. */
  overflow-wrap: anywhere;
}

.text-tool__copy { align-self: start; margin-block-start: .2rem; }

/* Sageata dintre casete. Pe ecran lat sta la mijloc, pe telefon se intoarce
   in jos -- acelasi semn, alt drum. */
.text-tool__arrow {
  display: grid;
  place-items: center;
  rotate: 90deg;
}
.text-tool__arrow svg { inline-size: 2.4rem; block-size: 2.4rem; }

@media (min-width: 46rem) {
  .text-tool__pair {
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
  }
  .text-tool__arrow { rotate: none; margin-block-start: 2.1rem; }
}

/* ---------- tabelul celor sapte scrieri ---------- */

/* Rezultatele sunt cod, nu proza: cifrele si literele trebuie sa stea in
   coloana, iar un snake_case lung trebuie sa se poata rupe. */
.text-table__out {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Randul paginii de fata. Nu e o legatura catre ea insasi -- ar fi fost o
   legatura care nu duce nicaieri --, deci se vede ca e aici prin fundal, nu
   prin culoarea textului. */
.text-table__is { background: var(--sand-deep); }