/* Shared case-study styling — used by every page under /cases/.
 *
 * Scoped entirely under `.case` so nothing here can leak
 * into or override the main site stylesheet.
 *
 * Design system is inherited from css/style.css (--paper, --ink, --clay, --sage,
 * --serif/--sans/--mono and the two easing curves). This file only adds the
 * report-specific furniture: KPI cards, data bars, the cost ledger, verdict boxes.
 *
 * Charts are rendered by js/case-walking-pad.js as inline SVG because the site's
 * CSP is script-src 'self' — no chart library from a CDN, no inline <script>.
 */

/* ── Shell ─────────────────────────────────────────────────────────────── */
.case {
  max-width: 1000px;
  margin: 0 auto;
  padding: 52px 24px 96px;
}

.case-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 38px;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.case-top a { color: var(--muted); display: inline-flex; align-items: center; gap: 7px; transition: color .2s var(--ease); }
.case-top a:hover { color: var(--clay); }
.case-id { color: var(--line); }

/* ── Verdict hero ──────────────────────────────────────────────────────── */
.case .hero {
  padding: 38px 34px;
  margin-bottom: 18px;
  background: var(--sheet);
  border: 1px solid var(--line);
}
.case .hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.case .hero h1 {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.9vw, 2.55rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.case .lede {
  max-width: 640px;
  margin: 0 0 26px;
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.8;
}
.case .lede strong { color: var(--clay); }

.verdict-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.case .verdict {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid var(--clay);
  background: rgba(198, 75, 45, .06);
  color: var(--clay);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
}
.case .verdict i { font-size: 1rem; }
.verdict-note { max-width: 480px; color: var(--muted); font-size: .7rem; line-height: 1.6; }

/* ── KPI grid ──────────────────────────────────────────────────────────── */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px;
  margin-bottom: 54px;
  background: var(--line);
  border: 1px solid var(--line);
}
.case .kpi { position: relative; padding: 20px 18px 18px; background: var(--sheet); }
.kpi-icon { position: absolute; top: 18px; right: 16px; color: var(--line); font-size: 1.05rem; }
.case .k { display: block; margin: 0 0 8px; color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.case .v { display: block; color: var(--ink); font-family: var(--mono); font-size: 1.42rem; font-weight: 500; line-height: 1.1; }
.case .n { display: block; margin-top: 7px; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.kpi.is-good .v { color: var(--sage); }
.kpi.is-bad .v { color: var(--clay); }

/* ── Sections ──────────────────────────────────────────────────────────── */
.case .sec { margin-bottom: 54px; }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.sec-head .no { color: var(--clay); font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; }
.sec-head h2 { margin: 0; font-family: var(--serif); font-size: 1.32rem; font-weight: 600; letter-spacing: -.015em; }
.sec-sub { max-width: 680px; margin: 0 0 22px; color: var(--muted); font-size: .8rem; line-height: 1.75; }
.sec-sub strong { color: var(--ink); }

/* ── Cards & charts ────────────────────────────────────────────────────── */
.case .card, .case .chart {
  padding: 22px 22px 20px;
  background: var(--sheet);
  border: 1px solid var(--line);
}
.chart-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
  font-size: .74rem;
  font-weight: 700;
}
.chart-title i { color: var(--clay); font-size: 1rem; }
.chart-hint { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: .55rem; font-weight: 400; }
.chart-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; line-height: 1.65; }
.chart-note strong { color: var(--clay); }
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.chart-svg { display: block; width: 100%; height: auto; }
.chart-tick { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
.chart-peak { fill: var(--clay); font-family: var(--mono); font-size: 12px; font-weight: 500; }

/* ── Horizontal bars ───────────────────────────────────────────────────── */
.bars { display: grid; gap: 2px; }
.bar-row {
  display: grid;
  grid-template-columns: 132px 1fr 66px;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.bar-row:last-child { border-bottom: 0; }
.bar-lab { color: var(--ink); font-size: .76rem; }
.bar-track { display: block; height: 12px; background: var(--paper-2); }
.bar-fill { display: block; height: 100%; background: var(--clay); }
.bar-fill.sage { background: var(--sage); }
.bar-val { color: var(--ink); font-family: var(--mono); font-size: .74rem; text-align: right; }

/* ── Cost ledger (the panel that carries the verdict) ──────────────────── */
.wf { border-top: 1px solid var(--ink); }
/* Label and value used to sit at opposite ends of a ~900px row with nothing
   between them, so the eye had to jump a 600px gap to pair "FBA 配送费" with
   its number. A dotted leader does the travelling instead, which is what an
   invoice or a printed statement does. The label grows to fill the row and
   carries the dots, so no markup changes are needed. */
.wf-head,
.wf-row,
.wf-total { display: flex; align-items: baseline; gap: 0; }
.wf-lab { flex: 1 1 auto; min-width: 0; }
.wf-lab::after {
  content: "";
  flex: 1 1 auto;
  align-self: center;
  margin: 0 12px;
  border-bottom: 1px dotted var(--line);
}
.wf-price,
.wf-val { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.wf-head {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .68rem;
}
.wf-price { color: var(--ink); font-family: var(--mono); font-size: 1rem; font-weight: 500; }
.wf-row { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .78rem; }
.wf-lab { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); flex: 1 1 auto; min-width: 0; }
.wf-lab i { color: var(--muted); font-size: .8rem; }
.wf-val { color: var(--clay); font-family: var(--mono); font-size: .84rem; }
.wf-total {
  margin-top: 3px;
  padding: 16px 0 4px;
  border-top: 2px solid var(--ink);
}
.wf-total .wf-lab { font-weight: 700; }
.wf-total .wf-lab i { color: var(--ink); }
.wf-total .wf-val { color: var(--clay); font-size: 1.75rem; font-weight: 500; }

/* ── Ratio trio ────────────────────────────────────────────────────────── */
.ratio-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; background: var(--line); border: 1px solid var(--line); }
.case .ratio { display: grid; gap: 3px; padding: 22px 18px; background: var(--sheet); }
.case .ratio > i { color: var(--line); font-size: 1.15rem; }
.case .r-v { margin-top: 4px; color: var(--ink); font-family: var(--mono); font-size: 1.7rem; font-weight: 500; line-height: 1.05; }
.case .r-k { color: var(--ink); font-size: .72rem; font-weight: 700; }
.case .r-n { margin-top: 5px; color: var(--muted); font-size: .66rem; line-height: 1.6; }
.ratio.is-bad .r-v, .ratio.is-bad > i { color: var(--clay); }

/* ── Callouts ──────────────────────────────────────────────────────────── */
.case .callout {
  margin-top: 20px;
  padding: 17px 20px;
  border-left: 3px solid var(--clay);
  background: var(--paper-2);
  font-size: .8rem;
  line-height: 1.8;
}
.case .callout strong { color: var(--clay); }
.case .callout.warn { border-left-color: var(--sand); }
.case .callout.warn strong { color: var(--ink); }

/* ── Fact strip ────────────────────────────────────────────────────────── */
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 16px; background: var(--line); border: 1px solid var(--line); }
.fact { display: grid; gap: 5px; padding: 18px; background: var(--sheet); }
.fact i { color: var(--clay); font-size: 1.1rem; }
.fact b { font-size: .76rem; line-height: 1.45; }
.fact span { color: var(--muted); font-size: .66rem; line-height: 1.55; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.table-card { padding: 4px 20px 16px; }
.kw { width: 100%; border-collapse: collapse; font-size: .76rem; }
.kw th {
  padding: 13px 12px;
  border-bottom: 2px solid var(--ink);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.kw th:hover { color: var(--ink); }
.kw-sort{display:inline-flex;align-items:center;gap:6px;max-width:100%;border:0;padding:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;text-transform:inherit;white-space:inherit;cursor:pointer}
.kw th.num .kw-sort{width:100%;justify-content:flex-end;text-align:right}
.kw-sort span{color:var(--clay);font-size:.85em}
.kw-sort:focus-visible{outline:2px solid var(--clay);outline-offset:4px;color:var(--ink)}
.kw th.num, .kw td.num { text-align: right; }
.kw td { padding: 11px 12px; border-bottom: 1px solid var(--line); }
.kw tbody tr:hover { background: var(--paper); }
.kw td.num { font-family: var(--mono); white-space: nowrap; }
.kw td:first-child { font-weight: 500; }

/* ── Verdict split boxes ───────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.case .box { padding: 22px; background: var(--sheet); border: 1px solid var(--line); }
.case .box h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; font-family: var(--serif); font-size: 1rem; font-weight: 600; }
.case .box h3 i { font-size: 1.1rem; }
.case .box p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.75; }
.case .box p strong { color: var(--ink); }
.case .box.no { border-top: 3px solid var(--clay); }
.case .box.no h3 i { color: var(--clay); }
.case .box.yes { border-top: 3px solid var(--sage); }
.case .box.yes h3 i { color: var(--sage); }

/* ── Facts / assumptions / unknowns ────────────────────────────────────── */
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; background: var(--line); border: 1px solid var(--line); }
.tri > div { padding: 20px 18px; background: var(--sheet); }
.tri h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--muted); font-family: var(--mono); font-size: .58rem; font-weight: 400; letter-spacing: .09em; text-transform: uppercase; }
.tri h4 i { color: var(--clay); font-size: .95rem; }
.tri ul { margin: 0; padding-left: 15px; }
.tri li { margin-bottom: 6px; font-size: .72rem; line-height: 1.6; }

