/* ==========================================================================
   stats.css — the camp statistics grid (stats.php)

   Loaded on every page like the rest of the app CSS, not only with the modern
   layer, because stats.php emits this markup either way. Every token carries a
   literal fallback so the tiles still look right if the modern layer's kill
   flag is set and :root never defines them.
   ========================================================================== */

.cs-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.cs-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 13px;
  border-radius: 16px;
  background: var(--cs-surface-2, #f6f6f8);
  box-shadow: 0 0 0 1px var(--cs-line, rgba(15, 15, 25, 0.07)) inset;
  transition: box-shadow 0.25s var(--cs-ease, ease), background-color 0.25s var(--cs-ease, ease);
}
/* A stat you have actually logged lifts out of the grid */
.cs-stat.is-logged {
  background: var(--cs-surface, #fff);
  box-shadow: 0 1px 2px rgba(16, 16, 30, 0.04), 0 8px 20px -10px rgba(16, 16, 30, 0.14),
    0 0 0 1px var(--cs-line, rgba(15, 15, 25, 0.07));
}

.cs-stat-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--cs-ink-2, #3a3a44);
  /* Long names ("Sparring rounds rolled") get two lines; the pill below stays
     on the same baseline across the row because the tile is a flex column with
     the control pushed to the bottom. */
  margin-bottom: auto;
}

.cs-stat-tag {
  align-self: flex-start;
  margin-top: -4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cs-muted, #6b6b76);
  background: rgba(15, 15, 25, 0.06);
}

/* ---------- The [− value +] pill ---------- */

.cs-stat-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--cs-surface, #fff);
  box-shadow: 0 0 0 1px var(--cs-line-strong, rgba(15, 15, 25, 0.12));
}
.cs-stat.is-logged .cs-stat-control { background: var(--cs-surface-2, #f6f6f8); box-shadow: none; }

.cs-stat-control .stat-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: center;
  font: inherit;
  font-size: 21px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--cs-faint, #9a9aa5);
  cursor: default;
  -webkit-appearance: none;
  appearance: none;
}
.cs-stat.is-logged .stat-input { color: var(--cs-ink, #0b0b10); }
.cs-stat-control .stat-input:focus { outline: none; }

.cs-stat-control .btn-minus,
.cs-stat-control .btn-plus {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
}
.cs-stat-control .btn-minus {
  background: transparent;
  color: var(--cs-faint, #9a9aa5);
}
.cs-stat-control .btn-minus:hover { background: rgba(15, 15, 25, 0.06); color: var(--cs-ink-2, #3a3a44); }
.cs-stat-control .btn-plus {
  background: var(--cs-ink, #0b0b10);
  color: #fff;
}
.cs-stat-control .btn-plus:hover { filter: brightness(1.25); }
.cs-stat-control .btn-minus:active,
.cs-stat-control .btn-plus:active { transform: scale(0.88); }
.cs-stat-control .btn-minus:focus-visible,
.cs-stat-control .btn-plus:focus-visible {
  outline: none;
  box-shadow: var(--cs-ring, 0 0 0 4px rgba(47, 111, 237, 0.16));
}

/* ---------- Personal-stat settings ---------- */

.cs-stat-settings {
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--cs-muted, #6b6b76);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--cs-line-strong, rgba(15, 15, 25, 0.12));
}
.cs-stat-settings:hover { color: var(--cs-ink, #0b0b10); }
.cs-stat-panel { font-size: 13px; }
.cs-stat-panel table { margin-bottom: 6px !important; }
.cs-stat-delete {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #e11d48;
  text-decoration: none;
}
.cs-stat-delete:hover { text-decoration: underline; }

/* ---------- Dark theme ---------- */

body.theme-dark .cs-stat {
  background: #23262c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}
body.theme-dark .cs-stat.is-logged {
  background: #1c1f24;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.09);
}
body.theme-dark .cs-stat-name { color: #d5d7dd; }
body.theme-dark .cs-stat-control { background: #1c1f24; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
body.theme-dark .cs-stat.is-logged .cs-stat-control { background: #2b2f36; box-shadow: none; }
body.theme-dark .cs-stat.is-logged .stat-input { color: #f4f5f7; }
body.theme-dark .cs-stat-control .btn-plus { background: #f4f5f7; color: #0b0b10; }
body.theme-dark .cs-stat-control .btn-plus:hover { filter: brightness(0.9); }
body.theme-dark .cs-stat-control .btn-minus:hover { background: rgba(255, 255, 255, 0.08); color: #f4f5f7; }
body.theme-dark .cs-stat-tag { background: rgba(255, 255, 255, 0.09); color: #9ba0aa; }

@media (prefers-reduced-motion: reduce) {
  .cs-stat,
  .cs-stat-control .btn-minus,
  .cs-stat-control .btn-plus { transition: none; }
  .cs-stat-control .btn-minus:active,
  .cs-stat-control .btn-plus:active { transform: none; }
}