/* =========================================================================
   lifestats.css — YOUR LIFETIME RECORD on the live page (js/lifestats.js).

   Owner-neutral: not one colour is decided here. Every surface, edge and ink
   maps onto the host site's own tokens, so each island's record reads in its
   own look. Fallback chains reach tokens every theme.css on the fleet
   publishes (`--fg`, `--fg-dim`, `--fg-mute`, `--surface`, `--border`,
   `--primary`, `--r`), so an older assembled theme still dresses it.

   THE ONE MEANING COLOUR is `--primary`: the fill of every survival bar and
   the record mark. It is the host's own "live / committed" colour, which is
   what a life still running IS. Kills and deaths are numbers in the page's
   ink - a red kill count beside a green survival bar would be exactly the
   two-colour collision the Frontier Prime theme's own header forbids.

   NO LAYOUT DEPENDENCY. The section sizes from its container: a grid that
   collapses under 720px, a table that scrolls inside its own box, nothing
   that sets a page width.
   ========================================================================= */

.lfs-card {
  --lfs-line:  var(--tm-hair, var(--border));
  --lfs-line2: var(--tm-hair-soft, var(--border-2, var(--border)));
  --lfs-ink:   var(--fg);
  --lfs-text:  var(--fg-dim);
  --lfs-mute:  var(--fg-mute);
  --lfs-track: var(--surface-sink, var(--bg-deep, var(--bg)));
  --lfs-fill:  var(--primary);
  --lfs-nest:  var(--surface-2, var(--surface));
  padding: 24px 26px 20px;
  min-width: 0;
}

/* ---- section labels: the same engraved caps the live card uses ---------- */
.lfs-k {
  margin: 0 0 6px;
  font: 700 10px/1 var(--font-ui);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lfs-mute);
}
.lfs-n {
  margin: 4px 0 0;
  font: 500 12px/1.45 var(--font-ui);
  color: var(--lfs-mute);
}
.lfs-sub {
  margin: 6px 0 0;
  font: 500 13.5px/1.5 var(--font-ui);
  color: var(--lfs-text);
}
.lfs-sub b { color: var(--lfs-ink); font-weight: 600; }

/* ---- the hero: the record, and the run being lived against it ---------- */
.lfs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 22px 36px;
  align-items: end;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--lfs-line);
}
.lfs-hero-main { min-width: 0; }
.lfs-hero-side {
  min-width: 0;
  padding: 16px 18px 14px;
  background: var(--lfs-nest);
  border: 1px solid var(--lfs-line2);
  border-radius: var(--r);
}
.lfs-big {
  margin: 0;
  font: 500 clamp(40px, 6vw, 62px)/1 var(--font-display);
  letter-spacing: -.01em;
  color: var(--lfs-ink);
  font-variant-numeric: tabular-nums;
}
.lfs-mid {
  margin: 0 0 10px;
  font: 500 clamp(24px, 3.4vw, 32px)/1 var(--font-display);
  color: var(--lfs-ink);
  font-variant-numeric: tabular-nums;
}
.lfs-dash { color: var(--lfs-mute); }

/* ---- bars ---------------------------------------------------------------- */
.lfs-track {
  display: block;
  height: 8px;
  border-radius: var(--r-xs);
  background: var(--lfs-track);
  overflow: hidden;
}
.lfs-track-s { height: 5px; margin-top: 5px; }
.lfs-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-xs);
  background: var(--lfs-fill);
  transition: width .7s cubic-bezier(.22,.61,.36,1);
}
.lfs-fill-record { box-shadow: 0 0 10px var(--ok-halo, transparent); }

/* ---- the counters --------------------------------------------------------- */
.lfs-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--lfs-line);
}
.lfs-tile { min-width: 0; }
.lfs-v {
  margin: 0;
  font: 500 26px/1.1 var(--font-display);
  color: var(--lfs-ink);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lfs-tile-kd .lfs-v { color: var(--lfs-fill); }

/* ---- the species table ----------------------------------------------------- */
.lfs-sec { padding: 22px 0 6px; }
.lfs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lfs-table {
  width: 100%;
  border-collapse: collapse;
  font: 500 13.5px/1.4 var(--font-ui);
  color: var(--lfs-text);
  min-width: 560px;
}
.lfs-table th, .lfs-table td {
  padding: 10px 12px 10px 0;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--lfs-line2);
  white-space: nowrap;
}
.lfs-table thead th {
  font: 700 10px/1 var(--font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lfs-mute);
  padding-bottom: 8px;
}
.lfs-table tbody tr:last-child th, .lfs-table tbody tr:last-child td { border-bottom: 0; }
.lfs-table tbody th { font-weight: 600; color: var(--lfs-ink); }
.lfs-table .lfs-num { text-align: right; font-variant-numeric: tabular-nums; }
.lfs-table .lfs-bar-col { width: 34%; min-width: 180px; }
.lfs-bar-v { display: block; font-variant-numeric: tabular-nums; color: var(--lfs-ink); }
.lfs-sp { display: block; }
.lfs-when { display: block; font: 500 11px/1.3 var(--font-ui); color: var(--lfs-mute); }
.lfs-top th .lfs-sp::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  vertical-align: 2px;
  background: var(--lfs-fill);
}

/* ---- fell to / prey / wildlife --------------------------------------------- */
.lfs-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 28px;
  padding: 18px 0 4px;
  border-top: 1px solid var(--lfs-line);
}
.lfs-list ul { list-style: none; margin: 0; padding: 0; }
.lfs-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--lfs-line2);
  font: 500 13.5px/1.4 var(--font-ui);
  color: var(--lfs-ink);
}
.lfs-list li:last-child { border-bottom: 0; }
.lfs-cnt { color: var(--lfs-text); font-variant-numeric: tabular-nums; }
.lfs-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid var(--lfs-line2);
  border-radius: var(--r-xs);
  font: 700 9px/1 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lfs-mute);
  vertical-align: 1px;
}

/* ---- the footnote and the empty card ------------------------------------- */
.lfs-foot {
  margin: 18px 0 0;
  font: 500 12px/1.55 var(--font-ui);
  color: var(--lfs-mute);
}
.lfs-empty { text-align: left; }
.lfs-empty .lfs-big { font-size: 40px; }

/* ---- narrow --------------------------------------------------------------- */
@media (max-width: 720px) {
  .lfs-card { padding: 20px 18px 16px; }
  .lfs-hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .lfs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lfs-fill { transition: none; }
}