/* ==========================================================================
   Visuals for data-heavy case studies (the pages in work/).
   Loaded after styles.css and uses its color tokens.
   ========================================================================== */

.h-sm { font-size: 1.25rem; }

/* ---------- Illustrative P&L waterfall ---------- */

.statement {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1rem 1rem;
}
@media (min-width: 640px) {
  .statement { padding: 1.5rem 1.5rem 1.1rem; }
}
.statement-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 0.6rem;
}
.statement-head h2 { font-size: 1.0625rem; margin: 0; }
.mono-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.wf { display: grid; gap: 4px; }
.wf-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr 3.25rem;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
}
@media (min-width: 640px) {
  .wf-row {
    grid-template-columns: minmax(150px, 230px) 1fr 64px;
    gap: 14px;
    font-size: 0.9rem;
  }
}
.wf-lbl { font-weight: 500; line-height: 1.25; }
.wf-lbl small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--muted);
}
.wf-track { position: relative; height: 20px; }
.wf-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; }
.wf-bar.pos { background: var(--accent); }
.wf-bar.neg { background: var(--negative); }
.wf-bar.total { background: var(--text); }
.wf-amt {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wf-amt.neg { color: var(--negative); }
.wf-row.subtotal { border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; }
.wf-row.final { border-top: 2px solid var(--text); padding-top: 6px; margin-top: 4px; }
.wf-row.subtotal .wf-lbl,
.wf-row.final .wf-lbl { font-weight: 700; }

/* ---------- Sales channels ---------- */

.channels {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  gap: 1.5rem 2rem;
}
@media (min-width: 640px) { .channels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .channels { grid-template-columns: repeat(4, 1fr); } }
.channels > li {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  border-top: 2px solid var(--accent);
  padding-top: 1rem;
}
.channels h3 { margin: 0; }
.channel-src {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--accent);
}
.channels p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }

/* ---------- Six-stage pipeline ---------- */

.pipe {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 640px) { .pipe { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pipe { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .pipe { grid-template-columns: repeat(6, 1fr); } }
.pipe > li {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.1rem 1rem 1.25rem;
  background: var(--surface);
}
.pipe > li::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}
.pipe h3 { margin: 0; font-size: 1.0625rem; }
.pipe p { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--muted); }

/* ---------- Deep dives: text beside an illustration ---------- */

.dive {
  display: grid;
  gap: 1.5rem;
  align-items: start;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.dive:first-of-type { margin-top: 1rem; }
@media (min-width: 960px) {
  .dive { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem; }
}
.dive h3 { margin: 0 0 0.75rem; font-size: 1.25rem; }
.dive .prose p { font-size: 1rem; }
.dive code {
  font-family: var(--font-mono);
  font-size: 0.84em;
  background: var(--fill);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}
.panel table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; }
.panel th,
.panel td {
  padding: 0.55rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.panel th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--fill);
}
.panel td { font-family: var(--font-mono); line-height: 1.45; }
.panel tr:last-child td { border-bottom: 0; }

.cs-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.cs-tag.map { background: var(--accent-soft); color: var(--accent); }
.cs-tag.skip { background: var(--fill); color: var(--muted); }
.cs-tag.flag { background: var(--negative-soft); color: var(--negative); }
.cs-tag.est { background: var(--estimate-soft); color: var(--estimate); }

/* Overhead allocation */
.alloc { display: grid; gap: 0.85rem; padding: 1.25rem; }
.alloc-row {
  display: grid;
  grid-template-columns: 5.75rem 1fr 4.5rem;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.8125rem;
}
.alloc-row .sku,
.alloc-row .amount { font-family: var(--font-mono); }
.alloc-row .amount { text-align: right; font-variant-numeric: tabular-nums; }
.alloc-bar {
  display: flex;
  height: 18px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--fill);
}
.alloc-bar span { display: block; height: 100%; background: var(--accent); }
.alloc-foot {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
  border-top: 1px dashed var(--border);
  padding-top: 0.75rem;
}

