/* ============================================================
   sim-stats.css — "Simulator stats" card on #account
   Markup: js/account/views/sim-stats-card.js
   Uses the account view's tokens (css/account/account.css).
   ============================================================ */

.acct-sim__body { display: grid; gap: 20px; }
.acct-sim-tool { display: grid; gap: 18px; }
.acct-sim-tool + .acct-sim-tool { padding-block-start: 20px; border-block-start: 1px solid var(--acct-line); }
.acct-sim-tool__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.acct-sim-tool__name { margin: 0; font-family: var(--acct-display); font-size: 1.08rem; font-weight: 600; color: var(--acct-ink); }
.acct-sim-tool__head .acct-hint { margin: 0; }

.acct-sim-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
}
.acct-sim-stat { display: grid; gap: 2px; align-content: start; min-width: 0; }
.acct-sim-stat__value {
  font-family: var(--acct-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--acct-teal-deep);
  font-variant-numeric: tabular-nums;
}
.acct-sim-stat__label { font-size: .8rem; font-weight: 600; color: var(--acct-ink-soft); }
.acct-sim-stat__sub { font-size: .76rem; color: var(--acct-ink-faint); }

.acct-sim-spark { margin: 0; display: grid; gap: 6px; }
.acct-sim-spark figcaption,
.acct-sim-h4 {
  margin: 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acct-ink-faint);
}
html[dir="rtl"] .acct-sim-spark figcaption,
html[dir="rtl"] .acct-sim-h4 { letter-spacing: 0; }
.acct-sim-spark svg { display: block; width: 100%; height: 44px; }
.acct-sim-spark__bar { fill: var(--acct-teal); }
.acct-sim-spark__bar.is-empty { fill: var(--acct-line-strong); }
/* Newest day is at the physical right in both languages (a time axis is not mirrored). */

.acct-sim-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .acct-sim-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
.acct-sim-block { display: grid; gap: 10px; align-content: start; }

.acct-sim-skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.acct-sim-skill {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "name pips level" "sub sub sub";
  align-items: center;
  gap: 2px 10px;
}
.acct-sim-skill__name { grid-area: name; font-weight: 600; font-size: .9rem; color: var(--acct-ink); }
.acct-sim-skill__pips { grid-area: pips; display: inline-grid; grid-template-columns: repeat(5, 18px); gap: 3px; }
.acct-sim-skill__pips i { display: block; height: 6px; border-radius: 3px; background: var(--acct-line); }
.acct-sim-skill__pips i.is-on { background: var(--acct-teal); }
.acct-sim-skill__level { grid-area: level; font-family: var(--acct-mono); font-size: .78rem; color: var(--acct-ink-soft); min-width: 2.2em; text-align: end; }
html[dir="rtl"] .acct-sim-skill__level { font-family: inherit; }
.acct-sim-skill__sub { grid-area: sub; font-size: .76rem; color: var(--acct-ink-faint); }

.acct-sim-diff { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.acct-sim-diff li { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; padding-block: 4px; border-block-end: 1px dashed var(--acct-line); }
.acct-sim-diff__d { color: var(--acct-ink); font-weight: 600; }
.acct-sim-diff__v { color: var(--acct-ink-soft); }

.acct-sim-empty { display: grid; gap: 12px; justify-items: start; }
.acct-sim-empty p { margin: 0; color: var(--acct-ink-soft); line-height: 1.6; max-width: 60ch; }

@media (max-width: 640px) {
  .acct-sim-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-sim-stat__value { font-size: 1.35rem; }
}

/* ── Onboarding + "How XP works" ─────────────────────────── */
.acct-sim-onboard { display: grid; gap: 10px; justify-items: start; }
.acct-sim-onboard__title { margin: 0; font-weight: 700; color: var(--acct-ink); font-size: 1rem; }
.acct-sim-onboard .acct-hint { margin: 0; }
.acct-sim-onboard__steps {
  margin: 0; padding-inline-start: 1.3em; display: grid; gap: 6px;
  color: var(--acct-ink-soft); line-height: 1.55; font-size: .9rem; max-width: 62ch;
}
.acct-sim-onboard__steps li::marker { color: var(--acct-teal); font-weight: 700; }
.acct-sim-actions { display: flex; justify-content: flex-start; margin-top: 14px; }
.acct-sim-start { text-decoration: none; }
.acct-sim-how {
  margin-top: 14px; border: 1px solid var(--acct-line); border-radius: 12px;
  background: var(--acct-tint); font-size: .86rem;
}
.acct-sim-how > summary {
  padding: 10px 14px; cursor: pointer; font-weight: 600; color: var(--acct-teal-deep);
}
.acct-sim-how > summary:focus-visible { outline: 2px solid var(--acct-teal); outline-offset: -2px; border-radius: 12px; }
.acct-sim-how ul {
  margin: 0; padding: 0 14px 12px; padding-inline-start: 2em; display: grid; gap: 6px;
  color: var(--acct-ink-soft); line-height: 1.55;
}