/* The prose block every simulator ends on, above the closing call to action.

   Why it exists: a calculator is a page with no readable text on it. Every
   string above this section is a label on a control, and the numbers that make
   the tool worth visiting only exist after somebody has moved a slider. Google
   crawled all fifteen simulator pages and indexed none of them - "crawled,
   currently not indexed", which is the verdict a page gets when there is
   nothing on it to read. This section is the page explaining, in words, what
   it models, what it assumes, and how to read what it returns.

   Why it draws its own panel: the five simulators do not share a palette. The
   hub and the Freedom Calendar were cream, the Market Time Machine and the
   Passive Income Engine sat on #fbf8f3, and the Monte Carlo cockpit was near
   black. A section styled to inherit would have needed three sets of rules and
   would still have been wrong on the next simulator, so this painted its own
   paper surface and set its own text colour, exactly as simulator-cta.css
   paints its own forest panel.

   The five pages now share one surface - assets/css/sim-system.css - so the
   reason for painting a separate one is gone, and the values below are that
   file's tokens rather than a fourth cream. The rules stay, because the panel
   still wants a border and a slightly lighter paper than the page it sits on;
   what changed is that "slightly lighter than the page" is now a value that
   follows from the page instead of a guess that happened to work on two of
   them.

   The headings were a fall-through serif stack, for the reason given at length
   in simulator-cta.css - and with the same consequence: they were Playfair on
   one tool, Merriweather on two, and Georgia on the one that loaded no serif.
   They are the site's own face now, like everything else in the tools. */

.sim-explainer {
  padding-top: 40px;
}

.sim-explainer__inner {
  padding: 34px 38px;
  background: var(--sim-cream-50, #fffdf8);
  border: 1px solid var(--sim-cream-300, #efeae0);
  border-radius: var(--sim-radius, 0.75rem);
  color: var(--sim-espresso-900, #2a241e);
  text-align: left;
}

.sim-explainer__title {
  margin: 0;
  color: var(--sim-espresso-950, #1f1913);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.sim-explainer__lede {
  max-width: 68ch;
  margin: 14px 0 0;
  font-size: 1rem;
  line-height: 1.7;
}

.sim-explainer__heading {
  margin: 30px 0 0;
  color: var(--sim-espresso-950, #1f1913);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.sim-explainer p {
  max-width: 68ch;
  margin: 12px 0 0;
  font-size: 0.94rem;
  line-height: 1.7;
}

.sim-explainer__list {
  max-width: 68ch;
  margin: 12px 0 0;
  padding-left: 1.15em;
  list-style: disc;
}

.sim-explainer__list li {
  margin-top: 7px;
  font-size: 0.94rem;
  line-height: 1.65;
}

/* The assumptions are the part a reader is most likely to quote back at the
   tool when the answer surprises them, so the note that bounds them is set
   apart rather than left as one more paragraph. */
.sim-explainer__note {
  max-width: 68ch;
  margin: 16px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--sim-gold-500, #c59b27);
  color: var(--sim-espresso-800, #574838);
  font-size: 0.88rem;
  line-height: 1.6;
}

.sim-explainer__faq {
  max-width: 68ch;
  margin: 8px 0 0;
}

.sim-explainer__faq dt {
  margin-top: 20px;
  color: var(--sim-espresso-950, #1f1913);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.45;
}

.sim-explainer__faq dd {
  margin: 7px 0 0;
  font-size: 0.94rem;
  line-height: 1.7;
}

.sim-explainer__reading {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--sim-cream-300, #efeae0);
}

/* The reading list is the only route from a simulator into the journal. Its
   links are underlined rather than coloured alone, because colour on this
   surface is doing enough work already and an underline is the one affordance
   that survives a reader who cannot separate the two. */
.sim-explainer a {
  color: var(--sim-espresso-900, #2a241e);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sim-explainer a:hover {
  color: var(--sim-gold-700, #7a5f12);
}

.sim-explainer a:focus-visible {
  outline: 3px solid rgba(197, 155, 39, 0.6);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .sim-explainer__inner {
    padding: 26px 22px;
  }
}

/*
 * The breadcrumb above the tool itself.
 *
 * Deliberately quiet: it exists so the four tool pages declare where they sit
 * in the site the way the hub already did, and a reader who does not need it
 * should be able to ignore it entirely. Inherits the page's own background
 * rather than painting one, because unlike the explainer panel it sits inside
 * whatever <main> already looks like - and the three palettes only conflict
 * over large filled areas, not over a line of small text.
 */
.sim-crumbs {
  /* Was "DM Sans" - the journal's UI face, which no simulator page loads, so
     this line only ever selected the fallback. Named honestly now. */
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  margin: 0 0 1rem;
}

.sim-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * The separator is a pseudo-element rather than a character in the markup, so
 * it is never read out, never copied with the text, and never ends up in the
 * accessible name of the link it follows.
 */
.sim-crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  opacity: 0.45;
}

.sim-crumbs a {
  color: currentColor;
  opacity: 0.7;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.sim-crumbs a:hover {
  opacity: 1;
}

.sim-crumbs a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* The current page is not a link, and should not look like one. */
.sim-crumbs [aria-current="page"] {
  opacity: 0.55;
}