/* Actual vs. estimate timeline */
.months {
  list-style: none;
  margin: 0;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
@media (min-width: 560px) { .months { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .months { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.months > li {
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 5.75rem;
  padding: 0.6rem 0.5rem;
  border-radius: 3px;
}
.months b { font-size: 0.9375rem; }
.months span { font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.35; }
.months .none { background: var(--fill); color: var(--muted); }
.months .act { background: var(--accent-soft); color: var(--accent); }
.months .est {
  background: var(--estimate-soft);
  color: var(--estimate);
  outline: 1px dashed var(--estimate);
  outline-offset: -1px;
}
.legend-note {
  margin: 0;
  padding: 0 1.25rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- Reports that shipped ---------- */

.reports { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 2px solid var(--text); }
.reports > li {
  display: grid;
  gap: 0.6rem 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 640px) {
  .reports > li { grid-template-columns: 1fr 1fr; }
  .reports > li ul { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .reports > li { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr); }
  .reports > li ul { grid-column: auto; }
}
.reports h3 { margin: 0; }
.report-channel {
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
}
.reports p { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.reports ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}
.reports ul li::before { content: "— "; color: var(--border); }

/* ---------- Outcomes ---------- */

.outcomes {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  gap: 1.5rem 2.25rem;
}
@media (min-width: 900px) { .outcomes { grid-template-columns: repeat(3, 1fr); } }
.outcomes > li {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  border-top: 3px solid var(--accent);
  padding-top: 1rem;
}
.outcomes h3 { margin: 0; }
.outcomes p { margin: 0; font-size: 0.975rem; color: var(--muted); }

/* ---------- Stack ---------- */

.stack-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stack-list li {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
}



/* These lists are grids with their own gaps; drop the generic case-study list spacing. */
.channels > li, .pipe > li, .reports > li, .reports ul li,
.outcomes > li, .stack-list li, .months > li { margin: 0; }

@media (max-width: 400px) {
  .panel th, .panel td { padding: 0.5rem 0.6rem; }
  .cs-tag { white-space: normal; }
}

/* ==========================================================================
   Order splitter and PO triage (work/sellercloud-order-splitter.html,
   work/vendor-po-triage.html)
   ========================================================================== */

.cs-body { max-width: 52rem; }
.cs-body > p { max-width: var(--measure); }
.cs-body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--accent-soft);
  padding: 1px 5px;
  border-radius: 3px;
}

/* The two manual chores */
.chores {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 680px) { .chores { grid-template-columns: 1fr 1fr; } }
.chores > li:only-child { grid-column: 1 / -1; }
.chores > li { margin: 0; border-top: 3px solid var(--text); padding-top: 0.9rem; }
.chores h3 { margin: 0 0 0.6rem; }
.chores ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.975rem; }
.chores ul li + li { margin-top: 0.4rem; }

/* Architecture diagram: wide version on tablets and up, tall version on phones. */
.arch { margin: 2.5rem 0 0; }
.arch-box {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.arch svg { display: block; width: 100%; height: auto; }
.arch .arch-wide { display: none; }
@media (min-width: 720px) {
  .arch .arch-wide { display: block; }
  .arch .arch-tall { display: none; }
}
.arch-tall { max-width: 26rem; margin-inline: auto; }
.arch figcaption { margin-top: 0.75rem; max-width: 70ch; font-size: 0.875rem; color: var(--dim); }
.d-box { fill: var(--surface); stroke: var(--text); stroke-width: 1.5; }
.d-box.alt { fill: var(--accent-soft); stroke: var(--accent); }
.d-box.ext { fill: var(--bg); stroke: var(--dim); stroke-dasharray: 5 4; }
.d-db { fill: var(--estimate); stroke: var(--on-estimate); stroke-width: 1.5; }
.d-t { fill: var(--text); font-family: var(--font-sans); font-weight: 700; font-size: 15px; }
.d-db-t { fill: var(--on-estimate); font-family: var(--font-sans); font-weight: 700; font-size: 15px; }
.d-s { fill: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.d-db-s { fill: var(--on-estimate); font-family: var(--font-mono); font-size: 11px; }
.d-l { fill: var(--dim); font-family: var(--font-mono); font-size: 10.5px; }
.d-a { stroke: var(--muted); stroke-width: 1.4; fill: none; }
.d-head { fill: var(--muted); }

/* Numbered steps */
.steps { list-style: none; counter-reset: s; margin: 1.25rem 0 0; padding: 0; }
.steps > li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}
.steps > li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--accent);
  padding-top: 3px;
}
.steps b { display: block; font-weight: 600; margin-bottom: 2px; }
.steps span { color: var(--muted); font-size: 0.975rem; }

.callout {
  margin: 1.5rem 0 0.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.callout .eyebrow { margin-bottom: 0.4rem; color: var(--accent); }
.callout p { margin: 0; font-size: 0.975rem; color: var(--muted); }

/* Output column chips */
.col-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0.9rem 0 0.4rem; padding: 0; }
.col-chips li {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 3px 9px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.col-chips li.src { border-color: var(--accent); color: var(--accent); }
.col-chips li.hl { background: var(--estimate); border-color: var(--estimate); color: var(--on-estimate); }
.chip-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.85rem; color: var(--dim); }
.chip-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 1px solid var(--accent);
}
.chip-legend i.calc { background: var(--estimate); border-color: var(--estimate); }

