/* Achievements: the progress bar and star, the categories that open and close, the header logo and the pop-up. (The modal itself is a
   screen, see screens.css.) */

/* ---- the progress bar and the star at its end ---- */
.achievement-progress { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.achievement-bar { position: relative; flex: 1; height: 16px; border-radius: 8px; background: var(--track, var(--line-color)); overflow: hidden; }
.achievement-bar::after { content: ""; position: absolute; inset: 0; background: var(--marks, none); pointer-events: none; }
.achievement-fill {
  height: 100%; width: 100%; border-radius: 8px; background: var(--mercury, var(--bonus-color));
  clip-path: inset(0 calc((1 - var(--share, 0)) * 100%) 0 0 round 2px); transition: clip-path 0.6s ease;   /* the fill's leading edge is only just rounded; the track's ends stay pill-shaped */
}
.achievement-star { flex: none; width: 34px; height: 34px; color: var(--bonus-color); margin: -6px 0; }
.achievement-star[hidden] { display: none; }
img.achievement-star { object-fit: contain; filter: none; }   /* the status's own art: no tint or glow of the flat star's */
.achievement-star[data-status="wood"] { color: #9a6a3c; }
.achievement-star[data-status="iron"] { color: #6e7783; }
.achievement-star[data-status="bronze"] { color: #cd7f32; }
.achievement-star[data-status="silver"] { color: #a9b3c1; }
.achievement-star[data-status="diamond"] { color: #a6e6f5; filter: drop-shadow(0 0 5px #5fcde6); }
img.achievement-star[data-status] { filter: none; }
.achievement-count { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--text-color); }
/* the two numbers stand out, bigger and lowered a touch, like the highlighted words in the other messages; the "of" is smaller */
.achievement-count .number { font-size: 20px; vertical-align: -0.1em; }
.achievement-count .of { margin: 0 7px; }
.achievement-summary { margin: 6px 0 0; text-align: center; font-size: 15px; color: var(--text-color); }
.achievement-summary .number { font-size: 20px; vertical-align: -0.1em; }
.achievement-next { margin: 4px 0 8px; text-align: center; font-size: 13px; letter-spacing: 0.3px; color: var(--muted-text-color); }
.achievement-next .name { color: var(--text-color); }   /* the status's name: just a darker gray than the rest of the line */

/* ---- the categories open and close like an accordion ---- */
.category { margin-top: 8px; }
.category:first-child { margin-top: 0; }
.category-header {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; border: 0; border-radius: 10px;
  background: var(--text-color); color: #fff; font-size: 22px; text-align: left; cursor: pointer;
  -webkit-user-select: none; user-select: none;   /* a tap or a double-tap on a category bar opens or closes it; it never selects its words */
}
.category-header svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.category.open .category-header svg { transform: rotate(90deg); }
.category-header:focus-visible { outline: 2px solid var(--text-color); outline-offset: 2px; }
.category-name { flex: 1; }
.category-count { font-size: 18px; color: #b9b9c0; }
.category-count.complete { color: var(--bonus-color); }
/* a category opens and closes by animating its body's row height between 0 and its natural height (while shut it's also hidden from
   the page and from screen readers) */
.category-body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.28s ease, visibility 0s 0.28s; }
.category.open .category-body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.28s ease, visibility 0s; }
.category-body-inner { overflow: hidden; min-height: 0; }
.category-body .achievement-row:last-child { border-bottom: 0; }

/* ---- an achievement: its text, and a check with the date once earned ---- */
.achievement-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 2px solid var(--line-color); }
.achievement-text {
  font-size: 19px; line-height: 1.2; color: var(--text-color); text-transform: none; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.achievement-text .symbol { width: 1.05em; height: 1.05em; vertical-align: -0.16em; }
.achievement-row:not(.earned) .achievement-text { color: var(--muted-text-color); }
.achievement-mark { flex: none; display: flex; align-items: center; gap: 7px; }
.achievement-check { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line-color); display: grid; place-items: center; }
.achievement-check svg { width: 15px; height: 15px; fill: none; stroke: var(--text-color); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.achievement-date { order: -1; font-size: 11px; letter-spacing: 0.3px; color: var(--muted-text-color); text-align: right; white-space: nowrap; }
.achievement-row.earned .achievement-check { border-color: var(--bonus-color); background: var(--bonus-color); }
.achievement-row.earned .achievement-check svg { visibility: visible; }

/* ---- the header logo, from the first status up: art for the status, as a button that opens Achievements (until the art exists, the
   plain logo glows in the status's color) ---- */
.logo[data-status="wood"] { --status-color: #9a6a3c; } .logo[data-status="iron"] { --status-color: #8d97a5; } .logo[data-status="bronze"] { --status-color: #cd7f32; }
.logo[data-status="silver"] { --status-color: #c4ccd8; } .logo[data-status="gold"] { --status-color: #e8b93c; } .logo[data-status="diamond"] { --status-color: #a6e6f5; }
.logo-button { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 8px; margin-left: 4px; margin-top: 2px; }
.logo-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.logo-image { display: block; height: 35px; width: auto; }
.logo > .logo-image, .logo-fallback { margin-left: 4px; margin-top: 2px; }   /* the plain logo sits where the status art does, so nothing shifts when a status is reached */
.logo-fallback .logo-image { filter: drop-shadow(0 0 3px var(--status-color)) drop-shadow(0 0 1px var(--status-color)); }

/* ---- the pop-up that says what was just earned: bottom of the screen, over everything (it's a popover, so over a modal too) ---- */
.toast { display: none; }
.toast.shown { display: block; }
.toast:popover-open { display: block; }
.toast {
  position: fixed; inset: auto auto 20px 50%; margin: 0; transform: translateX(-50%); width: min(92vw, 380px); box-sizing: border-box; padding: 14px 18px 16px;
  border: 2px solid var(--bonus-color); border-radius: 14px; background: #1d1d1f; color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  z-index: 100000; cursor: pointer; animation: toast-in 0.45s cubic-bezier(0.3, 0.9, 0.3, 1.2);
}
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(24px); } }
.toast, .toast * { font-family: var(--display-font); font-feature-settings: "case"; font-weight: 800; text-transform: uppercase; line-height: 1.15; }
.toast-label { font-size: 13px; letter-spacing: 1px; color: var(--bonus-color); margin-bottom: 8px; }
.toast-achievement + .toast-achievement { margin-top: 10px; }
.toast-more { margin-top: 10px; font-size: 13px; letter-spacing: 0.5px; color: #b9b9c0; }
.toast-line { font-size: 20px; }
.toast-line .symbol { width: 1em; height: 1em; margin-right: 0; vertical-align: -0.14em; color: inherit; }   /* a symbol inside the sentence, not the gold star in front */
.toast-line svg.toast-star { width: 20px; height: 20px; color: var(--bonus-color); vertical-align: -3px; margin-right: 6px; }
.toast-status { margin-top: 12px; padding-top: 10px; border-top: 1px solid #3a3a40; }
.toast-status .toast-line { font-size: 16px; color: var(--bonus-color); }

@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .achievement-fill, .category-body, .category.open .category-body { transition: none; } }