/* =============================================================================
   Laws and Regulations: what engage.css does not already do.
   The page speaks the Engagement soft style (grey cards, leaf blocks, the
   frosted segmented control); these rules only fit this page's own pieces
   into it: the pathway strings, the five questions, the stress tags, the
   company logos, the wide tables and the reference list.
   ========================================================================== */

/* a pathway written as a string of arrows: a soft leaf pill */
.lr .pathway {
  margin: var(--sp-5) 0;
  padding: .85rem 1.25rem;
  border-radius: 18px;
  background: var(--lwell);
  color: var(--leaf);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -.005em;
}
.lr .card .pathway, .lr .chap__end .pathway { background: #fff; }
.engage .chap__end p.pathway { font-size: .9375rem; font-weight: 600; color: var(--pl); }

/* the one-line thesis under the takeaway table */
.engage .lr-motto {
  margin: var(--sp-5) 0;
  padding: 1.25rem 1.5rem;
  border-radius: 20px;
  background: var(--lwell);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* the student sub-title above the Taiwan cards */
.engage p.lr-kicker { margin: var(--sp-7) 0 0; color: var(--pl); }

/* a card with its text on one side and its figure on the other */
.lr-split { display: grid; gap: 1.25rem 2.25rem; align-items: center; }
@media (min-width: 62rem) { .lr-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lr-split .chartbox { margin: 0; }
.lr .chartbox .fig img { cursor: zoom-in; }

/* the expansion account: table and note beside the market chart */
.lr-ev { align-items: center; }
@media (max-width: 61.99rem) { .lr-ev { grid-template-columns: minmax(0, 1fr); } }
.lr-ev > *, .lr-split > *, .lr .cards > .card, .lr .blks > .blk, .lr .folds > .fold { min-width: 0; }
.engage .lr-ev .ev__text .tablewrap { margin: 0 0 1rem; }
.lr-ev .chartbox { margin: 0; }

/* cards: a whole-width card above the grid, and the boxes inside cards */
.lr-wide-card { margin-top: 1.25rem; }
.lr-wide-card + .cards { margin-top: 1.25rem; }
.lr .card .callout { background: #fff; }
.engage .card > .card__name + p { margin-top: .75rem; }
.lr .card .tablewrap { margin: 1rem 0; }
.lr .voices { margin-top: 1.25rem; }
.lr .card > .voices + .tablewrap { margin-top: 1.25rem; }
.lr-cols-top { margin-top: 0; }

/* a chapter close that runs to more than one sentence keeps body type */
.engage .chap__end h4.chap__eyebrow { margin: 0; text-transform: none; letter-spacing: -.005em; }
.engage .lr-end p:not(.chap__eyebrow):not(.pathway) {
  max-width: 68ch;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -.008em;
  color: var(--ink-2);
}

/* the small segmented control in Future regulatory expansion */
.lr-seg-sm .seg { margin-bottom: var(--sp-5); }

/* the company logos in the case-study heroes stay small and centred */
.engage .chap__hero .fig--logo { max-width: 9rem; margin: 0 auto var(--sp-4); }
.engage .chap__hero .fig--logo img { border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .06); cursor: default; }
.engage .chap__hero .fig--logo figcaption { margin-top: .4rem; text-align: left; font-size: .75rem; color: var(--ink-3); }

/* the conversation card */
.lr-talk { margin-top: var(--sp-6); }

/* the five questions near the end, as numbered tiles */
.steps { counter-reset: step; list-style: none; display: grid; gap: .5rem; margin: 0 0 1.25rem; padding: 0; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.engage .steps li {
  counter-increment: step;
  margin: 0;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 18px;
  background: #fff;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--ink);
}
.steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; margin: 0 0 .65rem;
  border-radius: 50%;
  background: var(--leaf); color: #fff;
  font-size: .8125rem; font-weight: 700;
}
.steps b { display: block; font-weight: 650; }

/* what is still unconfirmed: two columns of soft rows */
@media (min-width: 52rem) { .engage .lr-findings { grid-template-columns: 1fr 1fr; } }

/* stress and positioning tags in the biostimulant table */
.tag {
  display: inline-block;
  padding: .1em .6em;
  border-radius: 999px;
  font-size: .8125rem; font-weight: 600;
  white-space: nowrap;
}
.tag--salt    { background: #fdf3cf; color: #6b4e00; }
.tag--drought { background: #f4e6d6; color: #6b3a0a; }
.tag--osmotic { background: #e3edf9; color: #1d4370; }
.tag--heat    { background: #fbe4e1; color: #7a1d12; }
.tag--pb      { background: var(--leaf-100); color: var(--leaf-900); font-style: italic; }
.lr td .tag + .tag { margin-left: .25rem; }

/* the students' table titles sit above each table, in the figure-caption voice */
.lr table.data caption { caption-side: top; text-align: left; padding: .7rem .85rem .6rem; font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }
.lr table.data caption b { color: var(--leaf-700); font-weight: 650; }

/* wide tables keep readable columns and scroll inside their box on phones */
.lr table.lr-wide { min-width: 760px; }
.lr table.lr-wide thead th { white-space: normal; }

/* references: one soft block, two columns */
.engage .refs { border-top: 0; padding-top: 0; }
.lr-refs { margin-top: var(--sp-4); }
.engage .lr-refs ol { margin: 0; padding-left: 1.6em; font-size: .8125rem; line-height: 1.55; color: var(--ink-3); }
.engage .lr-refs li { max-width: none; margin: 0 0 .6rem; font-size: .8125rem; line-height: 1.55; color: var(--ink-3); break-inside: avoid; }
@media (min-width: 52rem) { .engage .lr-refs ol { columns: 2; column-gap: 2.75rem; } }

/* inside a chapter the cards pack into two columns, read down then across,
   so a long card does not leave a hole beside a short one */
@media (min-width: 52rem) {
  .lr .cards--pack { display: block; columns: 2; column-gap: 1.25rem; }
  .lr .cards--pack > .card { display: inline-block; width: 100%; margin: 0 0 1.25rem; break-inside: avoid; }
  .engage .cards--pack > .card { padding: 2rem 2.1rem; }
  .lr .cards--pack + .chap__end { margin-top: calc(var(--sp-7) - 1.25rem); }
}
@media (min-width: 52rem) { .lr .cards--pack + .lr-wide-card { margin-top: 0; } }

/* 10 Oct: the scoring tables, the action lists in Table 17, long reference links */
.lr table.lr-xwide { min-width: 980px; }
.lr table.lr-score td:not(:first-child), .lr table.lr-score th:not(:first-child) { text-align: center; }
.lr .fold table.lr-score td:first-child { min-width: 15rem; }
.lr table.lr-future td:nth-child(3) { min-width: 26rem; }
.engage .lr-acts { margin: 0; padding: 0; list-style: none; max-width: none; }
.engage .lr-acts li { margin: 0 0 .5rem; max-width: none; font-size: inherit; line-height: inherit; color: inherit; }
.engage .lr-acts li:last-child { margin-bottom: 0; }
.engage h4.lr-h4 { margin: var(--sp-6) 0 0; }
.lr .fold .tablewrap { margin: 0; }
.lr-refs a { overflow-wrap: anywhere; }
.lr table.lr-score th, .lr table.lr-score td { padding-left: .5rem; padding-right: .5rem; }
.lr table.lr-score th:first-child, .lr table.lr-score td:first-child { padding-left: .85rem; }
.lr table.lr-score thead th { letter-spacing: 0; }
.lr table.lr-score td:last-child { white-space: nowrap; }

/* the page photo, first thing under the banner */
.lr .lr-lead { margin: 0 0 var(--sp-7); }
.lr .lr-lead img { display: block; width: 100%; height: auto; border-radius: 28px; }
@media (max-width: 47.99rem) { .lr .lr-lead img { border-radius: 22px; } }
/* tables that share one fold keep their distance */
.lr .fold__body > .tablewrap + .tablewrap { margin-top: var(--sp-6); }