/* Illustrative PO sheet */
.sheet {
  margin-top: 0.9rem;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sheet table { border-collapse: collapse; width: 100%; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.sheet caption {
  caption-side: bottom;
  text-align: left;
  padding: 0.6rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--dim);
}
.sheet th,
.sheet td { padding: 0.5rem 0.75rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
.sheet th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--bg);
}
.sheet th.n, .sheet td.n { text-align: right; }
.sheet td.n, .sheet td.id { font-family: var(--font-mono); font-size: 0.8125rem; }
.sheet tbody tr:last-child td { border-bottom: 0; }
.sheet .accept { background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--border) 6px 7px); }
.pill { display: inline-block; font-family: var(--font-mono); font-size: 0.75rem; padding: 1px 8px; border-radius: 999px; }
.pill.ok { background: var(--positive-soft); color: var(--positive); }
.pill.bad { background: var(--negative-soft); color: var(--negative); }

/* Engineering decisions */
.decisions { display: grid; gap: 1.5rem 2.25rem; margin-top: 1rem; }
@media (min-width: 680px) { .decisions { grid-template-columns: 1fr 1fr; } }
.decisions h3 { margin: 0 0 0.4rem; font-size: 1.125rem; }
.decisions p { margin: 0; font-size: 0.975rem; color: var(--muted); }

/* Outcome list */
.outcome-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.outcome-list li {
  position: relative;
  margin: 0;
  padding: 0.85rem 0 0.85rem 1.75rem;
  border-top: 1px solid var(--border);
}
.outcome-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: 14px;
  height: 6px;
  background: var(--estimate);
}

/* Phones: show each PO row as a small labelled card instead of a wide table row. */
@media (max-width: 767px) {
  .sheet table, .sheet tbody, .sheet tr, .sheet td { display: block; }
  .sheet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sheet tbody tr { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
  .sheet tbody tr:last-child { border-bottom: 0; }
  .sheet td,
  .sheet td.n {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0.75rem;
    border: 0;
    text-align: right;
    white-space: normal;
  }
  .sheet td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dim);
    text-align: left;
  }
  .sheet td.accept { min-height: 1.6rem; }
}

/* ==========================================================================
   Marketplace profit engine (work/marketplace-profit-engine.html)
   ========================================================================== */

.mp-col { max-width: var(--measure); }
.mp-col code,
.mp-rules code,
.mp-jobs code,
.mp-decisions code {
  font-family: var(--font-mono);
  font-size: 0.84em;
  background: var(--fill);
  padding: 1px 6px;
  border-radius: 4px;
}
.lead strong { color: var(--text); font-weight: 600; }

/* Three questions, three systems */
.mp-questions {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 768px) { .mp-questions { grid-template-columns: repeat(3, 1fr); } }
.mp-questions > li { margin: 0; display: grid; gap: 0.5rem; align-content: start; padding: 1.25rem; background: var(--surface); }
.mp-questions .src { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--estimate); }
.mp-questions .q { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.mp-questions .gap { font-size: 0.95rem; line-height: 1.5; color: var(--muted); }

/* Architecture: SVG from 900px up, stacked flows below. */
.arch-mp .arch-wide { display: none; }
@media (min-width: 900px) {
  .arch-mp .arch-wide { display: block; }
  .arch-mp .mp-lanes { display: none; }
}
.d-src { fill: var(--estimate-soft); stroke: var(--estimate); stroke-width: 1.2; }
.d-core { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.4; }
.d-box.mp { stroke: var(--border); stroke-width: 1.2; }
.d-title { font-family: var(--font-sans); font-weight: 700; font-size: 14px; fill: var(--text); }
.d-sub { font-family: var(--font-mono); font-size: 10.5px; fill: var(--muted); }
.d-col { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; fill: var(--muted); }
.d-line { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.d-line.hot { stroke: var(--accent); stroke-width: 1.6; }
.d-arrow { fill: var(--muted); }
.d-arrow.hot { fill: var(--accent); }

.mp-lanes { display: grid; gap: 1.5rem; }
.mp-lane-label { margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mp-lanes .flow > li.src { border-left-color: var(--estimate); }
.mp-lanes .flow ol { margin: 0.4rem 0 0; padding-left: 1.1rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.mp-lanes .flow ol li { margin: 0; }

/* Ingestion jobs */
.mp-jobs { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 768px) { .mp-jobs { grid-template-columns: repeat(2, 1fr); } }
.mp-job {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.6rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.mp-job .file { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); word-break: break-all; }
.mp-job h3 { margin: 0; }
.mp-job p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--muted); }
.mp-job ul { margin: 0; padding-left: 1.1rem; font-size: 0.925rem; line-height: 1.5; }
.mp-job ul li { margin: 0 0 0.25rem; }
.mp-job .window {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}
.mp-chip { background: var(--fill); padding: 3px 8px; border-radius: 3px; white-space: nowrap; }

/* Reconciliation rules + formula */
.mp-split { display: grid; gap: 1.5rem; align-items: start; margin-top: 0.5rem; }
@media (min-width: 1024px) { .mp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; } }
.mp-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.mp-rules > li { margin: 0; display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.75rem; align-items: start; }
.mp-rules .step {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
}
.mp-rules p { margin: 0; font-size: 1rem; line-height: 1.55; }
.mp-code {
  margin: 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  background: var(--fill);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text);
}
/* Phones: wrap long comment lines rather than scrolling sideways. */
@media (max-width: 559px) { .mp-code { font-size: 0.72rem; padding: 0.85rem 0.75rem; white-space: pre-wrap; } }
.mp-code .c { color: var(--muted); }
.mp-code .k { color: var(--accent); font-weight: 500; }
.mp-code .n { color: var(--estimate); }

