/*
 * Senpi pages (/p/<pid>). A plain static file: the route handler that serves
 * the page can't import CSS, and the page's CSP allows no inline style.
 * Bump the /v<n>/ path segment whenever this file changes.
 *
 * Placeholders until the design pass: the dark secondary-text
 * value, the dark treatment of the PNG lockup, every spacing value, and the
 * component styles: the callout colours (the note callout has no design at
 * all yet), the hero band colours, the address chip, the dimension table and
 * the ask block; the composing card's sizes, read off the mockup's still;
 * and the streamed body's provisional text and cursor.
 */

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/fonts/DMMono-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/fonts/DMMono-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --sp-bg: #fcfcfc;
  --sp-surface: #ffffff;
  --sp-surface-2: #eeeeee;
  --sp-ink: #2e2e2e;
  --sp-ink-muted: #6b6b6b;
  --sp-line: #d5d5d5;
  --sp-accent: #4c6ef5;
  --sp-cta: #2e2e2e;
  --sp-on-cta: #ffffff;
  --sp-lockup-ground: transparent;

  --sp-leak: #e86057;
  --sp-leak-tint: #fdefee;
  --sp-fix: #5ac767;
  --sp-fix-tint: #eef9ef;
  --sp-rejected: #8a8a8a;
  --sp-rejected-tint: #f3f3f3;
  --sp-note: #d5d5d5;
  --sp-note-tint: #f6f6f6;

  /* The share card's band colours, so the page and the card agree. */
  --sp-band-poor: #e86057;
  --sp-band-poor-tint: #fdefee;
  --sp-band-fair: #e8a33d;
  --sp-band-fair-tint: #fdf4e6;
  --sp-band-good: #5ac767;
  --sp-band-good-tint: #eef9ef;
  --sp-band-strong: #2f9e44;
  --sp-band-strong-tint: #e6f4e9;

  /* A trade's sign: its PnL, its chart and its stat values. */
  --sp-positive: #5ac767;
  --sp-negative: #e86057;

  /* The edge of a table that scrolls sideways; the TL;DR's tinted band. */
  --sp-scroll-shadow: rgba(0, 0, 0, 0.16);
  --sp-tldr-tint: #eef2ff;

  --sp-font-sans:
    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --sp-font-mono:
    "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sp-gutter: 16px;
  --sp-measure: 720px;
  --sp-radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sp-bg: #1a1a1a;
    --sp-surface: #232323;
    --sp-surface-2: #2b2b2b;
    --sp-ink: #fcfcfc;
    --sp-ink-muted: #9a9a9a;
    --sp-line: #343434;
    --sp-accent: #8da2ff;
    /* #2e2e2e all but vanishes on the dark page, so the ink flips to
       off-white, as the brand's dark rule does. */
    --sp-cta: #fcfcfc;
    --sp-on-cta: #1a1a1a;
    /* The PNG lockup is ink on transparent; on dark it sits on off-white, the
       brand's only approved dark treatment, until a dark lockup exists. */
    --sp-lockup-ground: #fcfcfc;

    --sp-leak: #ef7d75;
    --sp-leak-tint: #3a2321;
    --sp-fix: #6fd37b;
    --sp-fix-tint: #1f3222;
    --sp-rejected: #8a8a8a;
    --sp-rejected-tint: #262626;
    --sp-note: #4a4a4a;
    --sp-note-tint: #262626;

    --sp-band-poor: #ef7d75;
    --sp-band-poor-tint: #3a2321;
    --sp-band-fair: #f0b65a;
    --sp-band-fair-tint: #3a2e1c;
    --sp-band-good: #6fd37b;
    --sp-band-good-tint: #1f3222;
    --sp-band-strong: #4cbf62;
    --sp-band-strong-tint: #1a2e1f;

    --sp-positive: #6fd37b;
    --sp-negative: #ef7d75;

    --sp-scroll-shadow: rgba(0, 0, 0, 0.6);
    --sp-tldr-tint: #262b3d;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sp-bg);
  color: var(--sp-ink);
  font-family: var(--sp-font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--sp-accent);
}

