/* ── Industry card vignettes ──────────────────────────────────────────────
   Shared by every industry page. Named for the recruiting page it was
   built for until 2026-08-09, which stopped being true the moment a second
   industry used it — a developer-tools page loading recruiting-visuals.css is
   the same drift as a footer that no longer matches the nav.

   Imported from the Claude Design project "Animated card vignettes design"
   (9adaa4d1-d47b-4923-8dac-d381d895c17f, Release Cards Section.dc.html) at
   Arjun's request: "use the exact animations but with our color system".

   The KEYFRAMES below are the design's, unchanged — same names, same
   percentages, same easings, same 11s and 13s cycles, and the same negative
   per-card delays that hold the six panels out of phase with each other.
   Nothing about the motion was re-timed.

   What changed is every colour. The design shipped a green accent (#4A7D5B)
   with amber for in-progress states; both are outside L1. Mapped as:

     Two accents, split by meaning [Arjun, 2026-08-09]:

       --zl-cobalt    the system working  — scanning, sweeping, typing,
                      detecting. Anything mid-flight.
       --zl-positive  the good result     — in market, record updated,
                      matched, feasible. Anything the user wanted.

     Vermilion is deliberately absent here. It is the site's "look at this one
     thing" mark (the nav focus frame, a single highlighted row); using it as a
     fill for every state in six panels spent it. It also measured worst of the
     three: surface on vermilion is 3.77:1 and fails AA for small text, where
     white on green is 5.99:1 and white on cobalt is 11.86:1.

     #4A7D5B  the design's green -> --zl-positive  (nearest L1 has, and no
                                   amendment to a locked palette needed)
     #A5762C  amber, in-flight   -> --zl-cobalt
     #1F1E1A / #55524A / #8A8678 -> --zl-ink / --zl-body / --zl-muted
     #FBF9F2  panel             -> --zl-paper       (a step down from the card)
     #fff     inner rows        -> --zl-surface
     the five separate hairlines -> --zl-line
     the four separate greys     -> color-mix on --zl-muted

   The design's own body/surface were #F4F1E8 and #FBF9F2, which are L1's bg
   and surface to within a digit — so the only real work was the two accents.

   These are cards, not the family-grid: a 152px animated panel replaces the
   28px card icon, so the icon-per-card rule does not apply and the markup
   does not pretend it does.                                                 */

.iv-grid {
  display: grid;
  /* minmax(0, 1fr), not 1fr -- a bare 1fr is minmax(auto, 1fr) and its auto
     floor is the card's min-content width, which is ~373px because the
     identity row is a nowrap flex line. At 360px that floor pushed the whole
     document 14px wider than the viewport and every page scrolled sideways.
     The two- and three-column rules below already spell it out. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Hairlines by gap over a ruled background, the same device the footer and
     the mega-menu use to separate groups. */
  background: var(--zl-line);
  border: 1px solid var(--zl-line);
}
/* Column count is governed by CARD width, not viewport width. The design's
   cards were ~392px and the identity row -- avatar, name, a mono subtitle and
   a trailing pill, all on one line -- was drawn to fit that. Below ~390px of
   card the subtitle is the part that gives (it is the only ellipsised cell),
   and the subtitle is the payload: "41 engineers writing rust" collapsing to
   43px of ellipsis takes the argument out of the card while leaving it looking
   fine. The old 40rem/64rem pair produced 349px cards at 700px and 296px cards
   at 1024px. Measured at 1024 under the old pair: 8 truncated lines including
   two names. These two hold the card at >= 388px at every width from 360 up.
   Re-measure at 895/896 and 1407/1408 if this row ever gets another element. */
@media (min-width: 56rem) { .iv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 88rem) { .iv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.iv-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem 1.5rem 1.85rem;
  background: var(--zl-surface);
}
.iv-card h3 {
  margin: .6rem 0 0;
  color: var(--zl-ink);
  font-size: var(--zl-text-md);
  letter-spacing: -0.01em;
}
.iv-card p {
  margin: 0;
  color: var(--zl-body);
  font-size: var(--zl-text-sm);
  line-height: 1.55;
}

/* The panel every vignette plays inside. Fixed height so three across keep a
   common baseline however differently their contents move. */
.iv-stage {
  height: 152px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--zl-line);
  border-radius: 8px;
  background: var(--zl-paper);
}

/* ── shared atoms ───────────────────────────────────────────────────────── */
.iv-mono {
  font-family: var(--zl-font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--zl-muted);
}
.iv-mono--hot { color: var(--zl-positive); }
.iv-mono--work { color: var(--zl-cobalt); }
.iv-val { font-family: var(--zl-font-mono); font-size: 10px; color: var(--zl-body); white-space: nowrap; }