.foot-note {
  display: flex;
  gap: 10px;
  margin-top: 34px;
  padding: 17px 19px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.7;
}
.foot-note i { flex: 0 0 auto; color: var(--clay); font-size: .95rem; margin-top: 2px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .chart-row, .split, .tri, .ratio-row, .fact-grid { grid-template-columns: 1fr; }
  .case .ratio > i { display: none; }
}

@media (max-width: 620px) {
  .case { padding: 34px 16px 64px; }
  .case .hero { padding: 26px 20px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .case .v { font-size: 1.2rem; }
  .bar-row { grid-template-columns: 104px 1fr 58px; gap: 9px; }
  .bar-lab { font-size: .7rem; }
  .wf-total .wf-val { font-size: 1.4rem; }
  .kw { font-size: .68rem; }
  .kw th, .kw td { padding: 9px 7px; }
  .kw th:nth-child(4), .kw td:nth-child(4) { display: none; }
  .chart-hint { display: none; }
}

@media print {
  .case-top { display: none; }
  .case { max-width: none; padding: 0; }
  .case .card, .case .chart, .case .hero, .kpis, .ratio-row, .tri, .split { break-inside: avoid; }
  .case .hero, .case .card, .case .chart, .case .box, .case .kpi, .case .ratio, .tri > div { background: #fff; }
}

.case-next-step{margin-top:64px;padding:clamp(28px,5vw,56px);border-top:3px solid var(--clay);background:var(--paper-2)}
.case-next-step .eyebrow{margin:0 0 14px}
.case-next-step h2{max-width:16em;margin:0 0 14px;font-family:var(--serif);font-size:clamp(1.8rem,3.6vw,3.2rem);font-weight:500;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.case-next-step>p:not(.eyebrow){max-width:620px;margin:0;color:var(--muted);font-size:.82rem;line-height:1.8}
.case-next-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px}
.case-next-primary{display:inline-flex;min-height:48px;align-items:center;gap:12px;padding:12px 16px;background:var(--clay);color:#fff;font-size:.72rem;font-weight:700;transition:background .2s ease,transform .2s ease}
.case-next-primary:hover{background:var(--clay-dark);transform:translateY(-2px)}
.case-next-secondary{color:var(--clay-dark);font-size:.75rem;text-decoration:underline;text-underline-offset:4px}
@media(max-width:620px){.case-next-step{margin-top:42px;padding:24px 18px}.case-next-actions{align-items:stretch;flex-direction:column;gap:16px}.case-next-primary{justify-content:center}}

/* ── Category composition (one category, two businesses) ───────────────── */
.comp { display: grid; gap: 14px; }
.comp-seg { display: grid; gap: 6px; }
.comp-bar { display: block; height: 14px; background: var(--paper-2); }
.comp-fill { display: block; height: 100%; background: var(--sage); opacity: .55; }
.comp-seg.is-focus .comp-fill { background: var(--clay); opacity: 1; height: 18px; }
.comp-seg.is-focus .comp-bar { height: 18px; }
.comp-lab { font-size: .78rem; color: var(--ink); }
.comp-seg.is-focus .comp-lab { font-weight: 700; color: var(--clay); }
.comp-val { color: var(--muted); font-family: var(--mono); font-size: .66rem; }

/* ── Price ladder: the decision table ─────────────────────────────────── */
.ladder { border-top: 1px solid var(--ink); }
.ladder-row {
  display: grid;
  grid-template-columns: 92px 1fr 1fr 96px;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.ladder-row.is-pass { background: rgba(95, 116, 94, .07); }
.ladder-price { font-family: var(--mono); font-size: .92rem; font-weight: 500; color: var(--ink); }
.ladder-cell { display: grid; gap: 2px; }
.ladder-cell b { font-family: var(--mono); font-size: .84rem; font-weight: 500; color: var(--clay); }
.ladder-row.is-pass .ladder-cell b { color: var(--sage); }
.ladder-cell i { font-style: normal; font-size: .6rem; color: var(--muted); letter-spacing: .04em; }
.ladder-flag {
  justify-self: end;
  padding: 4px 9px;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clay);
  border: 1px solid var(--clay);
}
.ladder-row.is-pass .ladder-flag { color: #fff; background: var(--sage); border-color: var(--sage); }

@media (max-width: 620px) {
  .ladder-row { grid-template-columns: 74px 1fr 88px; gap: 9px; }
  .ladder-cell:nth-child(3) { display: none; }
  .ladder-price { font-size: .8rem; }
}

/* ── Hero product image ────────────────────────────────────────────────────
   These pages carry a lot of numbers, and a picture of the actual object is what
   makes the subject concrete before the data starts. The images are generated
   studio-style product shots, hosted locally: the CSP is img-src 'self' data:, so
   a marketplace CDN image would not load, and re-hosting a seller's own product
   photo would be their copyright.
   No blend mode here — a photo is a photo, and multiply would darken the whole
   frame rather than merge it into the paper. */
.case .hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 28px;
  align-items: start;
}
.case .hero-figure { margin: 0; }
.case .hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.case .hero-figure figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}
/* Below this width the two columns squeeze the lede; the drawing is a supporting
   element, so it goes beneath rather than competing for the line length. */
@media (max-width: 760px) {
  .case .hero-main { grid-template-columns: 1fr; gap: 18px; }
  .case .hero-figure { max-width: 180px; margin: 0 auto; }
}

/* ── GEO blocks ───────────────────────────────────────────────────────────
   Three additions that exist for machine readers as much as human ones:
   a TL;DR the AI can quote verbatim, an FAQ that matches question-shaped
   retrieval, and links between reviews so a crawler can reach all of them.
   They also help humans: the summary answers "should I read this" in one look. */
.tldr {
  margin: 0 0 18px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--clay);
  background: var(--sheet);
}
.tldr h2 { margin: 0 0 10px; font-family: var(--mono); font-size: .6rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); }
.tldr p { margin: 0 0 8px; font-size: .84rem; line-height: 1.8; }
.tldr p:last-child { margin: 0; color: var(--muted); font-size: .68rem; }
.tldr strong { color: var(--clay); }

