/* ==========================================================================
   M6 Capital — reports: the archive on Services (/services/#reports) and each /reports/<slug>/
   Builds on site.css tokens and components. Light theme only.
   ========================================================================== */

:root {
  /* Commodity colors (--mkt-*) are site tokens in site.css. */
  --highlighter: #FBEF6B;
}

/* ---------- Report hero ---------- */
.report-hero .container { padding-block: clamp(36px, 5vw, 64px); }
/* Report pages: the Reports photo (USDA wheat) as a dim backdrop under the hero's dark gradient,
   a wide crop made for this (wheat-sky-in-wide-*). Browsers without image-set() type() keep the
   default field texture. Below 980px the text runs across the whole hero, so the photo gets an
   even .86 veil instead of the left-to-right gradient (small text stays AA over the brightest wheat). */
@supports (background-image: image-set("x.webp" type("image/webp"))) {
  .report-hero {
    --hero-image: image-set(url("/static/img/photos/usda/wheat-sky-in-wide-1000.webp") type("image/webp"), url("/static/img/photos/usda/wheat-sky-in-wide-1000.jpg") type("image/jpeg"));
    background-position: center, 50% 40%, center;
  }
  @media (min-width: 720px) {
    .report-hero { --hero-image: image-set(url("/static/img/photos/usda/wheat-sky-in-wide-1600.webp") type("image/webp"), url("/static/img/photos/usda/wheat-sky-in-wide-1600.jpg") type("image/jpeg")); }
  }
  @media (max-width: 979px) {
    .report-hero { background: linear-gradient(rgba(43,38,34,.86), rgba(43,38,34,.86)), var(--hero-image) 50% 40% / cover no-repeat, var(--brand-taupe-900); }
  }
}
.report-hero h1 { font-size: var(--fs-3xl); max-width: 26ch; overflow-wrap: anywhere; }
.report-hero h1 .headline-line { display: block; }
.report-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.report-hero__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 0; color: var(--ink-inv-2); font-size: var(--fs-sm); }
.report-hero__meta time { color: #fff; font-weight: 600; }
.report-hero__meta .sep { opacity: .6; }
@media (max-width: 519px) { .report-hero__meta { flex-direction: column; align-items: flex-start; } .report-hero__meta .sep { display: none; } }

.tag--sample { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
/* Archived-sample notice under the title (front matter archived: true): a solid light panel on
   the dark hero so it reads first, not as fine print. */
.archived-notice {
  display: flex; gap: 12px; align-items: flex-start; max-width: 62ch; margin: 18px 0 0; padding: 12px 16px;
  border-radius: var(--radius); background: #FFF6DD; border: 1px solid #EBD9A6; border-left: 4px solid #D9A93A;
  color: #4A3A10; font-size: var(--fs-sm); line-height: 1.55;
}
.archived-notice svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: #8A6A16; }
.archived-notice strong { color: #3A2D08; }
/* .tag--special (dark) and .tag--lime are shared in site.css */

/* ---------- Report body layout ---------- */
.report-main { padding-block: clamp(28px, 5vw, 56px) clamp(40px, 6vw, 72px); }
.report-top { display: grid; gap: 16px; margin-bottom: clamp(24px, 4vw, 36px); }
@media (min-width: 720px) {
  .report-top--prices { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}
.report-top__main { display: grid; gap: 14px; align-content: start; min-width: 0; }

/* ---------- Outlook chips ---------- */
.outlooks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.outlooks__label { flex-basis: 100%; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
/* .outlook-chip itself is a shared component in site.css */

/* ---------- "Current prices" box (styled like the printed letter) ---------- */
.price-box {
  border: 1.5px solid var(--ink); border-radius: 3px; background: var(--surface); padding: 14px 16px 12px;
  font-family: var(--font-body); color: var(--ink);
}
.price-box__title { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0; margin: 0 0 6px; }
.price-box table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--fs-md); }
.price-box th { text-align: left; font-weight: 400; padding: 3px 0; }
.price-box td { text-align: right; padding: 3px 0 3px 8px; white-space: nowrap; }
.price-box td.price-box__chg { width: 1%; padding-left: 12px; }
.price-box .chg { display: inline-flex; align-items: center; gap: 3px; }
.price-box .chg__arrow { font-size: .7em; }
.price-box__note { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
.price-box__note a { color: var(--brand-taupe); }
.price-box--mini { padding: 12px 14px 10px; }
.price-box--mini table { font-size: var(--fs-sm); }

/* ---------- Report prose additions ---------- */
.report-body > :first-child { margin-top: 0; }
.prose .u { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--brand-lime-700); text-underline-offset: 4px; }
.prose mark { background: var(--highlighter); color: var(--ink); padding: .05em .15em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.prose sup { font-size: .68em; line-height: 0; }
.prose a { overflow-wrap: anywhere; }

/* Commodity sections: colored side label like the printed letter */
.mkt { --mkt-color: var(--line-strong); margin: 2.2em 0; padding-left: 16px; border-left: 6px solid var(--mkt-color); }
.mkt--corn { --mkt-color: var(--mkt-corn); }
.mkt--soybeans { --mkt-color: var(--mkt-soybeans); }
.mkt--wheat { --mkt-color: var(--mkt-wheat); }
.prose .mkt .mkt__label {
  display: inline-block; margin: 0 0 .5em; padding: 3px 12px; border-radius: 3px;
  background: var(--mkt-color); color: var(--ink);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; line-height: 1.4;
}
.mkt__body > :last-child { margin-bottom: 0; }
.prose .mkt__outlook { margin: 0 0 .35em; font-family: var(--font-body); font-size: var(--fs-md); font-style: italic; color: var(--ink-3); }
@media (min-width: 720px) {
  .mkt { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 20px; padding-left: 0; border-left: 0; }
  .prose .mkt .mkt__label {
    display: flex; align-items: center; justify-content: center; margin: 0; padding: 16px 0;
    writing-mode: vertical-rl; transform: rotate(180deg); /* reads bottom-to-top, as printed */
  }
}
@media (min-width: 1100px) { .mkt { margin-left: -56px; } }

/* "US-China Meetings" lead note. Italic with an underlined heading in print; on screen a
   long run of italics is hard to read and an underline reads as a link, so the note is set
   roman with a lime bar over the heading. */
.letter-note { margin: 0 0 2.2em; padding: 20px 22px; background: var(--surface-alt); border-left: 4px solid var(--brand-lime); border-radius: 0 var(--radius) var(--radius) 0; }
.prose .letter-note h2 { margin: 0 0 .5em; font-size: var(--fs-xl); text-decoration: none; }
.prose .letter-note h2::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 12px; border-radius: 2px; background: var(--brand-lime-700); }
.letter-note p { font-style: normal; }
.letter-note p:last-child { margin-bottom: 0; }
.letter-note strong { color: var(--brand-taupe-900); letter-spacing: .01em; }

.prose .placeholder { margin: 1.2em 0; font-family: var(--font-body); line-height: 1.55; }
.report-top .placeholder { margin: 0; }
.prose .chart-of-day-none { font-family: var(--font-body); font-size: var(--fs-sm); font-style: italic; color: var(--ink-3); margin: 1.2em 0; }

/* ---------- Figures ---------- */
.prose .report-figure { margin: 2em 0; }
.report-figure picture, .report-figure img { display: block; width: 100%; }
.report-figure img { height: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.report-figure__zoom { position: relative; display: block; border-radius: var(--radius); }
.report-figure__zoom::after {
  content: "Enlarge ⤢"; position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px;
  background: rgba(43, 38, 34, .82); color: #fff; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
}
.report-figure__zoom:hover img { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.prose .report-figure figcaption { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); margin-top: 10px; }
.report-figure__title { display: block; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
/* Source credit under a chart ("Chart: M6 Capital Management. Price data: AAA.") */
.report-figure__credit { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.report-callout {
  display: block; margin-top: 10px; padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: 3px;
  background: var(--surface); color: var(--ink); font-size: var(--fs-md); line-height: 1.5;
}
@media (min-width: 720px) {
  .report-figure--chart { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: center; }
  .prose .report-figure--chart figcaption { margin-top: 0; }
}
.figure-pair { display: grid; gap: 20px; margin: 2em 0; }
.figure-pair .report-figure { margin: 0; display: flex; flex-direction: column; }
.figure-pair .report-figure figcaption { order: -1; margin: 0 0 8px; }
/* A shared credit line under the pair spans both columns */
.figure-pair > .report-figure__meta { grid-column: 1 / -1; margin-top: 0; }
/* Columns sized so a landscape map (1200×850) and a portrait map (1000×1345) come out the
   same height, bottom-aligned, with no empty space under the shorter one */
@media (min-width: 640px) {
  .figure-pair { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: end; }
}
/* Wide figures break out of the text column by the same 56px on both sides as the
   commodity side labels (.mkt), so their left edges line up on every report.
   Data tables need the room and break out further. */
@media (min-width: 1100px) {
  .prose .report-figure--wide, .prose .figure-pair { margin-inline: -56px; }
}
@media (min-width: 900px) {
  .prose .report-figure--table { margin-inline: calc(50% - min(600px, 50vw - 40px)); }
}
.report-figure__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; margin: 10px 0 0; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.5; }
.report-figure__original { font-weight: 600; white-space: nowrap; }
.report-figure__original::after { content: " ↗"; }

/* ---------- China exports table ---------- */
/* position:relative keeps visually-hidden (absolute) cell text inside the scroll box,
   otherwise it widens the page on phones */
.export-table-wrap {
  position: relative;
  /* Scroll shadows: a soft edge shows on whichever side has more table to scroll to */
  background:
    linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(43,38,34,.22), rgba(43,38,34,0)) right center / 16px 100% no-repeat scroll,
    var(--surface);
}
.prose .export-table { font-size: var(--fs-xs); line-height: 1.4; }
.export-table caption {
  caption-side: top; text-align: left; padding: 12px 14px; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line);
  /* keep the title in view while the table scrolls sideways on phones */
  position: sticky; left: 0; max-width: calc(100vw - 2 * var(--gutter) - 2px); white-space: normal; background: var(--surface);
}
.data-table.export-table th, .data-table.export-table td { padding: 7px 8px; }
.export-table thead th { vertical-align: bottom; text-transform: none; letter-spacing: .02em; font-size: var(--fs-xs); color: var(--ink-2); }
.export-table tbody th, .export-table tfoot th, .export-table thead th:first-child {
  position: sticky; left: 0; z-index: 1; text-align: left; white-space: nowrap; background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
}
.export-table thead th:first-child { background: var(--surface-alt); z-index: 2; }
.export-table tbody th { font-weight: 600; color: var(--ink); }
.export-table tr.is-sub th { padding-left: 24px; font-weight: 400; color: var(--ink-2); }
.export-table tr.is-sub td { color: var(--ink-2); }
.export-table tbody tr:hover th { background: var(--brand-lime-50); }
.export-table .export-table__est { border-left: 2px solid var(--line-strong); }
.data-table.export-table .export-table__text { text-align: left; white-space: normal; min-width: 17ch; }
@media (min-width: 900px) {
  .export-table tbody th { white-space: normal; min-width: 19ch; }
  .data-table.export-table td.export-table__text:last-child, .data-table.export-table thead th:last-child { white-space: nowrap; min-width: 0; }
  .data-table.export-table th, .data-table.export-table td { padding-inline: 6px; }
  .data-table.export-table th:first-child { padding-left: 12px; }
  .export-table tr.is-sub th { padding-left: 22px; }
}
.export-table tfoot th, .export-table tfoot td { font-weight: 700; color: var(--ink); border-top: 2px solid var(--ink); border-bottom: 0; background: var(--surface-alt); }

/* ---------- Weather panel (replaces licensed subscriber maps) ---------- */
.wx-panel { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-alt); font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.6; }
.prose .wx-panel__maps { font-size: var(--fs-sm); color: var(--ink-2); }
.wx-note { margin: 0 0 14px; padding: 14px 16px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--surface); color: var(--ink); }
.wx-note p { margin: 0; }
.wx-note p + p { margin-top: .7em; }
.prose .wx-panel__link { margin: 0; }
.prose .wx-panel .link-arrow { color: var(--brand-taupe); }

/* ---------- Signature ---------- */
.letter-sign { display: flex; flex-direction: column; gap: 4px; margin-top: 2.2em; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.6; color: var(--ink-2); }
.letter-sign p { margin: 0; }

.source-links { list-style: none; padding-left: 0 !important; }
.source-links li { font-family: var(--font-body); font-size: var(--fs-md); }

/* ---------- End-of-report blocks ---------- */
.report-disclaimer {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 40px; padding: 16px 18px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-alt); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6;
}
.report-disclaimer svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--brand-taupe); margin-top: 2px; }
.report-disclaimer h2 { font-size: var(--fs-sm); margin: 0 0 4px; letter-spacing: .02em; }
.report-disclaimer p { margin: 0; }