.iv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--zl-line);
  border-radius: 6px;
  background: var(--zl-surface);
}
.iv-row--hot { border-color: var(--zl-positive); }
.iv-name { font-size: 12px; font-weight: var(--zl-weight-medium); white-space: nowrap; color: var(--zl-ink); }
.iv-sub  { font-family: var(--zl-font-mono); font-size: 9px; white-space: nowrap; color: var(--zl-muted); }
.iv-sub--now { color: var(--zl-ink); font-weight: var(--zl-weight-medium); }
/* Nothing inside a stage may exceed it. The design's cards were ~392px wide;
   ours are ~325px, so rows that fitted there clip here [Arjun, 2026-08-09:
   "the pill is moving out of the card"]. The fix is to make the identity
   column the one that gives -- it truncates, the pill never shrinks. */
.iv-row { min-width: 0; }
.iv-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iv-who .iv-stack, .iv-who .iv-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.iv-pills { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.iv-pill { flex: 0 0 auto; }
.iv-stack { display: inline-grid; }
.iv-stack > * { grid-area: 1/1; }
.iv-spacer { flex: 1; }

.iv-av {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--zl-muted) 30%, transparent);
  color: var(--zl-body);
  font-family: var(--zl-font-mono);
  font-size: 8px;
}
.iv-av--ink { background: var(--zl-ink); color: var(--zl-surface); }
.iv-av--hot { background: var(--zl-positive); color: var(--zl-surface); font-weight: var(--zl-weight-bold); }
.iv-av--sq { border-radius: 5px; font-size: 9px; }

.iv-pill {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--zl-line);
  border-radius: 999px;
  background: var(--zl-surface);
  color: var(--zl-body);
  font-family: var(--zl-font-mono);
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The highlight pill: white fill, green text, green outline [Arjun,
   2026-08-09]. Inverting it fixes the contrast complaint outright rather than
   managing it -- green on surface is 5.58:1 against 3.77:1 for surface on
   vermilion -- and a pill that is outlined rather than filled stops competing
   with the row it sits in. */
.iv-pill--hot {
  border-color: var(--zl-positive);
  background: var(--zl-surface);
  color: var(--zl-positive);
  font-weight: var(--zl-weight-bold);
  text-align: center;
}
.iv-pill--work {
  border-color: color-mix(in srgb, var(--zl-cobalt) 32%, transparent);
  background: color-mix(in srgb, var(--zl-cobalt) 6%, transparent);
  color: var(--zl-cobalt);
}

/* Width, not flex:1. The track sits in a ROW flex on card 1 (where flex:1
   should grow it sideways) and in a COLUMN flex on card 6 (where flex-basis:0%
   collapsed its height to nothing and the bar vanished entirely). Sizing on
   width and opting into flex only inside .iv-bar works in both. */
.iv-track { display: block; width: 100%; height: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--zl-muted) 22%, transparent); }
.iv-bar > .iv-track { flex: 1; width: auto; }
.iv-track--tall { height: 8px; }
.iv-fill { display: block; height: 100%; transform-origin: left; background: color-mix(in srgb, var(--zl-muted) 55%, transparent); }
.iv-fill--hot { background: var(--zl-positive); }
.iv-bar { display: flex; align-items: center; gap: 6px; }
.iv-bar > .iv-val { width: 58px; flex-shrink: 0; }

.iv-col { display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.iv-tag {
  border-radius: 4px;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--zl-positive) 10%, transparent);
  color: var(--zl-positive);
  font-family: var(--zl-font-mono);
  font-size: 8px;
  font-weight: var(--zl-weight-medium);
  white-space: nowrap;
}

/* The scan line that crosses card 2. Gradient rather than a solid rule, so it
   reads as a sweep and not as a border that appeared. */
.iv-sweep {
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--zl-cobalt), transparent);
}

.iv-caret { display: inline-block; width: 6px; height: 13px; background: var(--zl-cobalt); }
.iv-type { display: inline-block; overflow: hidden; white-space: nowrap; font-family: var(--zl-font-mono); font-size: 10px; font-weight: var(--zl-weight-medium); color: var(--zl-ink); }

.iv-faces { display: flex; }
.iv-faces > span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--zl-paper);
  background: color-mix(in srgb, var(--zl-muted) 28%, transparent);
  color: var(--zl-body);
  font-family: var(--zl-font-mono);
  font-size: 7px;
}
.iv-faces > span + span { margin-left: -7px; }
.iv-faces > span:last-child { background: var(--zl-positive); color: var(--zl-surface); font-weight: var(--zl-weight-bold); }