.faq { margin-top: 18px; }
.faq h3 { margin: 0 0 6px; font-size: .84rem; font-weight: 700; }
.faq p { margin: 0 0 16px; color: var(--muted); font-size: .78rem; line-height: 1.75; }
.faq p:last-child { margin-bottom: 0; }

.related { display: grid; gap: 1px; margin-top: 18px; background: var(--line); border: 1px solid var(--line); }
.related a { display: block; padding: 14px 18px; background: var(--sheet); text-decoration: none; transition: background .2s var(--ease); }
.related a:hover { background: var(--paper); }
.related b { display: block; font-size: .82rem; font-weight: 700; }
.related span { display: block; margin-top: 3px; color: var(--muted); font-size: .68rem; }

/* Cross-link from a case review to its answer-shaped /market/ page.
   Those pages exist because OpenAI/Google answer engines cite one-page-per-keyword
   summaries, not narrative reviews - see SEO-LEDGER Round 18. */
.market-link{margin:18px 0 0;padding:13px 16px;border:1px solid var(--line);background:var(--sheet);display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em}
.market-link a{color:var(--clay)}
.market-link a:hover{border-bottom:1px solid currentColor}

/* ── Order CTA ────────────────────────────────────────────────────────────
   The leak this closes: a reader finishing a full category review used to be
   offered a free image checker and an app download. Free tools are a good
   second action, not the first one -- the warmest visitor on the site was
   never shown the paid service at all. This block sits after the conclusion
   and before the FAQ, so the offer arrives while the work is still on screen. */
