/* Asset ledger page. Loaded after main.css and only by ledger.html, so the
   other pages are untouched and their cache-buster does not move.

   Everything here is built out of main.css's tokens — no new palette, no new
   type scale. The game's own ledger is a green-on-black terminal readout; this
   is the same information wearing the site's clothes. */

/* ---------- intro ---------- */

.led-intro { max-width: 68ch; }
.led-intro p + p { margin-top: 0.9rem; }

/* ---------- summary tiles ---------- */

.led-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.8rem;
  margin: 2rem 0 1.6rem;
}

.led-stat {
  border: 2px solid var(--line);
  background: var(--panel);
  padding: 1rem 1.1rem;
}

.led-stat-v {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--text);
}

/* the two that carry a verdict: green when the number is the good news,
   ember when it is the number still to work through */
.led-stat.is-ok .led-stat-v { color: var(--amber); }
.led-stat.is-warn .led-stat-v { color: var(--ember); }

.led-stat-k {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-term);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- replacement progress ---------- */

.led-bar {
  height: 8px;
  border: 2px solid var(--line);
  background: var(--void-deep);
}

.led-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--amber);
  box-shadow: var(--glow-amber);
  transition: width 0.5s ease;
}

.led-prog {
  margin-top: 0.6rem;
  font-family: var(--font-term);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- filters ---------- */

.led-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 2.4rem 0 1.4rem;
}

.led-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.led-filter {
  font-family: var(--font-term);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  color: var(--text-dim);
  border: 2px solid var(--line);
  /* same fix as the tags: without this the buttons inherit the body's ~1.7
     line-height and stand far taller than the type inside them */
  line-height: 1;
  padding: 0.55rem 0.8rem 0.5rem;
  text-indent: 0.09em; /* offset the trailing letter-space */
  transition: color 0.15s, border-color 0.15s;
}

.led-filter:hover { color: var(--text); border-color: var(--line-dim); }

.led-filter.is-on {
  color: var(--void-deep);
  background: var(--amber);
  border-color: var(--amber);
}

.led-count {
  margin-left: auto;
  font-family: var(--font-term);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- the list ---------- */

/* One layout, not two. A card grid put the origin — the whole point of the
   page — in a badge under a thumbnail, where it read as decoration. As a
   column it lines up down the page, so AI / hand-made / procedural can be
   scanned without reading a single row. */
.led-grid {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.led-row {
  display: grid;
  /* the origin track is auto, so it fits whatever the tag needs — a fixed
     track here is what clipped the label */
  grid-template-columns: 7rem minmax(9rem, 15rem) auto 1fr;
  align-items: stretch;
  border: 2px solid var(--line);
  background: var(--panel);
}

.led-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  padding: 0.5rem;
  background: var(--void-deep);
  border-right: 2px solid var(--line);
}

.led-thumb img {
  max-width: 100%;
  max-height: 4.5rem;
  width: auto;
  object-fit: contain;
}

/* sprites whose master is only a few pixels across, kept crisp */
.led-thumb img.is-pixel { image-rendering: pixelated; }

/* stand-in for the entries that have no image to show: sounds, the font, and
   everything generated at runtime */
.led-glyph {
  font-family: var(--font-term);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  border: 2px dashed var(--line);
  padding: 0.5rem 0.7rem;
}

.led-name {
  display: flex;
  align-items: center;
  padding: 0.8rem 1.1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
}

/* Ruled on both sides so the origin reads as its own column rather than as a
   badge floating in the row. This is the column a reader came for. */
.led-origin {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 0.9rem;
  border-left: 2px solid var(--line);
  border-right: 2px solid var(--line);
}

/* One line, one width, always.

   Sized in ch, not rem: 1ch is the width of a "0" in the element's own font,
   and ModeNine is monospaced, so 15ch is exactly 15 characters no matter what
   the root font-size clamp has resolved to. Measuring this in rem meant doing
   the em-to-rem conversion by hand and getting it wrong — AI GENERATED is 12
   cells at 0.6em plus 0.09em tracking, which is 13.8ch, and the box I gave it
   was narrower than that, so the label was cut off at the border.

   Every label is shorter than 15ch, so they all render at exactly that width.
   nowrap stops "Third-party" breaking at its hyphen; the column track is auto
   so it takes its width from the tag rather than the tag being squeezed into
   a track picked in advance. */
.led-tag {
  display: block;
  width: 15ch;
  font-family: var(--font-term);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  hyphens: none;
  /* the box was inheriting the body's ~1.7 line-height, which padded it out
     to nearly twice the height of its own text */
  line-height: 1;
  padding: 0.42rem 0.4rem 0.38rem;
  border: 1px solid currentColor;
  /* letter-spacing is added AFTER the last character too, so centred text
     sits half a space left of true centre. Push it back by the same amount. */
  text-indent: 0.09em;
}

/* Only AI-in-build gets the warm tone. Everything else is the site's green at
   varying strength, so the page does not read as six competing categories. */
.led-tag.t-ai { color: var(--ember); }
.led-tag.t-hand { color: var(--amber); }
.led-tag.t-proc { color: var(--teal); }
.led-tag.t-cc0,
.led-tag.t-paid,
.led-tag.t-ext { color: var(--text-dim); }

/* One description per row. Its left rule is the origin column's right rule;
   its right end is the row's own border, so it is closed off at both ends the
   same way. */
.led-desc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.35em;
  padding: 0.8rem 1.1rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* type and status, folded into the front of the sentence instead of taking a
   line of their own under the name */
.led-kind {
  font-family: var(--font-term);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.led-empty {
  padding: 2rem 0;
  color: var(--text-dim);
}

/* ---------- narrow ---------- */

/* Four columns need roughly 40rem before the description is squeezed to two
   words a line, so below that the row folds: art beside the name, then the
   origin and the description stacked under them. The rules turn horizontal so
   the origin is still fenced off on both sides. */
@media (max-width: 720px) {
  .led-row { grid-template-columns: 6rem 1fr; }
  .led-thumb { grid-row: 1; min-height: 4.5rem; }
  .led-name { grid-column: 2; }
  .led-origin {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding: 0.6rem 1.1rem;
    /* stacked, the cell is full width — hold the tag to the column width it
       has on desktop so the labels still box identically */
    display: block;
    border-left: 0;
    border-right: 0;
    border-top: 2px solid var(--line);
    border-bottom: 2px solid var(--line);
  }
  .led-desc { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .led-count { margin-left: 0; width: 100%; }
}