a:focus-visible {
  outline: 2px solid var(--sp-accent);
  outline-offset: 2px;
}

.sp-shell {
  max-width: var(--sp-measure);
  margin: 0 auto;
  padding: 0 var(--sp-gutter);
}

/* ─── Brand bar ─────────────────────────────────────────────────────────── */

.sp-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--sp-line);
}

.sp-brand-home {
  display: inline-flex;
  flex: none;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 999px;
  background: var(--sp-lockup-ground);
}

.sp-lockup {
  display: block;
  width: auto;
  height: 28px;
}

.sp-tagline {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--sp-ink-muted);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-cta {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--sp-cta);
  color: var(--sp-on-cta);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

/* Opacity, since a brightness filter can't visibly lighten either fill. */
.sp-cta:hover {
  opacity: 0.88;
}

.sp-cta-compact {
  flex: none;
  margin-left: auto;
  padding: 8px 14px;
  font-size: 14px;
}

@media (max-width: 480px) {
  .sp-tagline {
    display: none;
  }
}

/* ─── Header ────────────────────────────────────────────────────────────── */

.sp-page {
  padding: 32px 0 8px;
}

.sp-head {
  margin-bottom: 32px;
}

.sp-eyebrow {
  margin: 0 0 8px;
  color: var(--sp-ink-muted);
  font-family: var(--sp-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.sp-title {
  margin: 0 0 12px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.sp-stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0 0 20px;
  color: var(--sp-ink-muted);
  font-family: var(--sp-font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  overflow-x: clip;
}

/* The dot leads the time and hangs left of it by its own width: beside the
   desk stamp it fills the desk's trailing margin, and when the time wraps to
   a line of its own the dot falls outside the stamp, which clips it. */
.sp-stamp-desk:has(+ time) {
  margin-right: calc(1ch + 16px);
}

.sp-stamp-desk + time {
  margin-left: calc(-1ch - 16px);
}

.sp-stamp-desk + time::before {
  content: "·";
  display: inline-block;
  width: calc(1ch + 16px);
  text-align: center;
}

.sp-stamp-trade {
  overflow-wrap: anywhere;
}

.sp-tldr {
  margin: 0;
  padding: 16px 20px;
  border-radius: var(--sp-radius);
  background: var(--sp-surface-2);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

.sp-tldr.sp-tldr-tinted {
  background: var(--sp-tldr-tint);
  font-weight: 400;
}

.sp-tldr-tinted strong {
  font-weight: 700;
}

/* ─── Hero stat ─────────────────────────────────────────────────────────── */

.sp-hero {
  margin: 20px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-surface);
}

.sp-hero-label {
  margin: 0 0 4px;
  color: var(--sp-ink-muted);
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.sp-hero-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
}

.sp-hero-figure {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.sp-band {
  --sp-band: var(--sp-ink-muted);
  --sp-band-tint: var(--sp-surface-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sp-band-tint);
  font-size: 14px;
  font-weight: 600;
}

.sp-band::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sp-band);
}

.sp-band-poor {
  --sp-band: var(--sp-band-poor);
  --sp-band-tint: var(--sp-band-poor-tint);
}

.sp-band-fair {
  --sp-band: var(--sp-band-fair);
  --sp-band-tint: var(--sp-band-fair-tint);
}

.sp-band-good {
  --sp-band: var(--sp-band-good);
  --sp-band-tint: var(--sp-band-good-tint);
}

.sp-band-strong {
  --sp-band: var(--sp-band-strong);
  --sp-band-tint: var(--sp-band-strong-tint);
}

/* A trade page's hero, coloured by its PnL's sign. */
.sp-hero-positive .sp-hero-figure {
  color: var(--sp-positive);
}

.sp-hero-negative .sp-hero-figure {
  color: var(--sp-negative);
}

.sp-hero-read {
  margin: 8px 0 0;
  color: var(--sp-ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ─── Body: the basic tags ──────────────────────────────────────────────── */

.sp-body {
  overflow-wrap: anywhere;
}

.sp-body h2 {
  margin: 32px 0 12px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.sp-body h3 {
  margin: 24px 0 8px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

.sp-body p,
.sp-body ul,
.sp-body ol,
.sp-body blockquote,
.sp-body pre,
.sp-body table {
  margin: 0 0 16px;
}

.sp-body ul,
.sp-body ol {
  padding-left: 24px;
}

.sp-body li + li {
  margin-top: 4px;
}

.sp-body blockquote {
  padding-left: 16px;
  border-left: 3px solid var(--sp-line);
  color: var(--sp-ink-muted);
}

.sp-body code {
  font-family: var(--sp-font-mono);
  font-size: 0.9em;
}

.sp-body pre {
  padding: 16px;
  border-radius: var(--sp-radius);
  background: var(--sp-surface-2);
  overflow-x: auto;
  overflow-wrap: normal;
}

.sp-body table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
}

.sp-body th,
.sp-body td {
  min-width: 12ch;
  padding: 8px 12px;
  border-bottom: 1px solid var(--sp-line);
  text-align: left;
  white-space: normal;
}

/* Numbers and the label column stay on one line; text columns wrap. A phone
   lets the label column and figure headers wrap too, below. */
.sp-body .sp-num,
.sp-body td:first-child,
.sp-body th:first-child {
  white-space: nowrap;
}

/* A phone drops the column floors and narrows the padding, so a column takes
   only the width its text needs: a table that fits on one line a cell still
   fits, its figures on screen. Text, labels and figure headers wrap. The
   label column keeps 10ch, so a table too wide for the phone never wraps its
   labels a word to a line, and beside two or more columns it stops at 40% of
   the page column. Chromium ignores a percentage max-width on a table cell.
   A table of four or more columns whose last column holds no figure gives
   that column 22ch, so its sentences stay a few lines tall; widening the last
   column moves no figure off screen. Below four columns, the same floor made
   tables that v5 fits overflow. */
@media (max-width: 480px) {
  .sp-body th,
  .sp-body td {
    min-width: 0;
    padding-inline: 8px;
  }

  .sp-body th.sp-num,
  .sp-body td:first-child:not(.sp-num),
  .sp-body th:first-child {
    white-space: normal;
  }

  .sp-body td:first-child:not(.sp-num),
  .sp-body th:first-child {
    min-width: 10ch;
  }

  .sp-body .sp-table:has(th:nth-child(3)) td:first-child:not(.sp-num),
  .sp-body .sp-table:has(th:nth-child(3)) th:first-child {
    max-width: calc((100vw - 2 * var(--sp-gutter)) * 0.4);
  }

  .sp-body
    .sp-table:has(th:nth-child(4)):not(:has(td.sp-num:last-child))
    td:last-child {
    min-width: 22ch;
  }
}

/* Above a phone, a table of six or more columns sizes them to their content
   down to 6ch and wraps its number headers above their figures, so an
   all-number table fits the column. Narrower tables keep the 12ch floor. */
@media (min-width: 481px) {
  .sp-body .sp-table:has(th:nth-child(6)) th,
  .sp-body .sp-table:has(th:nth-child(6)) td {
    min-width: 6ch;
  }

  .sp-body .sp-table:has(th:nth-child(6)) th.sp-num {
    white-space: normal;
  }
}

.sp-body th {
  font-weight: 600;
}

.sp-body .sp-num {
  text-align: right;
}

.sp-body hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--sp-line);
}

/* ─── Body: the components ──────────────────────────────────────────────── */

.sp-section + .sp-section {
  margin-top: 8px;
}

.sp-callout {
  --sp-callout: var(--sp-note);
  --sp-callout-tint: var(--sp-note-tint);
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 4px solid var(--sp-callout);
  border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
  background: var(--sp-callout-tint);
}

.sp-callout > :last-child {
  margin-bottom: 0;
}

.sp-callout-leak {
  --sp-callout: var(--sp-leak);
  --sp-callout-tint: var(--sp-leak-tint);
}

.sp-callout-fix {
  --sp-callout: var(--sp-fix);
  --sp-callout-tint: var(--sp-fix-tint);
}

.sp-callout-rejected {
  --sp-callout: var(--sp-rejected);
  --sp-callout-tint: var(--sp-rejected-tint);
}

.sp-callout-note {
  --sp-callout: var(--sp-note);
  --sp-callout-tint: var(--sp-note-tint);
}

/* Tables scroll sideways inside their own container, never the page. */
.sp-table {
  max-width: 100%;
  margin: 0 0 16px;
  overflow-x: auto;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  /* A shadow marks each edge with more columns past it. The covers scroll
     with the table and hide the shadow at an edge it has reached. */
  background:
    linear-gradient(to right, var(--sp-surface) 30%, transparent) left center /
      32px 100% no-repeat local,
    linear-gradient(to left, var(--sp-surface) 30%, transparent) right center /
      32px 100% no-repeat local,
    radial-gradient(
        farthest-side at 0 50%,
        var(--sp-scroll-shadow),
        transparent
      )
      left center / 12px 100% no-repeat scroll,
    radial-gradient(
        farthest-side at 100% 50%,
        var(--sp-scroll-shadow),
        transparent
      )
      right center / 12px 100% no-repeat scroll,
    var(--sp-surface);
}

.sp-body .sp-table table {
  margin: 0;
}

.sp-table tr:last-child > td {
  border-bottom: 0;
}

.sp-table-dimension th {
  background: var(--sp-surface-2);
}

.sp-table-dimension td:first-child {
  font-weight: 500;
}

/* Inline in prose it flows with the text; on its own it is a block that a
   42-character address fits on one line of a phone. One click selects the
   whole address; a full address has its FlowScan icon link after it. */
.sp-address {
  padding: 2px 6px;
  border: 1px solid var(--sp-line);
  border-radius: 6px;
  background: var(--sp-surface-2);
  font-family: var(--sp-font-mono);
  font-size: 0.8125em;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  user-select: all;
}

.sp-body > .sp-address,
.sp-section > .sp-address,
.sp-callout > .sp-address,
.sp-body blockquote > .sp-address {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 4px 8px;
}

/* On a phone a 42-character address takes a whole line: one size smaller,
   it leaves room on that line for its icon. */
@media (max-width: 480px) {
  .sp-address {
    font-size: 0.75em;
  }
}

/* Breaks only before the address, so the icon stays on the address's line
   wherever the address fits; the address wraps inside itself only when it
   can't. */
.sp-address-group {
  white-space: nowrap;
}

.sp-address-group > .sp-address {
  white-space: normal;
}

.sp-body > .sp-address-group,
.sp-section > .sp-address-group,
.sp-callout > .sp-address-group,
.sp-body blockquote > .sp-address-group {
  display: flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 16px;
}

.sp-body > .sp-address-group > .sp-address,
.sp-section > .sp-address-group > .sp-address,
.sp-callout > .sp-address-group > .sp-address,
.sp-body blockquote > .sp-address-group > .sp-address {
  min-width: 0;
  padding: 4px 8px;
}

/* A 24px target, the icon drawn at the text's size inside it. */
.sp-address-explorer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 24px;
  min-height: 24px;
  border-radius: 6px;
  color: var(--sp-ink-muted);
  vertical-align: middle;
}

.sp-address-explorer:hover {
  color: var(--sp-accent);
}

.sp-address-explorer svg {
  display: block;
  width: 1em;
  height: 1em;
}

.sp-corrected {
  text-decoration: underline dotted var(--sp-accent);
  text-underline-offset: 3px;
}

.sp-asks {
  margin: 32px 0 16px;
}

.sp-body .sp-asks-title {
  margin: 0 0 12px;
  color: var(--sp-ink-muted);
  font-family: var(--sp-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sp-body .sp-ask-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-body .sp-ask-list li + li {
  margin-top: 0;
}

.sp-ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-surface);
  color: var(--sp-ink);
  font-weight: 500;
  text-decoration: none;
}

/* The ask's words are one flex item, whatever inline markup they carry. */
.sp-ask-text {
  min-width: 0;
}

.sp-ask::after {
  content: "→";
  flex: none;
  color: var(--sp-accent);
}

.sp-ask:hover {
  border-color: var(--sp-accent);
}

/* ─── Body: a trade page's blocks ───────────────────────────────────────── */

.sp-trade-chart {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-surface);
}

.sp-trade-chart.sp-trade-chart-bare {
  padding: 0;
  border: 0;
  background: none;
}

/*
 * The figure scales to the body's width by its viewBox. Its layout measures
 * each label at DM Mono's 0.6 em advance; geometric precision keeps the drawn
 * text at that width, where Chromium on Linux would round each glyph's
 * advance to a whole pixel and push an edge label past the figure's box.
 */
.sp-fig {
  display: block;
  width: 100%;
  height: auto;
  text-rendering: geometricPrecision;
}

/*
 * The trade chart is drawn twice from its one spec: a wide box, and a narrow
 * box whose labels stay readable on a phone. One shows at any width.
 */
.sp-trade-chart .sp-trade-chart-narrow {
  display: none;
}

@media (max-width: 480px) {
  .sp-trade-chart .sp-trade-chart-wide {
    display: none;
  }
  .sp-trade-chart .sp-trade-chart-narrow {
    display: block;
  }
}

.sp-trade-chart-caption {
  margin: 8px 0 0;
  color: var(--sp-ink-muted);
  font-size: 13px;
}

/*
 * A figure's colours are roles. Each shape carries its light value as a
 * presentation attribute, for the card; these rules beat it, so the page's
 * palette, dark mode included, wins.
 */
.sp-fig-fill-ink {
  fill: var(--sp-ink);
}
.sp-fig-fill-muted {
  fill: var(--sp-ink-muted);
}
.sp-fig-fill-line {
  fill: var(--sp-line);
}
.sp-fig-fill-surface {
  fill: var(--sp-surface);
}
.sp-fig-fill-positive {
  fill: var(--sp-positive);
}
.sp-fig-fill-negative {
  fill: var(--sp-negative);
}
.sp-fig-fill-neutral {
  fill: var(--sp-ink-muted);
}
.sp-fig-fill-accent {
  fill: var(--sp-accent);
}
.sp-fig-fill-poor {
  fill: var(--sp-band-poor);
}
.sp-fig-fill-fair {
  fill: var(--sp-band-fair);
}
.sp-fig-fill-good {
  fill: var(--sp-band-good);
}
.sp-fig-fill-strong {
  fill: var(--sp-band-strong);
}
.sp-fig-stroke-ink {
  stroke: var(--sp-ink);
}
.sp-fig-stroke-muted {
  stroke: var(--sp-ink-muted);
}
.sp-fig-stroke-line {
  stroke: var(--sp-line);
}
.sp-fig-stroke-surface {
  stroke: var(--sp-surface);
}
.sp-fig-stroke-positive {
  stroke: var(--sp-positive);
}
.sp-fig-stroke-negative {
  stroke: var(--sp-negative);
}
.sp-fig-stroke-neutral {
  stroke: var(--sp-ink-muted);
}
.sp-fig-stroke-accent {
  stroke: var(--sp-accent);
}
.sp-fig-stroke-poor {
  stroke: var(--sp-band-poor);
}
.sp-fig-stroke-fair {
  stroke: var(--sp-band-fair);
}
.sp-fig-stroke-good {
  stroke: var(--sp-band-good);
}
.sp-fig-stroke-strong {
  stroke: var(--sp-band-strong);
}

/* ─── Body: figures ─────────────────────────────────────────────────────── */

.sp-figure {
  max-width: 100%;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-surface);
}

