/* The search box and the rows it produces.

   Reads semantic tokens rather than raw palette values, so it survives the world switch: the
   conversation renders dark and every other page renders stone, and the same box appears on both. */

:where(.search) {
  margin-block: 1rem 1.5rem;
}

:where(.search__field) {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

:where(.search__label) {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-text-subtle);
}

:where(.search__row) {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}

:where(.search__input) {
  flex: 1;
  /* At least a thumb's width tall, on the phone this layout is designed for first. */
  min-block-size: 44px;
}

:where(.search__submit) {
  flex: 0 0 auto;
}

:where(.search__clear) {
  display: inline-block;
  margin-block-start: .5rem;
  font-size: var(--step--1);
  color: var(--color-text-subtle);
}

/* Which leg of the archivos search found a file. Quiet: it is an annotation on a result, not the
   result. */
:where(.documents-hit) {
  display: flex;
  align-items: center;
  gap: .5rem;
}

:where(.documents-hit__where) {
  flex: 0 0 auto;
  font-size: var(--step--2);
  color: var(--color-text-subtle);
}

:where(.clientes-item) {
  display: flex;
  align-items: center;
  gap: .75rem;
}

:where(.clientes-item__body) {
  flex: 1;
  min-inline-size: 0;
}

:where(.clientes-item__name) {
  font-weight: 600;
}

:where(.clientes-item__meta) {
  font-size: var(--step--1);
  color: var(--color-text-subtle);
  /* A CUIT, a mail and a phone on one line overflow a phone; they wrap rather than push the card. */
  overflow-wrap: anywhere;
}

/* The two library tabs. Same shape as the expedientes tabs, and the state lives on aria-current so
   the markup carries it rather than a class. */
:where(.biblioteca-tabs) {
  display: flex;
  gap: 1rem;
  border-block-end: 1px solid var(--color-border);
  margin-block-end: 1rem;
}

:where(.biblioteca-tabs__tab) {
  padding-block: .5rem;
  color: var(--color-text-subtle);
  text-decoration: none;
}

:where(.biblioteca-tabs__tab[aria-current="page"]) {
  color: var(--color-text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 currentColor;
}

:where(.biblioteca-item) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
}

:where(.biblioteca-item__body) {
  flex: 1 1 100%;
  min-inline-size: 0;
}

:where(.biblioteca-item__title) {
  font-weight: 600;
}

:where(.biblioteca-item__meta),
:where(.biblioteca-item__cita) {
  font-size: var(--step--1);
  color: var(--color-text-subtle);
}

/* A passage is meant to be read, not scanned, so it gets a reading measure rather than the full
   width of a desktop window. */
:where(.biblioteca-item__passage) {
  max-inline-size: 68ch;
  margin-block: .5rem;
}

:where(.conversation-hit) {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

:where(.conversation-hit__speaker) {
  font-weight: 600;
}

:where(.conversation-hit__at) {
  font-size: var(--step--1);
  color: var(--color-text-subtle);
}

:where(.conversation-hit__text) {
  flex: 1 1 100%;
  max-inline-size: 68ch;
}

:where(.conversation-hits__scope) {
  margin-block-start: 1rem;
  font-size: var(--step--1);
  color: var(--color-text-subtle);
}