/* Goals (task #191): the road per platform, on goals/. Builds on sticker-base.css. */
.g-list { display: grid; gap: var(--s3); margin-top: var(--s4); }
.g-card { background: var(--tint); }
.g-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.g-head h4 { margin: 0; font-size: 22px; font-weight: 800; }
.g-head h4 small { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--muted); }
.g-next { font-family: var(--mono); font-size: 13px; }
.g-note { margin: 0; font-size: 14px; color: var(--muted); }
.g-track { position: relative; height: 66px; margin: 0 20px; }
.g-line, .g-fill { position: absolute; left: 0; top: 18px; height: 6px; border: 2px solid var(--line); border-radius: var(--r-pill); }
.g-line { right: 0; background: var(--card); }
.g-fill { background: var(--pop); }
.g-stop { position: absolute; top: 8px; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; }
.g-stop i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); display: grid; place-items: center; font-style: normal; font-size: 14px; }
.g-stop.won i { background: var(--go); color: var(--on-pop); }
.g-stop span { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.g-here { position: absolute; top: -20px; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; background: var(--pop); color: var(--on-pop);
  border: 1.5px solid var(--line); border-radius: 6px; padding: 0 5px; white-space: nowrap; }