/* ============================================================
   Wunderlust — gamification surfaces
   The progress pill in the filter bar, the "Done" toggle and the
   been-here card treatment, and the milestones popover. Kept in its
   own file so cards.css and controls.css stay under 200 lines, and
   so the whole feature is one file to reason about.
   ============================================================ */

/* --- Progress pill (the meter) ----------------------------- */
/* Sits at the trailing edge of the filter row; the whole thing is
   the button, opening the milestones popover. The track only reads
   as "filling in" once something is logged. */
.progress-host { position: relative; flex: none; margin-left: auto; }
.progress-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-2); font: 600 var(--fs-sm) var(--font-ui); cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.progress-pill:hover { color: var(--text); border-color: var(--text-3); }
.progress-pill .ms { font-size: 19px; color: var(--text-3); }
.progress-pill.is-lit .ms { color: var(--meadow-deep); }
.progress-txt b { color: var(--text); font-variant-numeric: tabular-nums; }
.progress-track {
  width: 46px; height: 6px; border-radius: var(--r-pill);
  background: var(--surface); overflow: hidden;
}
.progress-bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--meadow), var(--meadow-deep));
  border-radius: var(--r-pill); transition: width .4s var(--ease);
}
/* On a phone the words drop; the icon + track still tell the story. */
@media (max-width: 560px) { .progress-txt { display: none; } }

/* --- The Done toggle + been-here card treatment ------------ */
/* One of three matching foot actions (Website, Directions, Done). At
   rest it reads as an outlined check — clearly "not yet"; pressed it
   fills meadow-green, the "settled, complete" language the Free tint
   uses, never the coral accent that means "active filter". */
.card-done { color: var(--text-3); }
.card-done .ms { opacity: .5; }
.card-done:hover {
  color: var(--meadow-deep);
  border-color: color-mix(in srgb, var(--meadow-deep) 34%, var(--line));
}
.card-done:hover .ms { opacity: 1; }
.card-done[aria-pressed="true"] {
  background: color-mix(in srgb, var(--meadow) 20%, transparent);
  border-color: color-mix(in srgb, var(--meadow-deep) 26%, transparent);
  color: var(--meadow-deep);
}
.card-done[aria-pressed="true"] .ms { opacity: 1; font-variation-settings: "FILL" 1; }
:root[data-mode="dark"] .card-done[aria-pressed="true"] { color: #A6DCAF; }

/* A logged card recedes a touch — present, but visibly "handled" so
   the eye goes to what is still unexplored, marked by a corner check. */
.card[data-visited="true"] { opacity: .82; }
.card[data-visited="true"]::before {
  content: "check"; font-family: "Material Symbols Rounded";
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  font-variation-settings: "FILL" 1;
  position: absolute; top: 12px; left: 12px; z-index: 1;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--meadow-deep); color: #fff;
  font-size: 14px; display: grid; place-items: center;
}
.card[data-visited="true"] .card-glyph { margin-left: 24px; }

/* --- Milestones popover ------------------------------------ */
/* Same anchored-popover pattern as Settings and About, opening from
   the progress pill. Holds the meter read-out, the badge ladder,
   any cleared categories, a dormant Plus seam, and the one button
   that flips the grid into the completed-places lens. */
.progress-host .ms-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  width: min(360px, calc(100vw - 32px));
  max-height: min(74vh, 580px); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--gap-3); padding: var(--gap-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.ms-pop[hidden] { display: none; }
.ms-pop-head h3 { font: 600 1.06rem/1.2 var(--font-display); letter-spacing: -.015em; }
.ms-pop-head p { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--text-3); }

.ms-badge {
  display: grid; grid-template-columns: auto 1fr; gap: var(--gap-3);
  align-items: center; padding: var(--gap-2) 0;
}
.ms-badge + .ms-badge { border-top: 1px solid var(--line); }
.ms-badge-ic {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-3);
}
.ms-badge-ic .ms { font-size: 19px; }
/* Earned badges light up meadow-green and fill their glyph; locked
   ones stay muted so the ladder reads at a glance. */
.ms-badge.is-hit .ms-badge-ic {
  background: linear-gradient(135deg, var(--meadow), var(--meadow-deep)); color: #fff;
}
.ms-badge.is-hit .ms-badge-ic .ms { font-variation-settings: "FILL" 1; }
.ms-badge-n { display: block; font: 600 var(--fs-sm)/1.2 var(--font-ui); color: var(--text); }
.ms-badge:not(.is-hit) .ms-badge-n { color: var(--text-3); }
.ms-badge-note { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px; }

.ms-sweeps-h {
  margin: 0 0 var(--gap-2); font-size: var(--fs-xs); color: var(--text-3);
  letter-spacing: .05em; text-transform: uppercase;
}
.ms-sweep { margin: 0 4px 4px 0; }
.ms-sweep .ms { color: var(--meadow-deep); }

/* Dormant Plus prompt — only rendered when the plusTier flag is on. */
.ms-plus {
  display: flex; gap: var(--gap-2); align-items: flex-start;
  padding: var(--gap-3); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--blossom) 10%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--blossom) 30%, var(--line));
}
.ms-plus .ms { color: var(--accent); font-size: 20px; }
.ms-plus b { display: block; font-size: var(--fs-sm); color: var(--text); }
.ms-plus span { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.5; }

.ms-view { width: 100%; justify-content: center; margin-top: 4px; }
.ms-view[aria-pressed="true"] {
  background: var(--accent-press); color: var(--on-accent); border-color: transparent;
}

@media (max-width: 420px) { .progress-host .ms-pop { width: calc(100vw - 24px); } }

/* The visually-hidden Done label rides on the same rule the card-nav
   label uses in grid view — icon-only in the gallery, worded in list
   and the sheet. Declared here so the class is never orphaned. */
.grid[data-view="grid"] .done-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}