/*
 * A figure is drawn at a phone's width, so its labels read there at their
 * own size; on a wider screen it grows only this far, or they would outgrow
 * the text around it.
 */
.sp-figure .sp-fig {
  max-width: 440px;
  margin: 0 auto;
}

/*
 * A figure drawn as a pair, like the trade chart: the wide drawing shows at
 * its own width, never past the column, and the narrow one on a phone.
 */
.sp-fig.sp-fig-narrow {
  display: none;
}

.sp-figure .sp-fig.sp-fig-wide {
  width: auto;
  max-width: 100%;
}

@media (max-width: 480px) {
  .sp-fig.sp-fig-wide {
    display: none;
  }
  .sp-fig.sp-fig-narrow {
    display: block;
  }
}

/* A body figure with no frame, its labels in the body's sans. */
.sp-figure.sp-figure-bare {
  padding: 0;
  border: 0;
  background: none;
}

.sp-figure-bare .sp-figure-caption {
  text-align: center;
}

.sp-figure-bare .sp-fig text {
  font-family: var(--sp-font-sans);
}

.sp-figure-caption {
  margin: 8px 0 0;
  color: var(--sp-ink-muted);
  font-size: 13px;
}

/* The page head's featured figure: unframed, its caption as the label above. */
.sp-featured {
  margin: 24px 0 0;
}

