/*
 * “Does FSD’s subscription model add up?”, English and zh-CN. Loaded after
 * /blog/blog.css, which holds the page frame, the essay column and the
 * --data-* colors. Everything here sits inside .essay.
 */

.opening {
  padding-top: var(--space-4);
}

/* The formula restates the thesis in numbers; the vermilion rule stays with
   the thesis itself. */
.math-note > .formula {
  padding-left: var(--space-5);
  border-left: 3px solid var(--ink);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.essay figure {
  margin: var(--space-5) 0;
}

/* The demand chart. Its colors are data (blog.css), each series keeps its
   dash, and the legend keys draw the same dash. */
.demand {
  padding: var(--space-5);
  border: 1px solid var(--line);
  background: var(--surface);
}

.figure-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  line-height: var(--leading-ui);
}

.figure-head strong {
  font-size: var(--text-sm);
}

.figure-head > span {
  color: var(--muted);
  font-size: var(--text-xs);
}

.demand svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-3);
  overflow: visible;
}

.grid path {
  fill: none;
  stroke: var(--data-grid);
  stroke-width: 1;
}

.axis-label {
  fill: var(--muted);
  font-size: var(--text-xs);
}

.curve {
  fill: none;
  stroke-width: 3;
}

.supervised {
  stroke: var(--data-1);
}

.unsupervised {
  stroke: var(--data-2);
  stroke-dasharray: 7 4;
}

.price-line {
  stroke: var(--data-ref);
  stroke-dasharray: 3 4;
}

.supervised-dot {
  fill: var(--data-1);
}

.unsupervised-dot {
  fill: var(--data-2);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-xs);
}

.legend i {
  display: inline-block;
  width: 18px;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

.key-supervised {
  background: var(--data-1);
}

.key-unsupervised {
  background: repeating-linear-gradient(
    90deg,
    var(--data-2) 0 7px,
    transparent 7px 11px
  );
}

/* The slider is a control, so it is ink; vermilion would read as series 1. */
.price-control {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
}

.price-control input {
  flex: 1;
  min-width: 60px;
  accent-color: var(--ink);
}

.price-control output {
  min-width: 54px;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.readouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.readouts > div {
  display: flex;
  flex-direction: column;
}

.readouts > div > span,
.readouts small {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
}

/* model.js writes the unit with its leading space inside the span, so the
   figure and its unit wrap as two pieces, never inside the unit and never past
   the column at 320px. */
.readouts strong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-1);
  font-size: var(--text-2xl);
  line-height: var(--leading-ui);
  font-variant-numeric: tabular-nums;
}

.readouts strong span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 400;
  white-space: nowrap;
}

.readouts > div:first-child strong {
  color: var(--data-1);
}

.readouts > div:nth-child(2) strong {
  color: var(--data-2);
}

.essay figcaption {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* Math notes: a 2px rule on top (theme proposal §4). */
.math-note {
  margin: var(--space-5) 0;
  padding: var(--space-4) 0 var(--space-2);
  border-top: 2px solid var(--rule);
  border-bottom: 1px solid var(--line);
}

.math-note > p {
  font-size: var(--text-sm);
}

.cost-details {
  padding-block: var(--space-3);
  border-block: 1px solid var(--line);
  font-size: var(--text-sm);
}

.cost-details summary {
  cursor: pointer;
  font-weight: var(--weight-bold);
}

/* Tables take the shared .table-wrap look; these set this essay's caption
   and column widths. */
.essay caption {
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: var(--text-xs);
  text-align: left;
}

:where(.essay) tbody th {
  width: 23%;
}

:where(.essay) td:nth-child(2) {
  width: 32%;
}

.return-comparison table {
  table-layout: fixed;
}

.return-comparison th,
.return-comparison td {
  width: 25%;
  overflow-wrap: anywhere;
}

/* The enterprise evidence is a neutral .callout (site.css). Its closing
   .note keeps the note size. */
.evidence p {
  margin-bottom: 0;
}

.evidence p:not(.note) {
  font-size: var(--text-base);
}

.valuation {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-3);
  padding-block: var(--space-5);
  border-block: 1px solid var(--line);
}

.valuation span {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
}

.valuation strong {
  font-size: var(--text-2xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.closing {
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.last-word {
  margin-top: var(--space-5);
  font-size: var(--text-xl);
}

.last-word strong {
  color: var(--accent-text);
}

@media (max-width: 620px) {
  .demand {
    padding: var(--space-4) var(--space-3);
  }

  .figure-head {
    display: block;
  }

  .figure-head > span {
    display: block;
  }

  .price-control {
    gap: var(--space-2);
  }

  .essay .table-wrap th,
  .essay .table-wrap td {
    padding-inline: var(--space-2);
  }

  .essay .return-comparison th,
  .essay .return-comparison td {
    padding-inline: var(--space-1);
    font-size: var(--text-xs);
  }

  .valuation {
    gap: var(--space-3);
  }

  .valuation strong {
    font-size: var(--text-xl);
  }

  .valuation span {
    min-height: 40px;
  }

  .last-word {
    font-size: var(--text-lg);
  }
}

@media print {
  .price-control {
    display: none;
  }

  .demand,
  .math-note,
  .valuation,
  .evidence {
    break-inside: avoid;
  }
}