/*
 * Archivos: every draft Pretor has delivered, browsable by name rather than by scrolling back
 * through the moment it arrived. Stone world, since DocumentsController inherits the app default,
 * so this reads off the semantic tokens pretor-worlds maps rather than the raw stone/oxblood
 * variables, and would still be correct if this page ever moved worlds.
 */

.documents-day {
  margin-block-end: 2rem;
}

/*
 * The day is the <summary>, so it is the control that opens its own group, and it carries the <h2>
 * that makes it a heading too. It keeps the type treatment it had when it was only a heading; what
 * is added is the affordance and the count.
 */
.documents-day__title {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-block-end: .75rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  /* 44px, the same touch target every other control on this page carries. */
  min-block-size: 44px;
  /* Firefox draws a ::marker on a summary whatever its display is. Suppressed so the chevron below
     is the single affordance in every engine, rather than a triangle in one and nothing in another. */
  list-style: none;
}

/* The summary owns the type; the heading inside it is there for the document outline, not to look
   like anything of its own. Reset rather than restyled, so the two cannot drift. */
.documents-day__date {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.documents-day__count {
  margin-inline-start: auto;
  color: var(--color-text-subtle);
  text-transform: none;
  letter-spacing: normal;
}

/* Blink and WebKit draw the disclosure triangle only while the summary is display: list-item, and
   this one is a flex container, so there was no native marker here to style and no sign at all that
   the row opened. Keyboard and screen-reader users were unaffected — details/summary announces its
   own state — but a sighted reader had nothing. The marker is suppressed explicitly and replaced by
   a chevron we draw, which is the one part of this that behaves the same everywhere. */
.documents-day__title::-webkit-details-marker {
  display: none;
}

.documents-day__title::before {
  content: "";
  flex: none;
  inline-size: .4em;
  block-size: .4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  /* Pointing right when closed, down when open, rotating between the two. The global
     prefers-reduced-motion rule in pretor-base already flattens the transition. */
  transform: rotate(-45deg);
  transition: transform .2s var(--ease);
}

.documents-day[open] > .documents-day__title::before {
  transform: rotate(45deg);
}

.documents-list {
  row-gap: .6rem;
}

.documents-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-block-size: 44px;
}

.documents-item__format {
  flex-shrink: 0;
  font-size: .68rem;
  letter-spacing: .08em;
  --badge-background: transparent;
  --badge-border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  --badge-color: var(--accent);
}

.documents-item__body {
  min-inline-size: 0;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .5rem;
}

.documents-item__name {
  display: inline-block;
  padding-block: .6rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.documents-item__icon {
  --icon-size: .85rem;
  --icon-color: var(--color-text-subtle);
}

.documents-item__meta {
  margin: 0;
  flex-basis: 100%;
  color: var(--color-text-subtle);
  font-size: var(--step--1);
}

/* Empty and core-unavailable states get a real card rather than a bare paragraph. */
.documents-state {
  margin-block: 1.5rem;
  padding: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  text-align: center;
  color: var(--color-text-subtle);
}

.documents-state .icon {
  --icon-size: 1.75rem;
  --icon-color: var(--accent-soft);
  margin-block-end: .9rem;
}

.documents-state p {
  margin: 0;
  max-inline-size: 42ch;
  margin-inline: auto;
}

@media (width >= 48rem) {
  .documents-item {
    gap: 1.1rem;
  }
}