/* ACHIEVEMENTS (HANDOFF-174 §3.20) — owned by FE-D2 in social round 2.
   Three surfaces, all inside the profile sheet's own skin (profile.css): the
   strip on the plate, the `achievements` view (a data-view like friends'
   VIEW ALL), and nothing for the toast — that is NOTIFY.toast's / WALLET's
   own element. Loaded after profile.css (index.html:36, :42), so an equal
   selector here wins. No colour here that the sheet does not already use. */

/* ---- the strip on the plate --------------------------------------------- */
/* after the four counts (profile.js:198-203); the same 12px rhythm the
   Member-of row and the biggest pull keep (profile.css:198, :91) */
.pf-ach{margin:12px 0 0;min-width:0}
.pf-ach[hidden]{display:none}
.ach-strip__h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 7px;min-height:24px}
/* the kicker in the counts' own label grammar (.pf-stat>span, profile.css:89) */
.ach-strip__k{font:800 11px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#3A4354;white-space:nowrap}
.ach-strip__k b{color:var(--acc);font-weight:900}
/* the small VIEW ALL sticker (the clan plate's small button, clan.css:150) */
.ach-strip .pf-all{margin:0;padding:4px 9px;font-size:12px;border-radius:8px;box-shadow:0 2px 0 var(--key)}
.ach-strip .pf-all:active{transform:translateY(1px);box-shadow:0 1px 0 var(--key)}
/* up to 8 badges at ~40px: as many 36px-or-wider cells as the plate holds
   (8 at 1147x655, measured), the badges hardest-first from the left */
.ach-strip__g{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:4px}
.ach-strip__none{margin:0;font:600 13px/1.4 var(--ui);color:#3A4354}

/* ---- a badge, anywhere ---------------------------------------------------- */
.ach-b{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;margin:0;border:0;background:none;min-width:0;color:inherit;font:inherit}
button.ach-b{cursor:pointer;border-radius:50%}
button.ach-b:hover{transform:translateY(-1px)}
button.ach-b:active{transform:translateY(1px)}
button.ach-b:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ach-b img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(11,15,24,.35))}
.ach-b img[hidden]{display:none}
/* NO ART YET: a plain ring — the pink plate with a white inner ring and the
   key outline; grey when locked. No text, no glyph (CLAUDE.md). The PNG
   replaces it on its own once the file exists (achievements.js RETRY_ART). */
.ach-b.is-noart::before{content:'';position:absolute;inset:6%;border-radius:50%;border:3px solid var(--key);background:radial-gradient(circle at 50% 36%,var(--acc-hi),var(--acc-lo) 80%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.85),0 2px 0 var(--key)}
.ach-b.is-locked.is-noart::before{background:radial-gradient(circle at 50% 36%,#DCE1EA,#8E96A6 80%);border-color:#5A6478;box-shadow:inset 0 0 0 3px rgba(255,255,255,.75),0 2px 0 #5A6478}

/* ---- the view: every achievement, hardest first ---------------------------- */
.pf-view--ach{min-width:0}
/* the family pills: the clan page's tab stickers (clan.css:158-163), scoped here */
.ach-pills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding:2px 3px 4px}
.ach-pill{flex:0 0 auto;padding:8px 13px;border-radius:12px;font:900 15px var(--display);font-style:italic;letter-spacing:.03em;text-transform:uppercase;color:var(--key);background:rgba(255,255,255,.92);border:2px solid var(--key);box-shadow:0 3px 0 var(--key);transform:var(--slant);cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1;white-space:nowrap}
.ach-pill i{font:800 11px var(--ui);font-style:normal;padding:2px 6px;border-radius:999px;background:#EEF3FA;color:#3A4354;transform:var(--slant);letter-spacing:0}
.ach-pill:hover{background:var(--yellow,#FDC107)}
.ach-pill.is-on{color:#fff;background:linear-gradient(180deg,var(--acc-hi) 0%,var(--acc) 48%,var(--acc-lo) 100%);box-shadow:0 0 0 2px #fff,0 3px 0 2px var(--key)}
.ach-pill.is-on i{background:rgba(255,255,255,.9);color:var(--key)}
.ach-pill:active{transform:var(--slant) translateY(2px);box-shadow:0 1px 0 var(--key)}
.ach-lead{margin:0 0 12px;font:600 13px/1.4 var(--ui);color:#3A4354}
/* the cards: the profile's white tile (.pf-card, profile.css:115), badge left */
.ach-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px}
.ach-card{display:grid;grid-template-columns:60px minmax(0,1fr);gap:10px;align-items:center;background:rgba(255,255,255,.92);border:2px solid var(--key);border-radius:12px;box-shadow:0 3px 0 var(--key);padding:9px 10px 10px;min-width:0;transition:background .25s}
.ach-card .ach-b{width:60px}
.ach-card.is-locked{background:rgba(255,255,255,.66)}
.ach-card__t{display:block;min-width:0}
.ach-card__n{display:block;font:900 17px/1.05 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.02em;color:var(--key);overflow-wrap:anywhere}
.ach-card.is-locked .ach-card__n{color:#3A4354}
/* the second line: the date on an earned one (in the value's pink,
   .pf-card__v), the "how" on a locked one */
.ach-card__l{display:block;margin-top:3px;font:700 12px/1.3 var(--ui);color:var(--key)}
.ach-card.is-earned .ach-card__l{color:var(--acc-lo)}
.ach-card__r{display:block;margin-top:2px;font:600 12px/1.3 var(--ui);color:#3A4354}
/* the one the bell or a badge tap asked for: a yellow flash, then it settles */
.ach-card.is-hi{background:var(--yellow,#FFFE9A)}

/* ---- the phone ------------------------------------------------------------- */
@media (max-width:1023px){
  /* nothing under 12px (BRIEF-CONTEXT-R2 §0.9); the plate labels sit at 12 (profile.css:276) */
  .ach-strip__k{font-size:12px}
  .ach-strip .pf-all{font-size:13px;padding:5px 10px}
  .ach-strip__none{font-size:15px;line-height:1.45}
  /* one row of six at 390 wide, the rest wrap under */
  .ach-strip__g{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  /* the sheet's BACK sticker (pf-nav) sits where the title starts, as for the
     friends and picture views (profile.css:336-340); the last card clears the
     home indicator */
  .pf-view--ach{padding-top:50px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .pf-view--ach .pf-back{display:none}
  /* the pills run past the edge and scroll, never wrap */
  .ach-pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -14px 10px;padding:3px 14px 8px}
  .ach-pills::-webkit-scrollbar{height:0}
  .ach-pill{font-size:15px;padding:9px 13px}
  .ach-pill i{font-size:12px}
  .ach-lead{font-size:14px}
  .ach-list{grid-template-columns:1fr;gap:8px}
  .ach-card{grid-template-columns:64px minmax(0,1fr)}
  .ach-card .ach-b{width:64px}
  .ach-card__n{font-size:18px}
  .ach-card__l,.ach-card__r{font-size:14px}
}