.sp-featured-label {
  margin: 0 0 12px;
  color: var(--sp-ink-muted);
  font-family: var(--sp-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.sp-featured .sp-figure {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.sp-featured .sp-fig {
  margin: 0;
}

/* A composing section's figure, until the section settles with its drawing. */
.sp-figure-pending {
  height: 160px;
  margin: 0 0 16px;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-surface-2);
}

.sp-trade-stats {
  margin: 0 0 24px;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-surface);
}

.sp-trade-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 16px;
}

.sp-trade-stat + .sp-trade-stat {
  border-top: 1px solid var(--sp-line);
}

.sp-trade-label {
  color: var(--sp-ink-muted);
  font-size: 14px;
}

.sp-trade-value {
  margin: 0;
  font-family: var(--sp-font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sp-trade-value-positive {
  color: var(--sp-positive);
}

.sp-trade-value-negative {
  color: var(--sp-negative);
}

.sp-trade-strategy {
  margin: 0 0 16px;
}

/* Beats `.sp-body p`'s margin. */
.sp-trade-strategy .sp-trade-strategy-name {
  margin: 0 0 4px;
  font-weight: 600;
}

.sp-trade-strategy-description {
  color: var(--sp-ink-muted);
  line-height: 1.5;
}

/* ─── Composing ─────────────────────────────────────────────────────────── */

/* The loader card: a title that never changes, the steps so far, and a
   skeleton. stream.js advances the steps on a timer; they are cosmetic. */
.sp-composing {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-surface);
}

.sp-composing-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--sp-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.sp-composing-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sp-ink);
  animation: sp-composing-pulse 1.6s ease-in-out infinite;
}

