/* header-line.css — the rule between a sticky header and the content under
 * it, shown only once that content has started to scroll.
 *
 * At rest the header floats on the page's own ground with no seam; the
 * moment anything scrolls beneath it the line appears and says "there is
 * more above". The landing has behaved this way since it shipped; this file
 * is that behaviour made shared, so no page is the odd one out.
 *
 * Mechanism: the colour travels as a custom property, never as a rule that
 * has to out-specify the page. A page keeps ownership of its own line
 * WIDTH (1px on the guide and admin, 2px in the playful shells) and simply
 * paints it with var(--header-line) — an inherited value cannot be lost to
 * a specificity fight, which is what a shared .scrolled rule would have to
 * win against every page skin separately.
 *
 * js/components/header-line.js toggles the class.
 */
[data-header-line]{
  --header-line:transparent;
  transition:border-color .2s ease, background .2s ease;
}
[data-header-line].scrolled{--header-line:var(--play-ink)}

@media (prefers-reduced-motion: reduce){
  [data-header-line]{transition:none}
}