/*
  BEGINNER MAP FOR css/easteregg-tracker.css
  PURPOSE: This file controls the small discovery notification shown after finding an Easter egg.

  CSS READING GUIDE:
  - The selector before { chooses what is styled. .name means a class; #name
    means one unique id; an element name such as body targets that HTML tag.
  - The declarations inside { } are property: value pairs. Each ends with ;.
  - Later rules can override earlier rules when they target the same element.
  - @media rules apply only under a condition such as a narrow screen or a
    visitor requesting reduced motion. Keep their closing braces paired.
  - Shared CSS affects several pages, so test Home, About, Light, and Dark after
    changing a shared rule. Comments below identify each component or feature.
*/

/*
  BEGINNER GUIDE
  PURPOSE: Styles the small “Discovery recorded” line added to discovery pages.

  CSS changes appearance, not page wording or behaviour.
  A selector beginning with “.” matches an HTML class; “#” matches an HTML id.
  Later rules can override earlier rules. Keep braces paired: every { needs a }.
*/

/* The small progress line JavaScript inserts at the bottom of a discovery overlay. */
/* COMPONENT NOTE: Hidden Easter-egg entrance .egg-tracker-status: subtle visually, with a larger usable touch target where needed. */
.egg-tracker-status {
    margin: 12px 0 0 !important;
    padding-top: 10px;
    border-top: 1px solid rgba(56, 189, 248, 0.2);
    font-size: 0.76rem !important;
    line-height: 1.3;
}

/* Make its Discovery Log link use the same quiet blue as the page. */
/* COMPONENT NOTE: Hidden Easter-egg entrance .egg-tracker-status a: subtle visually, with a larger usable touch target where needed. */
.egg-tracker-status a {
    color: rgba(186, 230, 253, 0.9) !important;
}