@keyframes sp-composing-pulse {
  50% {
    opacity: 0.35;
  }
}

/* Indented to the title's words; each row's bar sits under the dot and runs
   the row's full height, however many lines it wraps to. */
.sp-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.45;
}

.sp-step {
  position: relative;
  padding: 1px 0 1px 19px;
  color: var(--sp-ink-muted);
}

.sp-step[hidden] {
  display: none;
}

.sp-step::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3.5px;
  width: 2px;
  border-radius: 1px;
  background: var(--sp-line);
}

.sp-step[data-step="now"] {
  color: var(--sp-ink);
  font-weight: 500;
  /* A lighter band sweeping across the words, clipped to them. */
  background: linear-gradient(
    90deg,
    var(--sp-ink) 0 40%,
    var(--sp-ink-muted) 50%,
    var(--sp-ink) 60% 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    sp-step-in 0.3s ease-out,
    sp-step-shimmer 2.2s linear infinite;
}

.sp-step[data-step="now"]::before {
  background: var(--sp-ink);
}

@keyframes sp-step-in {
  from {
    opacity: 0;
  }
}

@keyframes sp-step-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

.sp-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.sp-skeleton-line {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    var(--sp-surface-2) 0 35%,
    var(--sp-surface) 50%,
    var(--sp-surface-2) 65% 100%
  );
  background-size: 250% 100%;
  animation: sp-skeleton-sweep 2.4s ease-in-out infinite;
}