.sample-note { margin-top: 20px; font-size: var(--fs-sm); }
.report-join { margin: 16px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }

/* Newer / older */
.report-pager { display: grid; gap: 16px; }
@media (min-width: 720px) { .report-pager { grid-template-columns: 1fr 1fr; } }
.report-pager__link { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: box-shadow .2s, border-color .2s; }
.report-pager__link:hover { color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow); }
.report-pager__link--older { text-align: right; }
@media (min-width: 720px) { .report-pager__link--older:only-child { grid-column: 2; } }
.report-pager__dir { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.report-pager__title { font-family: var(--font-display); font-weight: 700; line-height: 1.3; }
.report-pager__date { font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------- Report cards (index + related) ---------- */
.report-grid { list-style: none; margin: 0; padding: 0; }
.report-grid > li { display: flex; min-width: 0; }
.report-grid > li[hidden] { display: none; }
.report-card { position: relative; width: 100%; border-top: 4px solid var(--brand-lime); }
.report-card--special { border-top-color: var(--brand-taupe); }
.report-card:hover { box-shadow: var(--shadow); border-color: var(--line-strong); border-top-color: inherit; }
.report-card--daily:hover { border-top-color: var(--brand-lime); }
.report-card--special:hover { border-top-color: var(--brand-taupe); }
.report-card:focus-within { outline: 3px solid var(--brand-lime); outline-offset: 2px; }
.report-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--fs-sm); color: var(--ink-3); }
.report-card__title { font-size: var(--fs-lg); line-height: 1.3; margin: 4px 0 0; }
.report-card:hover .report-card__title { text-decoration: underline; text-decoration-color: var(--brand-lime-700); text-underline-offset: 3px; }
.report-card p { font-size: var(--fs-sm); }
.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.report-card__read::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.report-card__read:focus-visible { outline: none; }

