/* ============================================================
   BUREAU OF LOST TIMELINES — ASSET REGISTER SHEET
   Version: 1.0 (Dossier system)

   credits.html is the reference sheet at the back of the binder: it
   lists what the Bureau borrowed. It is the one page that is allowed to
   be a plain table, because a rights register genuinely is a table. The
   quiet rule here is that licences are printed, photographs are cited,
   and anything unproven is flagged in the amber the rest of the site
   uses for "not verified".
   ============================================================ */

.credits-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-5) var(--gutter) var(--s-8);
}

/* ---------- the standing note ---------- */
.credits-note {
  background: var(--ink-1);
  background-image: var(--fibre);
  border: 1px solid var(--line-strong);
  border-left: var(--spine) solid var(--alert);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
  color: var(--paper-dim);
}

.credits-note p + p {
  margin-top: var(--s-2);
}

.credits-note p.my {
  font-family: var(--font-my);
  color: var(--paper);
}

.credits-note strong {
  font-weight: 600;
  color: var(--paper-bright);
}

.credits-note code,
.credits-table code {
  font-family: var(--font-mono);
  font-size: 0.94em;
  letter-spacing: var(--tr-mono);
  color: var(--muted-strong);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 1px 5px;
}

/* ---------- the register ---------- */
.credits-h {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper-bright);
  margin: 0 0 var(--s-2);
  padding-bottom: var(--s-1);
  border-bottom: var(--spine) solid var(--alert);
}

/* The second register is a list of things that are not settled. */
.credits-h.is-unverified {
  color: var(--folklore);
  border-bottom-color: var(--folklore);
  margin-top: var(--s-6);
}

.credits-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-label);
  background: var(--ink-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  overflow: hidden;
}

.credits-table th,
.credits-table td {
  border-bottom: 1px solid var(--line-hair);
  border-right: 1px solid var(--line-hair);
  padding: var(--s-2) var(--s-3);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.credits-table th:last-child,
.credits-table td:last-child {
  border-right: 0;
}

.credits-table tbody tr:last-child td {
  border-bottom: 0;
}

.credits-table thead th {
  background: var(--ink-2);
  color: var(--paper-bright);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
}

.credits-table tbody tr:nth-child(even) {
  background: var(--ink-2);
}

/* Sources are cited, not shouted: the link is the paper colour with a
   red rule under it, so a register full of links still reads as one
   document. */
.credits-table a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--line-red);
  transition: color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}

.credits-table a:hover {
  color: var(--alert-bright);
  border-bottom-color: var(--alert-bright);
}

.credits-table a:focus-visible {
  outline: 2px solid var(--alert-bright);
  outline-offset: 2px;
}

.credits-footnote {
  font-family: var(--font-my);
  font-size: var(--fs-label);
  line-height: 1.7;
  color: var(--muted-strong);
  margin-top: var(--s-2);
}

/* ---------- narrow screens ---------- */
/* A rights register is read across, not stacked: a file name and its
   licence separated onto different lines stop being evidence. So the
   table keeps its shape and the sheet scrolls under it. */
.credits-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 720px) {
  .credits-table {
    font-size: var(--fs-micro);
    min-width: 560px;
  }

  .credits-table th,
  .credits-table td {
    padding: var(--s-1) var(--s-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .credits-table a {
    transition: none;
  }
}