/**
 * Motion and layout for the dashboard audit headline.
 *
 * Kept beside the component rather than in the theme's custom-style.css, which
 * several sessions edit at once. Webpack bundles it, following videotree.css.
 *
 * The visual language - palette, weight, what a win actually looks like - is
 * deliberately restrained here. This provides the kinetics and enough
 * separation that the six states cannot read as identical; D8 owns the look.
 *
 * Every animation is disabled under prefers-reduced-motion at the bottom of
 * this file. Counting numbers and rising cards are vestibular triggers, and
 * the card must be completely legible with nothing moving.
 */

/* Two columns: the measure on the left, what it means on the right.
 *
 * Everything used to stack down the left edge, which left two thirds of a
 * wide card empty and gave the reader no order to follow. Split, the eye gets
 * a fixed place to find the grade and a column to read.
 *
 * The left column is sized to the meter rather than to the content, so the
 * reading column starts in the same place on every state. A card whose text
 * begins somewhere different depending on whether a figure happened to exist
 * is the thing that made these feel unrelated to each other. */
.ts-audit-headline {
  display: grid;
  grid-template-columns: minmax(148px, 168px) 1fr;
  gap: 0 1.25rem;
  align-items: start;
}
.ts-audit-headline__measure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
}
.ts-audit-headline__read {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
}
.ts-audit-headline__meter {
  margin-top: 0.15rem;
}
/* The score is a button now, because the letter flips to the number. It must
   not look like one until it is reached for. */
.ts-audit-headline__score {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}
.ts-audit-headline__score:disabled {
  cursor: default;
}
.ts-audit-headline__score:focus-visible {
  outline: 2px solid var(--ts-headline-ink, currentColor);
  outline-offset: 3px;
  border-radius: 4px;
}
/* One column below the width where two would squeeze the reading measure. */
@media (max-width: 640px) {
  .ts-audit-headline {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

/* Entrance is staggered so the card reads in the order it should be read:
   the number, then what it means, then what to do about it. The delay comes
   from a custom property set per element, so adding a line later does not
   mean adding another delay class. */
.ts-audit-headline__title,
.ts-audit-headline__detail,
.ts-audit-headline__action {
  animation: ts-headline-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--ts-stagger, 0) * 70ms);
}

@keyframes ts-headline-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ts-audit-headline__title {
  font-weight: 600;
  margin: 0;
}

.ts-audit-headline__detail {
  margin: 0;
  opacity: 0.75;
  font-size: 0.925rem;
}

.ts-audit-headline__action {
  margin-top: 0.25rem;
  font-weight: 600;
  text-decoration: none;
}

.ts-audit-headline__action::after {
  content: " \2192";
  display: inline-block;
  transition: transform 180ms ease-out;
}

.ts-audit-headline__action:hover::after {
  transform: translateX(3px);
}

/* The figure carries the movement. The score counts up in JS; this gives it
   somewhere to sit and lets direction read at a glance. */
