/* Post content and the brand blocks. See lib/blocks.mjs for the shortcodes that produce this markup. */

.prose { display: flex; flex-direction: column; gap: var(--space-5); line-height: 1.65; min-width: 0; }
.prose > * { margin: 0; }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-3); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-2); }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--color-accent-strong); }
.prose ul, .prose ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-2); }
.prose code { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-sunken); border-radius: var(--radius-sm); padding: 0.0625rem 0.375rem; }
.prose pre { background: var(--color-sunken); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-4); overflow-x: auto; line-height: 1.5; }
.prose pre code { background: none; padding: 0; font-size: var(--text-sm); }
.prose img { height: auto; border-radius: var(--radius); }
.prose hr { border: 0; border-top: 1px solid var(--color-line); width: 100%; }
.scroll { overflow-x: auto; }

/* Markdown tables */
.prose table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-line); }
.prose th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted); font-weight: 600; }
.prose td { font-variant-numeric: tabular-nums; }

/* {% pulse %} — the strip of top numbers */
.pulse { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--space-2); }
.tile { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 0.625rem var(--space-3); display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.tile b { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500; font-variant-numeric: tabular-nums; }
.tile b.up { color: var(--color-accent-strong); }
.tile b.down { color: var(--color-danger); }
.tile span { font-size: var(--text-xs); color: var(--color-muted); }

/* Figures: {% ranks %} and {% sparkline %} */
.fig { margin: 0; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.fig figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.ranks { display: flex; flex-direction: column; gap: var(--space-2); }
.rank { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 4rem; gap: var(--space-3); align-items: center; font-size: var(--text-base); }
.rank .bar { height: 0.625rem; border-radius: var(--radius-pill); background: var(--color-sunken); overflow: hidden; }
.rank .bar i { display: block; height: 100%; background: var(--color-accent); border-radius: var(--radius-pill); }
.rank.top .bar i { background: var(--color-pop); }
.rank .mono { text-align: right; color: var(--color-ink); }
.spark { width: 100%; height: auto; display: block; overflow: visible; }
.spark .area { fill: var(--color-accent); opacity: 0.14; }
.spark .line { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.spark .end { fill: var(--color-pop); }

/* {% action %} — This week’s action */
.action { border: 1px solid var(--color-accent); border-radius: var(--radius); background: var(--color-accent-soft); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 0.375rem; }
.action .label { color: var(--color-accent-strong); }
.action p { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }

/* {% note %} and {% warn %} */
.callout { border: 1px solid var(--color-line); border-radius: var(--radius); padding: 0.875rem var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); font-size: 0.9375rem; line-height: 1.5; }
.callout b { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.callout.note { background: var(--color-accent-soft); }
.callout.note b { color: var(--color-accent-strong); }
.callout.warn { background: var(--color-warn-soft); }
.callout.warn b { color: var(--color-warn); }

/* {% steps %} */
.prose ol.steps { list-style: none; padding: 0; gap: var(--space-3); counter-reset: s; }
.steps li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-3); counter-increment: s; }
.steps li::before { content: counter(s); font-family: var(--font-mono); font-size: var(--text-sm); width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-strong); display: grid; place-items: center; }

/* {% quote %} */
.quote { margin: 0; border-left: 3px solid var(--color-pop); padding-left: var(--space-4); font-size: var(--text-lg); line-height: 1.4; letter-spacing: -0.01em; }
.quote small { display: block; margin-top: 0.375rem; font-size: var(--text-sm); color: var(--color-muted); letter-spacing: 0; }

@media (max-width: 34rem) { .rank { grid-template-columns: 5rem minmax(0, 1fr) 3.5rem; } }