/* ── the design's keyframes, verbatim ───────────────────────────────────── */
@keyframes iv-w1 { 0%,6%{opacity:0;transform:translateY(5px)} 10%,100%{opacity:1;transform:none} }
@keyframes iv-w2 { 0%,19%{opacity:0;transform:translateY(5px)} 24%,100%{opacity:1;transform:none} }
@keyframes iv-w3 { 0%,32%{opacity:0;transform:translateY(5px)} 37%,100%{opacity:1;transform:none} }
@keyframes iv-w4 { 0%,45%{opacity:0;transform:scale(.8)} 50%,100%{opacity:1;transform:none} }
@keyframes iv-w4b { 0%,45%{opacity:0;transform:scale(.8)} 50%,100%{opacity:1;transform:none} }
@keyframes iv-w5 { 0%,52%{opacity:0;transform:scale(.8)} 57%,100%{opacity:1;transform:none} }
@keyframes iv-sweep { 0%,6%{left:3%;opacity:0} 9%{opacity:.9} 26%{opacity:.9} 31%,100%{left:95%;opacity:0} }
@keyframes iv-fillx { 0%,9%{transform:scaleX(0)} 26%,100%{transform:scaleX(1)} }
@keyframes iv-fillL { 0%,36%{transform:scaleX(0)} 50%,100%{transform:scaleX(1)} }
@keyframes iv-sc1 { 0%,4%{opacity:0} 7%,23%{opacity:1} 26%,100%{opacity:0} }
@keyframes iv-sc2 { 0%,26%{opacity:0} 29%,42%{opacity:1} 45%,100%{opacity:0} }
@keyframes iv-oldv { 0%,33%{opacity:1} 38%,100%{opacity:0} }
@keyframes iv-newv { 0%,33%{opacity:0;transform:translateY(4px)} 38%,100%{opacity:1;transform:none} }
@keyframes iv-typew { 0%,4%{width:0} 18%,100%{width:22ch} }
@keyframes iv-garbleOut { 0%,29%{opacity:1;filter:blur(0);transform:none} 34%,37%{opacity:.7;filter:blur(3px);transform:skewX(10deg)} 40%,100%{opacity:0} }
@keyframes iv-garbleIn { 0%,35%{opacity:0;filter:blur(3px);transform:skewX(-10deg)} 43%,100%{opacity:1;filter:blur(0);transform:none} }
@keyframes iv-srch { 0%,19%{opacity:0} 22%,30%{opacity:1} 34%,100%{opacity:0} }
@keyframes iv-res1 { 0%,32%{opacity:0;transform:translateY(4px)} 36%,100%{opacity:1;transform:none} }
@keyframes iv-res2 { 0%,38%{opacity:0;transform:translateY(4px)} 42%,100%{opacity:1;transform:none} }
@keyframes iv-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* Bindings. --d is the per-card offset the design uses to hold the six panels
   out of phase; --c is its cycle, 11s everywhere except card 3's 13s. */
.iv-stage { --c: 11s; }
[data-a] { animation-duration: var(--c); animation-timing-function: ease; animation-delay: var(--d, 0s); animation-iteration-count: infinite; }
[data-a="w1"]   { animation-name: iv-w1; }
[data-a="w2"]   { animation-name: iv-w2; }
[data-a="w3"]   { animation-name: iv-w3; }
[data-a="w4"]   { animation-name: iv-w4; }
[data-a="w4b"]  { animation-name: iv-w4b; }
[data-a="w5"]   { animation-name: iv-w5; }
[data-a="sweep"]{ animation-name: iv-sweep; }
[data-a="fillx"]{ animation-name: iv-fillx; }
[data-a="fillL"]{ animation-name: iv-fillL; }
[data-a="sc1"]  { animation-name: iv-sc1; animation-timing-function: linear; opacity: 0; }
[data-a="sc2"]  { animation-name: iv-sc2; animation-timing-function: linear; opacity: 0; }
[data-a="oldv"] { animation-name: iv-oldv; animation-timing-function: linear; }
[data-a="newv"] { animation-name: iv-newv; }
[data-a="typew"]{ animation-name: iv-typew; animation-timing-function: steps(22); }
[data-a="gout"] { animation-name: iv-garbleOut; }
[data-a="gin"]  { animation-name: iv-garbleIn; }
[data-a="srch"] { animation-name: iv-srch; animation-timing-function: linear; opacity: 0; }
[data-a="res1"] { animation-name: iv-res1; }
[data-a="res2"] { animation-name: iv-res2; }
[data-a="blink"]{ animation: iv-blink 1s step-end infinite; }

@media (prefers-reduced-motion: reduce) {
  /* Every vignette rests on its finished frame. These panels carry the
     argument -- a blank box would be worse than the paragraph it sits above. */
  [data-a] { animation: none !important; }
  [data-a="sc1"], [data-a="sc2"], [data-a="srch"], [data-a="oldv"], [data-a="gout"] { opacity: 0; }
  [data-a="fillx"], [data-a="fillL"] { transform: scaleX(1); }
  [data-a="typew"] { width: 22ch; }
  .iv-sweep { opacity: 0; }
}