/* Leave Time, the comparison. DR-228 step 3.
 *
 * Laid out as a pricing table because that is the shape people already
 * read for "here are the two or three you are choosing between": a row
 * of equal cards, the same figures in the same place on each, one of
 * them marked.
 *
 * The number of columns is not fixed. The frontier produces two or three
 * and sometimes one, and the grid is written to hold whatever it gets
 * rather than reserving a slot for a third that may not exist. A blank
 * third column would be an invitation to invent one.
 *
 * Recommended is marked the way The Bench marks emphasis: heavier
 * border, the accent, --shadow-lift. Never by inverting panel and ink.
 * There is no inversion primitive in the design set, and DR-221 found
 * that an inverted card is off-system rather than emphatic.
 */

.ltpu-wrap { display: flex; flex-direction: column; gap: var(--s3); }

.ltpu-lede {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* The way out, above the options rather than after them. Someone who
 * does not want to be given an answer should not have to read three
 * cards to find that out. */
.ltpu-manual {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0;
}
.ltpu-manual a { color: var(--accent); }

.ltpu-grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr;
  align-items: stretch;
}

/* 900px is this zone's desktop line, the same one isDesktop uses. Below
 * it the cards stack, which is the only sane reading order on a phone:
 * a person compares by scrolling, and three columns squeezed to 120px
 * each compare nothing. */
@media (min-width: 900px) {
  .ltpu-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.ltpu-option {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--panel-raised);
  color: var(--ink);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.ltpu-option.is-recommended {
  border-width: var(--border-w-heavy);
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}

.ltpu-option-head { display: flex; flex-direction: column; gap: var(--s1); }

.ltpu-kicker {
  margin: 0;
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
  color: var(--accent);
}

.ltpu-option-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: var(--display-style);
  font-weight: 700;
  font-size: var(--t-lead);
  line-height: 1.15;
}

/* The computed heading. Deliberately a subtitle rather than the title:
 * a person picks a place, and the axis says why this place is on the
 * page. --ink-soft, not --ink-faint, which fails contrast against
 * --panel-raised in both dark themes (4.16:1 and 4.22:1, DR-221). */
.ltpu-option-why {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.ltpu-option-tie {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.ltpu-figures {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s1) var(--s2);
  align-items: baseline;
}
.ltpu-figures dt {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
  color: var(--ink-soft);
}
.ltpu-figures dd {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 500;
  text-align: right;
}

/* An estimate says so where the number it feeds is shown. Not a
 * footnote: a footnote is read past, and the walk estimate behind some
 * of these totals is unverified rather than merely rough. */
.ltpu-estimate {
  margin: 0;
  font-size: var(--t-small);
  color: var(--warn);
}

.ltpu-chain summary {
  cursor: pointer;
  font-size: var(--t-small);
  color: var(--ink-soft);
  min-height: var(--tap);
  display: flex;
  align-items: center;
}
.ltpu-legs {
  margin: var(--s1) 0 0;
  padding-left: var(--s3);
  font-size: var(--t-small);
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.ltpu-empty {
  margin: 0;
  font-size: var(--t-body);
  color: var(--ink-soft);
}