/* Application library.
 *
 * Only what system.css does not already carry. Everything here is prefixed
 * `.app-` and built from the shared tokens. Surfaces and edges are mixed from
 * `currentColor` so a block reads correctly on every band tone rather than
 * assuming one background. No shadows, no glow, no decorative rules.
 */

/* The wedge block on the library index. It holds a heading, a real sentence
   about the engineering problem, and the routes out. Blocks are separated by
   space, not by a line. */
.app-wedge {
  display: grid;
  gap: calc(var(--gutter) * 1.25);
}

.app-wedge .open-lead,
.app-wedge .statement-lead {
  max-width: var(--measure-width);
}

/* The mechanism clusters on a wedge hub. A list, set as type, two columns
   where there is room. Markers are the house datum size, not bullets bolted
   onto a component. */
.app-clusters {
  list-style: none;
  margin: calc(var(--gutter) * 1.25) 0 0;
  padding: 0;
  display: grid;
  gap: calc(var(--gutter) * 0.6) calc(var(--gutter) * 2);
  max-width: var(--measure-width);
}

.app-clusters > li {
  position: relative;
  padding-left: 1.35em;
  line-height: 1.5;
}

.app-clusters > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5em;
  height: 2px;
  border-radius: 1px;
  background: var(--copper);
  opacity: 0.55;
}

@media (min-width: 52rem) {
  .app-clusters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

/* One tradeoff: a question and the parallel columns that answer it. The
   heading sits on the same left edge as the grid below it. */
.app-tradeoff {
  margin-top: calc(var(--gutter) * 1.75);
}

.app-tradeoff:first-of-type {
  margin-top: calc(var(--gutter) * 1.25);
}

.app-tradeoff > h3 {
  margin: 0 0 calc(var(--gutter) * 0.65);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.2;
}

/* The result of a worked example. A tonal step off the band surface with a
   self-coloured edge, so it reads as a landed conclusion rather than another
   paragraph. The left edge is heavier than the others: the calculation runs
   into it. */
.app-example-result {
  margin: calc(var(--gutter) * 1.5) 0 0;
  padding: calc(var(--gutter) * 1.1) calc(var(--gutter) * 1.25);
  max-width: var(--measure-width);
  background: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid var(--edge);
  border-left-width: 3px;
}

/* Type comes from the shared role label in system.css; only the spacing is
   local. */
.app-result-label {
  margin: 0 0 0.35em;
}

.app-result-body {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.62;
}

/* The assumption list inside a worked example's note. Scoped to this sheet so
   it cannot reach any other list on the site. */
.app-assumptions {
  margin: 0.4em 0 0;
  padding-left: 1.15em;
  display: grid;
  gap: 0.4em;
}

.app-assumptions > li {
  line-height: 1.55;
}