/* P&L waterfall: SVG from 720px up, horizontal bars below. */
.mp-pnl {
  margin: 2rem 0 0;
  padding: 1.25rem 1rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
@media (min-width: 640px) { .mp-pnl { padding: 1.5rem 1.25rem 1rem; } }
.mp-pnl svg { display: none; width: 100%; height: auto; }
@media (min-width: 720px) {
  .mp-pnl svg { display: block; }
  .mp-pnl .wf { display: none; }
}
.mp-pnl figcaption { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted); max-width: 68ch; }
.example-tag {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 2px 8px;
  border: 1px solid var(--estimate);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--estimate);
}
.w-rev, .w-profit { fill: var(--accent); }
.w-cost { fill: var(--estimate); }
.w-link { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.w-grid { stroke: var(--border); stroke-width: 1; }
.w-lbl { font-family: var(--font-sans); font-weight: 500; font-size: 12.5px; fill: var(--text); }
.w-val { font-family: var(--font-mono); font-size: 11.5px; fill: var(--text); }
.w-axis, .w-note { font-family: var(--font-mono); font-size: 10.5px; fill: var(--muted); }
.wf--amber .wf-bar.neg { background: var(--estimate); }
.wf--amber .wf-amt.neg { color: var(--estimate); }
.wf--amber .wf-bar.total { background: var(--accent); }

/* Design decisions */
.mp-decisions { margin-top: 1.75rem; border-top: 2px solid var(--text); }
.mp-decision {
  display: grid;
  gap: 0.6rem 2.25rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 720px) { .mp-decision { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); } }
.mp-decision h3 { margin: 0; font-size: 1.1875rem; }
.mp-decision p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--muted); }
.mp-decision p + p { margin-top: 0.5rem; }
.mp-decision .why { color: var(--text); }

.mp-periods {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 640px) { .mp-periods { grid-template-columns: repeat(3, 1fr); } }
.mp-periods > li { margin: 0; display: grid; gap: 0.35rem; padding: 1.1rem 1.25rem; background: var(--surface); }
.mp-periods .t { font-weight: 700; font-size: 1.0625rem; }
.mp-periods .r { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Outcome box */
.mp-outcome {
  margin-top: 1rem;
  padding: 2rem 1.25rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
}
@media (min-width: 640px) { .mp-outcome { padding: 2.5rem 3rem; } }
.mp-outcome .eyebrow { color: inherit; opacity: 0.8; }
.mp-outcome h2 { color: var(--on-accent); }
.mp-outcome ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 2.25rem; }
@media (min-width: 640px) { .mp-outcome ul { grid-template-columns: repeat(2, 1fr); } }
.mp-outcome li {
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(11, 20, 20, 0.35);
  font-size: 1rem;
  line-height: 1.5;
}
.mp-outcome li b { display: block; margin-bottom: 0.25rem; font-size: 1.125rem; }

/* Dollar amounts need a wider value column than the per-$100 waterfall. */
.wf--amber .wf-row { grid-template-columns: 6.5rem 1fr 4.5rem; }