/* Problem section (#problem): one source-backed chart, first-silicon success in the Siemens EDA and Wilson Research
   Group functional verification studies from 2020 to 2026 (Kavin, 2026-11-01: one chart, animated, the sources folded
   away; later that day: drop 2012 to 2018, and keep the survey-method note in the sources, off the bars). SOURCES.md
   has every number and how it was read.

   The chart is plain HTML, complete without JS. Each bar is a list item: its height comes from its value
   (style="--v: 32") on a 0 to 50% scale, and its label is the text beside it, so the year, the value and the bar sit on
   one line of markup. The scale is drawn quietly: hairlines at 50% and 25% and a baseline. The bars are hatched like an
   engraving. charts.js grows the bars left to right each time the chart comes into view, so the fall reads as it
   draws.

/* Heading: one line on wide screens (.sh--line in styles.css), the sentence under it. */
.problem .sh.trend-head { margin-bottom: clamp(28px, 3.4vw, 48px); }

.trend {
  --plot-h: 230px;                         /* 0 to 50% */
  --max: 50;
  --year-h: 34px;                          /* the year labels under the baseline */
  --axis-w: 44px;                          /* the 50% and 25% labels */
  --bar-w: clamp(56px, 7.4vw, 112px);
  --trend-ink: var(--walnut);              /* outline */
  --trend-hatch: rgb(75 54 34 / .72);      /* walnut hatching over --paper-2 */
  --trend-fill: var(--paper-2);
  --trend-bg: var(--paper);                /* the paper behind the section: value labels knock the hairlines out with it */
  margin: 0;
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.trend__title { font-size: clamp(1.375rem, 1.15rem + .6vw, 1.75rem); line-height: 1.15; letter-spacing: -0.01em; }
.trend__unit { margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }

/* The plot: the scale is drawn on the plot box, under the bars. */
.trend__plot { position: relative; margin-top: 22px; padding-left: var(--axis-w); }
.trend__plot::before {
  content: ""; position: absolute; left: var(--axis-w); right: 0; top: 0; height: var(--plot-h); pointer-events: none;
  background:
    linear-gradient(var(--line), var(--line)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 calc(var(--plot-h) / 2) / 100% 1px no-repeat;
}
.trend__plot::after { content: ""; position: absolute; left: var(--axis-w); right: 0; top: var(--plot-h); height: 1px; background: var(--ink-3); z-index: 2; }
.trend__tick {
  position: absolute; left: 0; width: calc(var(--axis-w) - 10px); transform: translateY(-50%);
  font-size: 12px; line-height: 1; text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.trend__tick--50 { top: 0; }
.trend__tick--25 { top: calc(var(--plot-h) / 2); }

.trend__bars { position: relative; z-index: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
/* One column per study, packed to the baseline: the value on top, the bar, then the year (the year comes first in the
   markup, so a screen reader hears "2020 32%"). */
.trend__bars > li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: calc(var(--plot-h) + var(--year-h)); }
.trend__bars > li::before {
  content: ""; order: 2; flex: none; box-sizing: border-box;
  width: var(--bar-w); height: calc(var(--plot-h) * var(--v) / var(--max));
  border: 1px solid var(--trend-ink); border-bottom: 0;
  background: repeating-linear-gradient(-45deg, var(--trend-hatch) 0 1px, transparent 1px 4px), var(--trend-fill);
}
.trend__val {
  order: 1; position: relative; margin-bottom: 6px; padding: 2px 5px 0; border-radius: 2px; background: var(--trend-bg); white-space: nowrap;
  font: 500 clamp(1.25rem, 1.05rem + .6vw, 1.75rem)/1 var(--serif); font-variant-numeric: lining-nums; color: var(--ink);
}
.trend__year { order: 3; flex: none; height: var(--year-h); padding-top: 10px; font: 500 14px/1.2 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Sources: folded away under the chart, opened with one click. */
.trend__sources { margin-top: clamp(18px, 2vw, 26px); font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.trend__sources summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font: 500 13.5px/1.4 var(--sans); color: var(--ink-2); padding: 4px 0;
}
.trend__sources summary::-webkit-details-marker { display: none; }
.trend__sources summary::after {
  content: ""; width: 9px; height: 9px; margin-top: -3px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--dur-short) var(--ease-out);
}
.trend__sources[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.trend__sources summary:hover { color: var(--ink); }
.trend__notes { max-width: 104ch; padding-top: 6px; }
.trend__notes p + p { margin-top: 6px; }
.trend__notes a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.trend__notes a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* Short laptop screens (1280x720): a shorter plot keeps the heading and the chart on one screen. */
@media (min-width: 1024px) and (max-height: 760px) {
  .trend { --plot-h: 190px; }
}
/* Phones: a shorter plot and smaller labels. */
@media (max-width: 759px) {
  .trend { --plot-h: 170px; --year-h: 30px; --axis-w: 34px; --bar-w: clamp(40px, 13vw, 64px); }
  .trend__val { font-size: 1.25rem; margin-bottom: 4px; padding: 1px 3px 0; }
  .trend__year { padding-top: 8px; font-size: 13px; }
  .trend__tick { font-size: 11px; }
}
@media (max-width: 380px) {
  .trend__val { font-size: 1.125rem; }
  .trend__year { font-size: 12px; }
}

/* Grow (charts.js adds .trend--armed only with html.motion and no reduced-motion preference, then .is-grown as the
   chart comes into view, and takes .is-grown away again once the chart is fully off screen, so it grows again next
   time): the bars rise from the baseline one after another, left to right, 800 ms each, 280 ms apart, and each value
   settles on its bar as it lands (about 2 s in all). If html.motion is ever taken away, the chart is simply there. */
html.motion .trend--armed .trend__bars > li::before { clip-path: inset(100% 0 0 0); }
html.motion .trend--armed .trend__val { opacity: 0; transform: translateY(6px); }
html.motion .trend--armed.is-grown .trend__bars > li::before {
  clip-path: inset(0);
  transition: clip-path 800ms cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 280ms + 120ms);
}
html.motion .trend--armed.is-grown .trend__val {
  opacity: 1; transform: none;
  transition: opacity 360ms var(--ease-out) calc(var(--i, 0) * 280ms + 640ms), transform 420ms var(--ease-out) calc(var(--i, 0) * 280ms + 640ms);
}

@media print {
  .trend__bars > li::before { clip-path: none !important; }
  .trend__val { opacity: 1 !important; transform: none !important; }
}
@media (forced-colors: active) {
  .trend__bars > li::before { forced-color-adjust: none; border-color: CanvasText; background: repeating-linear-gradient(-45deg, CanvasText 0 1px, Canvas 1px 4px); }
  .trend__plot::after { background: CanvasText; }
}