/* FormerCars - achievements. Loaded only on account/achievements.php and
   wherever the dashboard strip appears. Tokens come from fc.css. */

.fc-ach-summary{display:grid;grid-template-columns:auto 1fr;gap:1.5rem 2rem;align-items:center;
  padding:1.5rem 1.75rem;background:var(--fc-card);border:1px solid var(--fc-rule-card);border-radius:var(--fc-r-lg)}
.fc-ach-summary__num{font-size:clamp(34px,6vw,54px);line-height:1;font-weight:700;color:var(--fc-ink)}
.fc-ach-summary__num span{font-size:.45em;font-weight:500;color:var(--fc-ink-soft)}
.fc-ach-summary__bar{height:10px;border-radius:99px;background:var(--fc-sunken);overflow:hidden;margin-top:.7rem}
.fc-ach-summary__fill{height:100%;border-radius:99px;background:var(--fc-accent);transition:width .6s ease}
.fc-ach-tiers{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:.9rem;font-family:var(--fc-font-mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--fc-ink-soft)}
.fc-ach-tiers b{color:var(--fc-ink)}
@media (max-width:620px){.fc-ach-summary{grid-template-columns:1fr}}

/* filter chips */
.fc-ach-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 .5rem}
.fc-ach-filter{padding:.42rem .9rem;border:1px solid var(--fc-rule-btn);border-radius:var(--fc-r-pill);
  background:var(--fc-card);color:var(--fc-ink-soft);font-size:14px;cursor:pointer}
.fc-ach-filter:hover{background:var(--fc-row-hover)}
.fc-ach-filter.is-on{background:var(--fc-ink);border-color:var(--fc-ink);color:var(--fc-paper)}

/* groups + grid */
.fc-ach-group{margin-top:2.5rem}
.fc-ach-group__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:.45rem;border-bottom:2px solid var(--fc-ink)}
.fc-ach-group__head h2{margin:0;font-size:19px}
.fc-ach-group__count{font-family:var(--fc-font-mono);font-size:12px;color:var(--fc-ink-soft)}
.fc-ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:1px;margin-top:1px;
  background:var(--fc-rule-card);border:1px solid var(--fc-rule-card)}
.fc-ach{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;
  padding:1.15rem .85rem 1rem;background:var(--fc-card)}
.fc-ach--locked{background:var(--fc-band)}
.fc-ach__name{font-weight:600;font-size:15px;color:var(--fc-ink);line-height:1.3}
.fc-ach--locked .fc-ach__name{color:var(--fc-ink-soft)}
.fc-ach__desc{font-size:13px;line-height:1.45;color:var(--fc-ink-soft)}
.fc-ach__meta{display:inline-flex;align-items:center;gap:.35rem;margin-top:auto;padding-top:.5rem;
  font-family:var(--fc-font-mono);font-size:11px;letter-spacing:.04em;color:var(--fc-ink-meta)}
/* Sized in em so the icon tracks the date's font size if that ever changes. */
.fc-ach__meta svg{width:1.05em;height:1.05em;flex:0 0 auto;opacity:.75}
/* Rarity sits under the date, separated by a hairline. The rule is drawn
   on the rarity line rather than the date so it spans the same width as
   the text beneath it, and inherits the card's padding either side. */
.fc-ach__rarity{display:block;width:100%;margin-top:.45rem;padding-top:.45rem;
  border-top:1px solid var(--fc-rule-card);
  font-family:var(--fc-font-mono);font-size:9.5px;letter-spacing:.03em;color:#CB5A00}
.fc-ach__new{position:absolute;top:.6rem;right:.6rem;padding:.12rem .45rem;border-radius:var(--fc-r-pill);
  background:var(--fc-accent);color:#fff;font-family:var(--fc-font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase}

/* progress on a locked badge */
.fc-ach__prog{width:100%;max-width:124px}
.fc-ach__progbar{height:5px;border-radius:99px;background:var(--fc-sunken);overflow:hidden}
.fc-ach__progfill{height:100%;background:var(--fc-ink-faint)}
.fc-ach__progtext{display:block;margin-top:.3rem;font-family:var(--fc-font-mono);font-size:11px;color:var(--fc-ink-meta)}

/* the coin */
/* the badge artwork */
.fc-coin{position:relative;display:inline-block;flex:0 0 auto;line-height:0}
.fc-coin img{display:block;width:100%;height:100%}
/* Locked: the shape still reads, the colour is visibly withheld. */
.fc-coin.is-locked img{filter:grayscale(1) contrast(.85) opacity(.45)}
/* The hardest seven carry a star. */
.fc-coin.is-top::after{content:"";position:absolute;right:-2px;bottom:-2px;width:42%;height:42%;
  background:var(--fc-accent);border:2px solid var(--fc-card);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l2.6 5.6 6 .9-4.3 4.2 1 6-5.3-2.8-5.3 2.8 1-6L3.4 9.5l6-.9z'/></svg>") center/62% no-repeat,
          linear-gradient(#000,#000);
  -webkit-mask-composite:source-over;mask:none}
.fc-ach:hover .fc-coin{transform:translateY(-2px);transition:transform .18s ease}

/* next up */
.fc-ach-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1rem}
.fc-ach-nextcard{display:flex;gap:.9rem;align-items:center;padding:1rem;background:var(--fc-card);
  border:1px solid var(--fc-rule-card);border-radius:var(--fc-r)}
.fc-ach-nextcard__body{min-width:0}
.fc-ach-nextcard strong{display:block;font-size:14.5px}
.fc-ach-nextcard span{font-size:12.5px;color:var(--fc-ink-soft)}

/* dashboard strip */
.fc-ach-strip{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem 1.25rem;
  background:var(--fc-card);border:1px solid var(--fc-rule-card);border-radius:var(--fc-r);margin:1.25rem 0}
.fc-ach-strip__coins{display:flex;gap:.5rem}
.fc-ach-strip__copy{min-width:0}
.fc-ach-strip__copy strong{display:block;font-size:15px}
.fc-ach-strip__copy span{font-size:13px;color:var(--fc-ink-soft)}
.fc-ach-strip__cta{margin-left:auto}
@media (max-width:560px){.fc-ach-strip__cta{margin-left:0;width:100%}}

/* recall dashboard strip — reuses .fc-ach-strip as the container (pass an
   inline border-color to redden it), just swaps the coins for a count badge */
.fc-recall-strip__badge{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--fc-danger-surface);color:var(--fc-danger);
  font-family:var(--fc-font-mono);font-weight:700;font-size:15px;
}

/* inline "New" pill for a recall row — same look as .fc-ach__new but static,
   not absolutely positioned, since a recall-card title isn't a coin badge */
.fc-recall__new{
  display:inline-block;margin-left:.4rem;padding:.12rem .45rem;border-radius:var(--fc-r-pill);
  background:var(--fc-danger);color:#fff;font-family:var(--fc-font-mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;
}