/* =============================================================================
   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: #f6ecd0; color: #6b5516; }  /* salinity: yellowish brown */
.tag--drought { background: #efe1d1; color: #6b3d18; }  /* drought: brown */
.tag--osmotic { background: #dbe8f4; color: #114b76; }  /* osmotic: ocean blue */
.tag--heat    { background: #f9dcdf; color: #8a1326; }  /* heat: crimson */
.tag--pb      { background: var(--leaf-100); color: var(--leaf-900); font-style: italic; }
.tag--biotic  { background: #fbdfd6; color: #9b2b12; }  /* fungi-related biotic stress: red */
.tag--fungi   { background: #e3f3fc; color: #1d5f84; }  /* microbial pesticide / fungicide: baby blue */
.tag--abiotic { background: #e4f2d9; color: #3b6a16; }  /* abiotic stress: green */
.tag--mold    { background: #ececea; color: #4a4a47; }  /* grey mold: grey */
.tag--biotic, .tag--fungi, .tag--abiotic, .tag--mold { white-space: normal; }  /* long Table 4 terms wrap */
.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); }


/* =============================================================================
   17 Oct: the students' colour key for the tables (Laws n Reg Prompts, FINAL).
   One system, three parts: the tier pills and the Total column in Table 6; the
   1~5 / Y / N scale and the Score band in Tables 8~12; and one colour per
   market, used in both Table 13 and the Kelpak table so a market keeps its
   colour wherever it appears. The grounds stay white and the fills stay light
   so the type keeps its contrast; the colour repeats what the cell already
   says in words, so nothing is carried by colour alone.
   ========================================================================== */

/* the shape shared by the tier pills, the scores and the Y/N marks */
.lr .tier, .lr .sc > b, .lr span.yn {
  display: inline-block;
  min-width: 1.9em;
  padding: .12em .62em;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
}
.lr .tier { min-width: 0; }

/* -------------------------------------------------- Table 6: tiers, total -- */
.tier--1 { background: #dcefdd; color: #1d5b2a; }   /* Tier 1: green */
.tier--2 { background: #f8edcb; color: #6a5309; }   /* Tier 2: yellow */
.tier--3 { background: #fae1cb; color: #8a4410; }   /* Tier 3: orange */

/* the Total column reads as the summary: a darker band than the white rows */
.lr table.lr-score td.lr-tot { background: #e8e8ed; }
.lr table.lr-score td.lr-tot b { color: var(--ink); }

/* ------------------------------------- Tables 8~12: the 1~5 scale and Y/N -- */
.lr .sc > b { color: inherit; }
.sc--1 > b { background: #f8dcda; color: #8a1f17; }   /* 1: red */
.sc--2 > b { background: #fae2cc; color: #8a4710; }   /* 2: orange */
.sc--3 > b { background: #f8eecb; color: #6a5509; }   /* 3: yellow */
.sc--4 > b { background: #ddefdc; color: #1f5c27; }   /* 4: green */
.sc--5 > b { background: #c9e4ca; color: #14401d; }   /* 5: dark green */
.yn--y { background: #ddefdc; color: #1f5c27; }       /* Yes: green */
.yn--n { background: #f8dcda; color: #8a1f17; }       /* No: red */

/* the Score row carries the band, and its cells drop their own cell padding
   tint so the row reads as one piece */
.lr table.lr-score tr.lr-scorerow > td { background: #e8e8ed; }
.lr table.lr-score tr.lr-scorerow > td:first-child b { color: var(--ink); }

/* --------------------------------------------- one colour for each market -- */
/* Each market's strong colour sits in its name chip; the row carries the same
   hue at a tenth of its strength. No two markets share a hue.               */
.mk--usa { --mk: #16628f; }   /* ocean blue */
.mk--phi { --mk: #8a6132; }   /* light brown */
.mk--tha { --mk: #6f54a0; }   /* light purple */
.mk--twn { --mk: #52706e; }   /* teal, slightly grey */
.mk--eu  { --mk: #b05f28; }   /* peachy orange */
.mk--vie { --mk: #137a8a; }   /* greenish blue */
.mk--idn { --mk: #93382f; }   /* brownish red */
.mk--mys { --mk: #9c3f85; }   /* light magenta */

.lr table.data tr.mk > td { background: color-mix(in srgb, var(--mk) 9%, #fff); }
.lr table.data tr.mk > td:first-child b, .lr .mkchip {
  display: inline-block;
  padding: .12em .66em;
  border-radius: 999px;
  background: var(--mk);
  color: #fff;
  font-size: .8125rem;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
}

/* =============================================================================
   17 Oct, second sheet (Laws n Reg Prompts FINAL, revised): every table keeps
   the market colours, Tables 3 and 4 stand side by side, and the rationale by
   market reads as justified columns.
   ========================================================================== */

/* the Total cell of a coloured market row: the same hue, a step darker */
.lr table.lr-score tr.mk > td.lr-tot { background: color-mix(in srgb, var(--mk) 20%, #fff); }

/* a market named in a heading cell or a list cell wears its chip */
.lr .mkchip { font-size: .75rem; letter-spacing: .01em; }
.lr table.lr-score thead th .mkchip { min-width: 2.9em; text-align: center; }
.lr .mkchips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .35rem; }
.lr td > .mkchips:first-child { margin-top: 0; }

/* Tables 3 and 4: before and after the Jamboree, side by side */
.lr-prepost { display: grid; gap: 1.25rem; align-items: start; }
.lr-prepost > .tablewrap { margin: 0; min-width: 0; }
#protectants { container-type: inline-size; }
@container (min-width: 56rem) {
  .lr-prepost { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .lr-prepost > .tablewrap:first-child { position: sticky; top: 5.5rem; }
  .lr .lr-prepost table, .lr .lr-prepost table.lr-wide { min-width: 0; width: 100%; }
  .lr .lr-prepost th, .lr .lr-prepost td { padding-left: .55rem; padding-right: .55rem; font-size: .8125rem; white-space: normal; }
  .lr .lr-prepost td .tag { white-space: normal; font-size: .75rem; border-radius: .7em; }
  .lr .lr-prepost thead th { font-size: .6875rem; letter-spacing: 0; }
}

/* Rationale by Market: one market a card, its colour in the name, the text
   set justified in two columns of a comfortable measure */
.lr .lr-rat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.engage .lr-rat > .card { padding: 1.9rem 2.2rem 1.6rem; columns: 2 22rem; column-gap: 2.6rem; }
.lr-rat__head { column-span: all; display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem .75rem; margin: 0 0 1rem; }
.engage .lr-rat .card__name {
  display: inline-block; margin: 0;
  padding: .2em .8em; border-radius: 999px;
  background: var(--mk); color: #fff;
  font-size: 1rem; line-height: 1.4;
}
.lr-rat__pts { font-size: .8125rem; font-weight: 650; color: color-mix(in srgb, var(--mk) 80%, #000); }
.engage .lr-rat > .card > p {
  margin: 0 0 .9rem;
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  line-height: 1.72;
}
.engage .lr-rat > .card > .lr-rat__head + p { margin-top: 0; }
@media (max-width: 47.99rem) { .engage .lr-rat > .card { padding: 1.4rem 1.3rem 1.1rem; } }

/* Organic Farming Compatibility (17 Oct night): the market cards reuse the
   rationale cards; the one card that covers Vietnam and Indonesia carries
   both markets' colours in its name.                                        */
.engage .lr-rat > .lr-org-two .card__name { background: linear-gradient(90deg, #137a8a 0 50%, #93382f 50% 100%); }