/* Filter chips — work without JS via :target, enhanced by JS (aria-pressed) */
.filter-anchor { display: block; height: 0; overflow: hidden; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-2); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); cursor: pointer;
}
.filter-chip:hover { border-color: var(--brand-taupe); color: var(--ink); }
.filter-chip__count { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); padding: 1px 7px; border-radius: 999px; background: var(--surface-alt); color: var(--ink-2); }
.filter-chip__check { display: none; }
/* active state: no-JS default = All; :target switches it; JS uses aria-pressed */
.report-browse:not(.is-enhanced) .filter-chip[data-filter="all"],
#reports-daily:target ~ .report-browse:not(.is-enhanced) .filter-chip[data-filter="daily"],
#reports-special:target ~ .report-browse:not(.is-enhanced) .filter-chip[data-filter="special"],
.report-browse.is-enhanced .filter-chip[aria-pressed="true"] {
  background: var(--brand-taupe-900); border-color: var(--brand-taupe-900); color: #fff;
}
#reports-daily:target ~ .report-browse:not(.is-enhanced) .filter-chip[data-filter="all"],
#reports-special:target ~ .report-browse:not(.is-enhanced) .filter-chip[data-filter="all"] {
  background: var(--surface); border-color: var(--line-strong); color: var(--ink-2);
}
.report-browse:not(.is-enhanced) .filter-chip[data-filter="all"] .filter-chip__check,
#reports-daily:target ~ .report-browse:not(.is-enhanced) .filter-chip[data-filter="daily"] .filter-chip__check,
#reports-special:target ~ .report-browse:not(.is-enhanced) .filter-chip[data-filter="special"] .filter-chip__check,
.report-browse.is-enhanced .filter-chip[aria-pressed="true"] .filter-chip__check { display: inline; }
#reports-daily:target ~ .report-browse:not(.is-enhanced) .filter-chip[data-filter="all"] .filter-chip__check,
#reports-special:target ~ .report-browse:not(.is-enhanced) .filter-chip[data-filter="all"] .filter-chip__check { display: none; }
#reports-daily:target ~ .report-browse:not(.is-enhanced) .report-grid > li:not([data-type="daily"]),
#reports-special:target ~ .report-browse:not(.is-enhanced) .report-grid > li:not([data-type="special"]) { display: none; }