/* The Market and funnel screen. Every rule is scoped under .sim. The funnels sit side by
   side and stack when the section is narrow; the colour of a bar only says how far down
   the funnel it is. */
/* How far down the funnel a bar is: six tones, and the text colour on each (--sim-tone-N and
   --sim-on-tone-N). Their light and dark values are with the other theme colours in sim.css,
   because the dark selectors there cannot sit in a file where every rule starts `.sim `. */
.sim .sim-funnel {
  /* The narrowest bar. A bar's width runs from this (--sim-fill 0, the last step) to the
     whole column (1, the first), so the order stays visible however narrow the column. */
  --sim-bar-floor: max(38%, 130px);
}

.sim .sim-funnel { display: flex; flex-direction: column; gap: 16px; }
.sim .sim-funnel__legend { display: flex; flex-wrap: wrap; gap: 8px; }
.sim .sim-funnel__columns { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.sim .sim-funnel__card { flex: 1 1 340px; min-width: 0; padding: 20px; }
.sim .sim-funnel__line { margin: 2px 0 16px; }
.sim .sim-funnel__steps { display: flex; flex-direction: column; }

.sim .sim-funnel__bar {
  --tone: var(--sim-tone-1);
  --on-tone: var(--sim-on-tone-1);
  width: calc(var(--sim-bar-floor) + (100% - var(--sim-bar-floor)) * var(--sim-fill, 1));
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--tone);
  color: var(--on-tone);
  overflow-wrap: anywhere;
}
.sim .sim-funnel__bar--tone-1 { --tone: var(--sim-tone-1); --on-tone: var(--sim-on-tone-1); }
.sim .sim-funnel__bar--tone-2 { --tone: var(--sim-tone-2); --on-tone: var(--sim-on-tone-2); }
.sim .sim-funnel__bar--tone-3 { --tone: var(--sim-tone-3); --on-tone: var(--sim-on-tone-3); }
.sim .sim-funnel__bar--tone-4 { --tone: var(--sim-tone-4); --on-tone: var(--sim-on-tone-4); }
.sim .sim-funnel__bar--tone-5 { --tone: var(--sim-tone-5); --on-tone: var(--sim-on-tone-5); }
.sim .sim-funnel__bar--tone-6 { --tone: var(--sim-tone-6); --on-tone: var(--sim-on-tone-6); }
.sim .sim-funnel__bar--missing { background: transparent; border: 1px dashed var(--sim-control-border); color: var(--sim-muted); }
/* The registry row that stores a step, and how far to trust it. */
.sim .sim-funnel__stored { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0 18px; }
.sim .sim-funnel__value { font-family: var(--sim-font-head); font-weight: 700; font-size: 24px; }
.sim .sim-funnel__label { font-size: 14px; }

.sim .sim-funnel__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-left: 18px;
  padding: 8px 0 8px 18px;
  border-left: 2px solid var(--sim-control-border);
  font-size: 13px;
  color: var(--sim-text-label);
}
.sim .sim-funnel__link-text { min-width: 0; overflow-wrap: anywhere; }
.sim .sim-funnel__link--missing .sim-funnel__link-text { color: var(--sim-accent); font-weight: 600; }

/* A step that does not multiply out, or has no number, says so right under it. */
.sim .sim-funnel__mismatch, .sim .sim-funnel__problem {
  margin: 6px 0 0 18px;
  padding-left: 18px;
  border-left: 2px solid var(--sim-accent);
  font-size: 13px;
  color: var(--sim-accent);
}
.sim .sim-funnel__problem { font-weight: 600; }

.sim .sim-funnel__revenue {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--sim-border);
}
.sim .sim-funnel__revenue-label { color: var(--sim-muted); }
.sim .sim-funnel__revenue-value { font-family: var(--sim-font-head); font-weight: 700; font-size: 22px; }