.ts-audit-headline__figure {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.15rem;
  animation: ts-headline-figure 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ts-audit-headline__score {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Tabular numerals matter more than they look: without them the score jitters
   horizontally as it counts, because digit widths differ. */
.ts-audit-headline__delta {
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* Direction is doing the emotional work, not colour alone. A win arrives from
   below and settles up; a drop eases downward and slower, because a
   celebratory motion on a regression would read as mocking. */
.ts-audit-headline__figure.is-up {
  animation-name: ts-headline-rise;
}

.ts-audit-headline__figure.is-down {
  animation-name: ts-headline-settle;
  animation-duration: 700ms;
}

@keyframes ts-headline-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ts-headline-settle {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Urgent asks for attention without alarming. A slow pulse reads as serious;
   a flash reads as an error and gets dismissed. */
.ts-audit-headline--urgent .ts-audit-headline__title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  animation: ts-headline-pulse 2.4s ease-in-out infinite;
}

@keyframes ts-headline-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* Incomplete is waiting on data, so it shimmers rather than pulses: the
   difference between "something is wrong" and "something is missing". */
.ts-audit-headline--incomplete .ts-audit-headline__title {
  background: linear-gradient(
    90deg,
    currentColor 0%,
    currentColor 40%,
    rgba(127, 127, 127, 0.45) 50%,
    currentColor 60%,
    currentColor 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation:
    ts-headline-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
    ts-headline-shimmer 3.2s ease-in-out 600ms infinite;
}

@keyframes ts-headline-shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -20% 0;
  }
}

/* Non-negotiable. Everything above is decoration on top of text that must
   stand alone, so under reduced motion nothing moves at all. */
@media (prefers-reduced-motion: reduce) {
  .ts-audit-headline__title,
  .ts-audit-headline__detail,
  .ts-audit-headline__action,
  .ts-audit-headline__figure,
  .ts-audit-headline--urgent .ts-audit-headline__title::before,
  .ts-audit-headline--incomplete .ts-audit-headline__title {
    animation: none !important;
  }

  .ts-audit-headline__action::after {
    transition: none;
  }

  .ts-audit-headline--urgent .ts-audit-headline__title::before {
    opacity: 1;
  }
}

/* Two directions, side by side and visually distinct from the big figure.
   They answer different questions - did our assessment move, and did the
   channel actually grow - so they must not read as one combined verdict. */
.ts-audit-headline__trends {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.85rem;
}

.ts-audit-headline__trend {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 600;
  animation: ts-headline-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 140ms;
}

.ts-audit-headline__trend-label {
  font-weight: 400;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .ts-audit-headline__trend {
    animation: none !important;
  }
}

/* Per-state colour comes from ts_design_tokens rather than being invented
   here, so the next panel reporting outcomes inherits the vocabulary instead of
   growing a second, slightly different one.
 *
 * The colour is spent in THREE places only: the eyebrow, the figure and its
 * chip, and the action link. The card itself stays a normal house card, white
 * with a thin border, because every sibling on the dashboard is one - the
 * assistant panel, next steps, the shortcut cards. Six full-bleed tinted
 * panels read as an alert strip bolted onto the page rather than part of the
 * product, and a coloured rail on a rounded tinted card is one of the most
 * recognisably machine-made patterns going. That was the first attempt and it
 * was wrong.
 *
 * The tint token is for chips and badges. It is NOT for washing a surface.
 *
 * When a state genuinely needs to dominate there is already a house pattern:
 * the DO THIS FIRST hero in next steps, a filled block with a white eyebrow.
 * Fill the block, do not tint the page. Anything quieter than that is a white
 * card.
 *
 * Loudness runs opposite to frequency: incomplete, steady and quick_win carry
 * most of the traffic and stay quiet; win, regression and urgent are rare and
 * may be emphatic.
 */
.ts-audit-headline--win {
  --ts-headline-ink: var(--ts-state-win-ink, currentColor);
  --ts-headline-tint: var(--ts-state-win-tint, transparent);
}

.ts-audit-headline--regression {
  --ts-headline-ink: var(--ts-state-regression-ink, currentColor);
  --ts-headline-tint: var(--ts-state-regression-tint, transparent);
}

.ts-audit-headline--urgent {
  --ts-headline-ink: var(--ts-state-urgent-ink, currentColor);
  --ts-headline-tint: var(--ts-state-urgent-tint, transparent);
}

.ts-audit-headline--quick_win {
  --ts-headline-ink: var(--ts-state-quick-win-ink, currentColor);
  --ts-headline-tint: var(--ts-state-quick-win-tint, transparent);
}

.ts-audit-headline--steady {
  --ts-headline-ink: var(--ts-state-steady-ink, currentColor);
  --ts-headline-tint: var(--ts-state-steady-tint, transparent);
}

.ts-audit-headline--incomplete {
  --ts-headline-ink: var(--ts-state-incomplete-ink, currentColor);
  --ts-headline-tint: var(--ts-state-incomplete-tint, transparent);
}

/* 1 of 3: the eyebrow names the state, which is the pattern the rest of the
   dashboard already uses. This is where a reader learns which state they are
   in, so it is the one place the colour has a job. */
.ts-audit-headline__eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-headline-ink, inherit);
  animation: ts-headline-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 2 of 3: the figure. The chip uses the tint as a chip, which is what the tint
   token is for. */
.ts-audit-headline__score {
  color: var(--ts-headline-ink, inherit);
}

.ts-audit-headline__delta {
  color: var(--ts-headline-ink, inherit);
  background: var(--ts-headline-tint, transparent);
}

/* 3 of 3: the action. */
.ts-audit-headline__action,
.ts-audit-headline__trend.is-up,
.ts-audit-headline__trend.is-down {
  color: var(--ts-headline-ink, inherit);
}

@media (prefers-reduced-motion: reduce) {
  .ts-audit-headline__eyebrow {
    animation: none !important;
  }
}