/**
 * Marks - the small drawn figures that sit above the items in every list on
 * the page.
 *
 * They live in their own file for two reasons. One is that the rules are
 * shared by five different lists and inlining them five times would be
 * silly. The other is practical: the <style> block in index.html has been
 * overwritten wholesale several times, taking these with it, and an <svg>
 * that loses its stylesheet falls back to 300x150 and wrecks the section it
 * sits in. The elements also carry width and height attributes, so the worst
 * a lost stylesheet can now cost is the colour and the animation.
 *
 * The vocabulary is deliberately small: a line draws itself, a shape pops,
 * a shape rises. Every mark is built from those three, so twenty of them
 * across a page still read as one hand.
 */

.mark {
  display: block;
  inline-size: 2.75rem;
  block-size: 1.75rem;
  margin-block-end: 1rem;
  color: var(--lamp-deep, #D98B3C);
  overflow: visible;
}

.mark .ln {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mark .sh { fill: currentColor; }
.mark .faint { opacity: .45; }

/* The dark sections need the brighter lamp; the ivory ones would glare. */
[data-surface="deep"] .mark,
.section:not([data-surface]) .mark { color: var(--lamp, #F0A65C); }

/* ---- the three motions ---------------------------------------------
 * Nothing loops. Each list draws itself once, when it is reached, and
 * then stays as a finished drawing - which is also exactly what a
 * visitor who asked for no motion, or a browser that never fires the
 * observer, sees from the start.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  [data-marks] .mk-draw {
    stroke-dasharray: var(--len, 64);
    animation: mk-draw .75s cubic-bezier(.3,.7,.3,1) both;
    animation-delay: var(--d, 0s);
  }
  @keyframes mk-draw { from { stroke-dashoffset: var(--len, 64); } to { stroke-dashoffset: 0; } }

  [data-marks] .mk-pop {
    transform-box: fill-box; transform-origin: 50% 50%;
    animation: mk-pop .4s cubic-bezier(.2,.9,.3,1.25) both;
    animation-delay: var(--d, 0s);
  }
  @keyframes mk-pop { from { transform: scale(0); opacity: 0; } }

  [data-marks] .mk-rise {
    animation: mk-rise .6s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: var(--d, 0s);
  }
  @keyframes mk-rise { from { opacity: 0; transform: translateY(4px); } }

  /* Held back until the list is on screen. Without this the marks would
     have finished drawing long before anybody scrolled to them. */
  [data-marks]:not([data-draw]) .mk-draw,
  [data-marks]:not([data-draw]) .mk-pop,
  [data-marks]:not([data-draw]) .mk-rise { animation-play-state: paused; }
}

/* ---- the steps keep their own corner --------------------------------
 * In "Your part" the mark sits opposite the step number, on the rule,
 * rather than above the heading: the number is already there and two
 * things stacked in the same place read as a mistake.
 * ------------------------------------------------------------------ */
.step { position: relative; }
.step .mark {
  position: absolute;
  inset-block-start: 1.35rem;
  inset-inline-end: 0;
  margin-block-end: 0;
  pointer-events: none;
}
.step h3 { padding-inline-end: 3.5rem; }

/* A rule is a two-line grid; the mark goes above it and keeps its size. */
.rule .mark { inline-size: 2.25rem; block-size: 1.5rem; margin-block-end: .55rem; }

/* On a plan the price is the anchor, so the mark stays quiet. */
.plan .mark { inline-size: 2.25rem; block-size: 1.5rem; margin-block-end: .35rem; }

@media (max-width: 46rem) {
  .mark { inline-size: 2.5rem; block-size: 1.6rem; margin-block-end: .85rem; }
}