.sp-skeleton-line:nth-child(1) {
  width: 40%;
}
.sp-skeleton-line:nth-child(2) {
  width: 95%;
}
.sp-skeleton-line:nth-child(3) {
  width: 88%;
}
.sp-skeleton-line:nth-child(4) {
  width: 64%;
}

@keyframes sp-skeleton-sweep {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

/* Nothing moves; the steps still advance, swapping in place. */
@media (prefers-reduced-motion: reduce) {
  .sp-composing-dot,
  .sp-step[data-step="now"],
  .sp-skeleton-line {
    animation: none;
  }
  .sp-step[data-step="now"] {
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* Clipped text vanishes under forced colours, and backgrounds are dropped:
   plain text, with the dot and the bars in system colours. */
@media (forced-colors: active) {
  .sp-step[data-step="now"] {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  .sp-composing-dot,
  .sp-step::before {
    forced-color-adjust: none;
    background: GrayText;
  }
  .sp-composing-dot,
  .sp-step[data-step="now"]::before {
    background: CanvasText;
  }
}

/* ─── Streamed body ─────────────────────────────────────────────────────── */

/* A unit still being written: muted until it settles, its asks not yet links. */
.sp-provisional {
  color: var(--sp-ink-muted);
}

.sp-provisional .sp-ask,
.sp-provisional .sp-ask::after {
  color: inherit;
}

.sp-provisional .sp-ask:hover {
  border-color: var(--sp-line);
}

/* Where the writing is: a caret after the last word written. It blinks, and
   stays still when the reader asks for less motion. */
.sp-cursor {
  display: inline-block;
  width: 0.5em;
  height: 1.1em;
  margin-left: 2px;
  border-radius: 2px;
  background: var(--sp-accent);
  vertical-align: text-bottom;
  animation: sp-cursor-blink 1s steps(1, end) infinite;
}

@keyframes sp-cursor-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-cursor {
    animation: none;
  }
}

/* ─── Share links ───────────────────────────────────────────────────────── */

/* A wrapping row of pill links: under the TL;DR, and above the CTA footer. */
.sp-share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}

.sp-shell > .sp-share {
  justify-content: center;
  margin: 32px 0 0;
}

.sp-share-link {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  background: var(--sp-surface);
  color: var(--sp-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.sp-share-link:hover {
  border-color: var(--sp-ink-muted);
}

/* Post on X is the primary share, filled like the CTA. */
.sp-share-link[data-share="x"] {
  border-color: var(--sp-cta);
  background: var(--sp-cta);
  color: var(--sp-on-cta);
}

.sp-share-link[data-share="x"]:hover {
  border-color: var(--sp-cta);
  opacity: 0.88;
}

/* Read out, never seen: Copy link's own text already shows it was copied. */
.sp-share-status,
.sp-share-offscreen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* ─── CTA footer, disclaimer ────────────────────────────────────────────── */

.sp-cta-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 40px 0 24px;
  padding: 28px 20px;
  border-radius: var(--sp-radius);
  background: var(--sp-surface);
  border: 1px solid var(--sp-line);
  text-align: center;
}

.sp-cta-lead {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

/* Half the footer's gap under the lead, as the mockup sets it. */
.sp-cta-sub {
  margin: -6px 0 0;
  color: var(--sp-ink-muted);
  font-weight: 400;
}

.sp-credits {
  margin: 0;
  color: var(--sp-ink-muted);
  font-size: 14px;
}

.sp-disclaimer {
  padding: 16px 0 40px;
  text-align: center;
  color: var(--sp-ink-muted);
  font-size: 12px;
  line-height: 1.5;
}

.sp-disclaimer p {
  margin: 0;
}

/* ─── Not found / removed / unavailable ─────────────────────────────────── */

.sp-notice {
  padding: 64px 0;
}