/* Shared look for the feature pages' ghosted question ("What are Klaar's … like?") and the
   "Meet Scout" diagram (Perform / Develop / Engage / Reward pills, Remembers / Acts / Predicts).
   Before this, each page carried its own copy of these rules with different sizes and a 10% ink
   colour, and the diagram's text was capped at 11-15px before the page's 75% scaling.
   Sizes below are in the pages' 1920px stage pixels; on a 1440px laptop they draw at 75%.
   Phones (900px and below) keep the pages' own responsive rules.
   The build links this file after the page's own styles on the pages listed in scripts/feature-pages.mjs. */

:root {
  --kl-ghost-start: rgba(42, 42, 46, 0.12);
  --kl-ghost-done: #4A484E;
  --kl-ghost-key: #A83C3C;
}

/* The question above the first section. Sentence case, a medium weight, a dark grey, centred above the
   left-aligned section that follows.
   js/ghost-line.js splits it into words that fill in from faint to grey as it scrolls into view,
   and the subject of the question finishes in coral. Without the script, or with reduced motion,
   the finished line shows. */
html body #shell#shell#shell#shell #page#page#page#page .ghost-q {
  font-size: clamp(30px, 3.8vw, 56px) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  max-width: 22ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 56px !important;
  width: auto !important;
  white-space: normal !important;
  text-align: center !important;
  text-wrap: balance;
  color: var(--kl-ghost-done) !important;
}
html body #shell#shell#shell#shell #page#page#page#page .ghost-q .kl-w {
  display: inline-block;
  white-space: pre;
  color: var(--kl-ghost-done) !important;
}
html body #shell#shell#shell#shell #page#page#page#page .ghost-q .kl-k { color: var(--kl-ghost-key) !important; }
html body #shell#shell#shell#shell #page#page#page#page .ghost-q.kl-live .kl-w {
  color: color-mix(in srgb, var(--kl-ghost-done) calc(var(--w, 0) * 100%), var(--kl-ghost-start)) !important;
}
html body #shell#shell#shell#shell #page#page#page#page .ghost-q.kl-live .kl-k {
  color: color-mix(in srgb, var(--kl-ghost-key) calc(var(--w, 0) * 100%), var(--kl-ghost-start)) !important;
}

@media (min-width: 901px) {
  /* The four pillars */
  html body #shell#shell#shell#shell #page#page#page#page .gscout__pillars { grid-template-columns: 310px !important; flex: 0 0 310px !important; row-gap: 12px !important; }
  html body #shell#shell#shell#shell #page#page#page#page .gscout__pill { height: 48px !important; padding: 0 24px !important; gap: 14px !important; font-size: 22px !important; font-weight: 500 !important; color: #2A2A2E !important; border-color: #D4CFC6 !important; }
  html body #shell#shell#shell#shell #page#page#page#page .gscout__pill i { font-size: 24px !important; color: #6B6B65 !important; }
  /* The pillar this page belongs to */
  html body #shell#shell#shell#shell #page#page#page#page .gscout__pill--here { height: auto !important; min-height: 112px !important; padding: 16px 24px !important; gap: 10px !important; color: #A83C3C !important; }
  html body #shell#shell#shell#shell #page#page#page#page .gscout__pillrow b { font-size: 30px !important; }
  html body #shell#shell#shell#shell #page#page#page#page .gscout__pillrow i { font-size: 28px !important; color: #A83C3C !important; }
  html body #shell#shell#shell#shell #page#page#page#page .gscout__pillto { font-size: 16px !important; letter-spacing: .06em !important; padding-left: 0 !important; color: #A83C3C !important; }
  html body #shell#shell#shell#shell #page#page#page#page .gscout__pillto i { font-size: 16px !important; }

  /* Remembers / Acts / Predicts */
  html body #shell#shell#shell#shell #page#page#page#page .gscout__label { font-size: 16px !important; letter-spacing: .14em !important; color: #A83C3C !important; }
  html body #shell#shell#shell#shell #page#page#page#page .gscout__mini .gscout__label i,
  html body #shell#shell#shell#shell #page#page#page#page .gscout__label i { font-size: 22px !important; color: #A83C3C !important; }
  html body #shell#shell#shell#shell #page#page#page#page .gscout__mini p:last-child { font-size: 22px !important; line-height: 1.5 !important; color: #2A2A2E !important; }
  html body #shell#shell#shell#shell #page#page#page#page .gscout__intro { font-size: 22px !important; line-height: 1.55 !important; }
  html body #shell#shell#shell#shell #page#page#page#page .gscout__bnote { font-size: 18px !important; color: #A83C3C !important; }
}

/* The Remembers / Acts / Predicts rows take turns to light up. The resting state was 55% opacity,
   which read as washed out; it now stays at 80%. */
@keyframes gsLit {
  0%, 2% { opacity: .8; border-color: transparent; }
  8%, 28% { opacity: 1; border-color: var(--coral); }
  36%, 100% { opacity: .8; border-color: transparent; }
}