.order-cta {
  margin: 34px 0 0;
  padding: 30px 28px 26px;
  border: 1px solid var(--line);
  background: var(--sheet);
}
.order-cta-rule { width: 46px; height: 3px; background: var(--clay); margin-bottom: 18px; }
.order-cta-kicker { margin: 0 0 10px; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); }
.order-cta h2 { margin: 0 0 12px; font-family: var(--serif); font-size: clamp(1.25rem,2.4vw,1.75rem); font-weight: 500; line-height: 1.28; letter-spacing: -.01em; }
.order-cta > p { margin: 0 0 18px; max-width: 60ch; font-size: .82rem; line-height: 1.8; color: var(--muted); }
.order-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border: 1px solid var(--clay); background: var(--clay);
  color: #fff; font-size: .82rem; font-weight: 700; text-decoration: none;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.order-cta-btn:hover { background: var(--clay-dark); border-color: var(--clay-dark); transform: translateY(-1px); }
.order-cta-note { margin: 14px 0 0 !important; font-size: .72rem !important; color: var(--muted); }
.order-cta-alt { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.order-cta-alt a { color: var(--muted); font-size: .72rem; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.order-cta-alt a:hover { color: var(--clay-dark); border-color: var(--clay-dark); }
@media (max-width:640px) { .order-cta { padding: 24px 20px 20px; } .order-cta-btn { display: flex; justify-content: center; width: 100%; } }