/* ============================================================
   BUREAU OF LOST TIMELINES — CROSS-REFERENCES
   css/refs.css

   The visual fact this sheet has to carry: a record belongs to an
   office. On a card that is one stamped code in the meta row. Inside a
   sheet it is a block of chips — a filing drawer, not a tag cloud — and
   the chip is the same object everywhere: a square, a hairline, a
   category code and a title, in that order.

   Nothing here is decorative. A chip is a control, so it gets a real
   focus ring, a hover state that lifts it off the page, and a reduced
   motion path that keeps the highlight but drops the travel.

   LOAD ORDER: after css/tokens.css and css/style.css.
   ============================================================ */

/* ---------- THE STAMP ON A CARD ---------- */
/* Small enough to read at a glance, aligned with the rest of the meta
   row. It is a control, not a label: it opens the division's own file,
   which is why js/refs.js renders it as a button and the delegated
   listener catches it before the card underneath it can react. */
.xref-stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--paper-dim);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--alert);
  border-radius: var(--r-1);
  padding: 1px 6px 1px 5px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
.xref-stamp:hover,
.xref-stamp:focus-visible {
  color: var(--paper-bright);
  background: var(--alert-wash);
  border-color: var(--line-red);
}
.xref-stamp:focus-visible {
  outline: 2px solid var(--alert-bright);
  outline-offset: 2px;
}

/* ---------- THE BLOCK INSIDE A SHEET ---------- */
.xref-lead {
  font-size: var(--fs-label);
  color: var(--muted);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
  max-width: 62ch;
}

.xref-body {
  margin-top: var(--s-2);
  padding-bottom: var(--s-1);
}

.xref-group + .xref-group {
  margin-top: var(--s-4);
}

.xref-kind {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--muted-strong);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
/* the drawer rail: the label ends, the shelf begins */
.xref-kind::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-hair);
}

/* The drawer grid: chips are equal-width slots, so a block of twenty of them
   reads as an index rather than a cloud. */
.xref-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-2);
}

/* ---------- THE CHIP ---------- */
/* A chip is a stack: the line the reader clicks (code, then title), and the
   record's own Burmese under it. It is square-cornered and rail-marked like
   every other object in this archive, because it *is* a record. */
button.xref-chip,
a.xref-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  line-height: 1.35;
  color: var(--paper);
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-left: var(--spine) solid var(--alert-deep);
  border-radius: var(--r-1);
  padding: 7px 10px 7px 9px;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
}
.xref-chip .xref-line {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
  width: 100%;
}
.xref-chip:hover {
  background: var(--ink-2);
  border-left-color: var(--alert);
  transform: translateY(-1px);
}
.xref-chip:focus-visible {
  outline: 2px solid var(--alert-bright);
  outline-offset: 2px;
}

.xref-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  color: var(--muted);
  text-transform: uppercase;
  flex: none;
}
.xref-name {
  color: var(--paper-bright);
  min-width: 0;
  /* A record's title is its identity, not decoration: on a phone it takes the
     lines it needs rather than trailing off into an ellipsis. */
  white-space: normal;
  overflow-wrap: break-word;
}
/* a division chip is a destination, not a record: mark it as one */
.xref-chip.xref-dept {
  border-left-color: var(--alert);
  background: var(--alert-wash);
}
.xref-chip.xref-dept .xref-name {
  font-family: var(--font-mono);
  letter-spacing: var(--tr-mono);
  /* a division name is short and has to be read whole, so it wraps
     instead of trailing off into an ellipsis */
  white-space: normal;
}

/* Burmese sits under the label rather than beside it: the line is the thing
   being clicked, the translation belongs to the record it names. */
.xref-my {
  display: block;
  width: 100%;
  font-family: var(--font-my);
  font-size: var(--fs-micro);
  color: var(--muted);
  line-height: 1.6;
  white-space: normal;
}

/* ---------- SITE SURFACES ---------- */
/* A sheet reference leaves the page, so it is drawn as a link and not a
   button — the difference has to be legible before anyone clicks. */
a.xref-page {
  border-left-color: var(--line-strong);
  border-style: dashed;
}
a.xref-page .xref-name {
  font-family: var(--font-mono);
  letter-spacing: var(--tr-mono);
  font-size: var(--fs-label);
}

/* ---------- THE ARRIVAL HIGHLIGHT ---------- */
/* A reference that jumps panels has to show where it landed. */
@keyframes xref-arrive {
  0%   { box-shadow: 0 0 0 0 var(--alert-glow); background: var(--alert-wash-2); }
  60%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
}
.xref-flash {
  animation: xref-arrive 1.6s var(--ease-out) 1;
  border-radius: var(--r-2);
}

/* ---------- NARROW ---------- */
@media (max-width: 560px) {
  .xref-items { grid-template-columns: 1fr; }
  .xref-chip { padding: 9px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .xref-chip,
  .xref-chip:hover,
  .xref-stamp {
    transition: none;
    transform: none;
  }
  /* keep the arrival signal, drop the travel */
  .xref-flash {
    animation: none;
    outline: 2px solid var(--alert);
    outline-offset: 3px;
  }
}