/* Rat poison guide (/parasites-and-viruses/rodenticides-and-wildlife/). Loaded after guide.css.
   Two pieces the magpie template doesn't have: the exposure chart (.xp) and the dated timeline (.tl). */

/* Exposure chart: one bar per study figure, 0 to 100% */
.xp { margin: 30px 0 0; }
.xp-set + .xp-set { margin-top: 30px; }
.xp-grp { font-stretch: 75%; font-weight: 750; font-size: 15px; margin: 0; padding-bottom: 7px; border-bottom: 3px solid var(--ink); }
.xp-row { padding: 10px 0 12px; border-bottom: 1px solid var(--hair2); }
.xp-lab { margin: 0 0 6px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 14px; }
.xp-lab b { font-stretch: 112%; font-weight: 800; }
.xp-lab span { font-stretch: 75%; font-weight: 600; color: var(--ink2); }
.xp-trk {
  position: relative; height: 26px; border-left: 1px solid var(--ink);
  background: linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / 25% 100%;
}
.xp-bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 1%); background: var(--c); border-radius: 0 2px 2px 0; transform-origin: 0 50%; transition: transform .9s var(--ease); }
.xp-val { position: absolute; top: 0; left: calc(var(--v) * 1%); margin-left: 7px; font-stretch: 75%; font-weight: 800; font-size: 15px; line-height: 26px; font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity .3s .6s var(--ease); }
/* Long bars carry their number inside, so it never runs off a phone screen */
.xp-val.in { left: auto; right: calc(100% - var(--v) * 1%); margin: 0 7px 0 0; color: #fff; }
.xp-row:nth-child(3) .xp-bar { transition-delay: .08s; }
.xp-row:nth-child(4) .xp-bar { transition-delay: .16s; }
.xp-row:nth-child(5) .xp-bar { transition-delay: .24s; }
.xp.is-hidden .xp-bar { transform: scaleX(0); }
.xp.is-hidden .xp-val { opacity: 0; }
.xp-axis { position: relative; height: 24px; border-top: 1px solid var(--ink); margin-top: 10px; font-stretch: 75%; font-size: 12.5px; font-weight: 650; color: var(--ink2); font-variant-numeric: tabular-nums; }
.xp-axis span { position: absolute; top: 5px; transform: translateX(-50%); }
.xp-axis span:first-child { transform: none; }
.xp-axis span:last-child { transform: translateX(-100%); }
.xp-cap { font-stretch: 75%; font-size: 13.5px; color: var(--ink2); margin-top: 8px; max-width: 44em; }
@media (min-width: 760px) {
  .xp-trk { height: 32px; }
  .xp-val { line-height: 32px; font-size: 16px; }
  .xp-lab { font-size: 15px; }
}

/* Dated timeline: where the national review stands */
.tl { list-style: none; margin: 28px 0 0; padding: 0; border-top: 3px solid var(--ink); max-width: 60em; }
.tl li { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 14px 0 15px; border-bottom: 1px solid var(--hair2); font-size: 16.5px; line-height: 1.45; }
.tl-d { font-stretch: 75%; font-weight: 800; font-size: 16px; line-height: 1.3; color: var(--c); font-variant-numeric: tabular-nums; }
.tl li.is-now .tl-d { color: var(--blue); }
.tl b { display: block; font-stretch: 112%; font-weight: 800; font-size: 18px; line-height: 1.2; margin-bottom: 3px; letter-spacing: -.01em; }
.tl + .law-note { margin-top: 18px; max-width: 44em; }
@media (min-width: 760px) {
  .tl li { grid-template-columns: 150px minmax(0, 1fr); column-gap: 28px; }
  .tl-d { padding-top: 2px; }
}