/* Page-scoped styling for the Jaffle Shop ETL post.
   Only prose furniture the shared sheet does not define; every colour comes
   from the theme tokens so light and dark both work. */

.post-body h2 { margin-top: 42px; }
.post-body p { max-width: 100%; }
.post-body table.lb { margin: 6px 0 20px; font-size: 0.94rem; }
/* Sizes, times and ratios are short and read badly when broken across lines.
   The DuckDB column is the only one long enough to want wrapping, so let it
   take the slack and hold the rest on one line. */
.post-body table.lb td:first-child,
.post-body table.lb td:nth-child(2),
.post-body table.lb td:last-child,
.post-body table.lb th { white-space: nowrap; }
.post-body .table-wrap { margin-bottom: 22px; }
.post-body .codeblock { margin: 6px 0 22px; }

/* ---------------------------------------------------------------- figures
   The charts are wide and dense, so on a roomy screen they break out of the
   720px reading column. The breakout is capped against the viewport, because
   body has overflow-x:hidden and anything wider would simply be clipped. */
.post-body figure { margin: 30px 0 28px; }
/* Qualified with .post-body so it outranks the margin shorthand above; a bare
   .figure-wide loses on specificity and the breakout silently collapses. */
.post-body figure.figure-wide { width: min(1120px, calc(100vw - 48px));
                                margin-left: 50%; transform: translateX(-50%); }

/* The charts are rendered on a white canvas and cropped flush to their
   content, so the panel carries the frame and the image sits flat inside it.
   The white is deliberate in both themes: these are printed-on-paper charts,
   and inverting them would misrepresent the colours. */
.figure-scroll {
  background: #ffffff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); padding: 14px;
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.figure-scroll img { display: block; width: 100%;
                     border: 0; border-radius: 0; box-shadow: none; background: none; }
.post-body figcaption { margin-top: 12px; font-size: 0.86rem; color: var(--muted);
                        text-align: center; line-height: 1.55; }

/* ------------------------------------------------------------- stat cards
   Four headline results, so a 2x2 grid rather than a flex row: at the reading
   width a flex row breaks 3 + 1 and leaves an orphan. */
.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px; margin: 24px 0 28px; }
.stat-card { background: var(--card-bg); border: 1px solid var(--border);
             border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow); }
.stat-card .k { font-family: "Space Grotesk", sans-serif; font-size: 1.5rem;
                font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
                background: var(--brand-grad); -webkit-background-clip: text;
                background-clip: text; color: transparent; }
/* The did-not-finish result is DuckDB's, not ours, so it takes the baseline
   colour instead of the brand gradient. */
.stat-card.stat-dead .k { background: none; -webkit-background-clip: border-box;
                          background-clip: border-box; color: var(--accent-baseline);
                          font-size: 1.3rem; }
.stat-card .v { font-size: 0.88rem; color: var(--muted); margin-top: 6px; line-height: 1.55; }

/* --------------------------------------------------------------- emphasis */
.keyline { border-left: 3px solid var(--accent); padding: 6px 0 6px 18px;
           margin: 26px 0; color: var(--text); font-size: 1.06rem; }
.win { color: var(--badge-ours-text); font-weight: 700; }
.dead { color: var(--accent-baseline); font-weight: 700; }


/* ------------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .post-body figure.figure-wide { width: 100%; margin-left: 0; transform: none; }
}

@media (max-width: 700px) {
  .stat-row { grid-template-columns: 1fr; }
  .post-body h2 { margin-top: 34px; }
  /* Shrinking a dense two-panel chart to phone width makes its axis labels
     unreadable, so hold it at a legible width and let the reader pan instead. */
  .figure-scroll { padding: 10px; }
  .figure-scroll img { width: 720px; max-width: none; }
  .post-body figcaption::after {
    content: " (scroll the chart sideways to read it)"; color: var(--muted);
  }
}